اختر قيمة باستخدام شريط التمرير

جزء من قسم إضافة التفاعلية في رحلة 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)),
          ],
        ),
      ),
    );
  }
}