בחירת ערך באמצעות מחוון

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 29 מתוך 34.

באמצעות גרירה, Slider בוחר מספר מתוך טווח. כמו מתג, הוא מציג את הvalue: שלו וקורא לonChanged עם הערך החדש:

Slider(
  value: _size,
  min: 0,
  max: 50,
  divisions: 5,
  onChanged: (double value) {
    setState(() {
      _size = value;
    });
  },
)

min: וmax: הם שני הקצוות. divisions: גורם לו לקפוץ בצעדים: 5 חלוקות מ-0 עד 50 פירושן 0, 10, 20, 30, 40 ו-50. בלעדיו, כל ערך שביניהם אפשרי. אפשר גם להקיש על המסילה, והמחוון יקפוץ לשם.

הערך הוא תמיד double, ולכן הוא מוצג בתור 20.0. _size.round() מעגל אותו למספר השלם הקרוב ביותר, int, שמוצג בתור 20.

אתגר

קל

גרמו למחוון לנוע: שמרו את הערך שלו ב־_volume באמצעות setState.
הציגו מתחתיו את עוצמת הקול כמספר שלם: Volume: 20, ולא Volume: 20.0.

נסו בעצמכם

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _volume = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sound')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.volume_up, size: 64),
            Slider(
              value: _volume,
              min: 0,
              max: 100,
              divisions: 10,
              onChanged: (double value) {},
            ),
            Text('Volume: ?', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}