Menu
CoddyTech
flag Ar iconالعربيةdown icon

التشغيل والإيقاف باستخدام مفتاح

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 27 من 34.

مفتاح Switch هو زر التبديل بين التشغيل والإيقاف الذي تعرفه من إعدادات الهاتف. يعرض قيمة منطقية، ويخبرك عندما يبدّله أحدهم:

Switch(
  value: _wifi,
  onChanged: (bool value) {
    setState(() {
      _wifi = value;
    });
  },
)

تحدّد value: موضع رسمه: تشغيل عند القيمة true، وإيقاف عند القيمة false. تحصل onChanged على القيمة الجديدة عند النقر على المفتاح.

لا يتحرك المفتاح من تلقاء نفسه. فالنقر لا يفعل سوى استدعاء onChanged؛ تخزّن القيمة الجديدة باستخدام setState، ثم يُعاد إنشاء الشاشة ويُرسم المفتاح في موضعه الجديد. إذا نسيت ذلك، فسيعود المفتاح إلى موضعه كلما نقرت عليه.

challenge icon

التحدي

سهل
  • اجعل المفتاح يعمل: خزّن القيمة الجديدة في _dark باستخدام setState.
  • امنح Scaffold قيمة backgroundColor هي Colors.black عند تفعيل الوضع الداكن، وColors.white عند إيقافه. يتغير لون التسمية بالفعل.

جرّب بنفسك

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> {
  bool _dark = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: const Text('Settings')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Dark mode',
              style: TextStyle(fontSize: 20, color: _dark ? Colors.white : Colors.black),
            ),
            const SizedBox(width: 12),
            Switch(
              value: _dark,
              onChanged: (bool value) {},
            ),
          ],
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس إضافة التفاعلية

تدرّب بنفسك: مترجم Flutter عبر الإنترنت