اضافة Dark & light mode لتطبيق فلاتر

في هذا المقال سوف نشرح كيفية اضافة زر تحويل من الوضع النهاري الى الوضع الليلي والعكس لتطبيق فلاتر بشكل بسيط ومخنصر وبدون اضافة اي package او provider

إذا كنت ترغب في التعلم عبر الفيديو مع مثال تطبيقي ، فيمكنك مشاهدته على YouTube

1- قم باضافة هذا الكود الى كلاس MyApp والغرض منه لتهيئة اعداد Dark and Light mode :

2- قم بتعريف المتغير في نفس الكلاس باضافة هذا الكود:

3- قم بادراج المتغير ضمن ThemeData اسفل ال MaterialApp :

4- اضف كود الدالة المسئولة عن وظيفية التحويل بين Dark & Light mode قبل القوس المتعرج الاخير لكلاس MyApp:

5- انشى كلاس جديد من نوع StatefulWidget وسميه Setting :

7- اضف بعض الواجهات لاعطاء شكل جميل للشاشة ضمن body:

8- انشى اثنين TextButton.icon كتابع لواجهة ال Column سيكون احدهم مسؤل عن Dark mode و الاخر عن مسؤل عن Light mode :

يتكون كل TextButton.icon من ثلاثه عناصر, العنصر الاول هو onPressed وهو المسؤل عن تنفيذ الامر عند الضغط عليه , العنصر الثاني icon وهو المسؤل عن اضافة ايقونة لاعطاء شكل جميل وتوضيحي للزر العنصر الثالث label وهو المسؤل عن اضافة نص الى الزر

9- قم باضافة كود التشغيل الى onPressed في TextButton.icon الاولى والثانية :

هذا الكود لتنفيذ Dark mode داخل TextButton.icon الاولى

هذا الكود لتنفيذ Light mode داخل TextButton.icon الثانية

10- اضف اسماء الايقونتين وخصائصهم لعنصر ال icon :

هذه الايقونة مسؤلة عن شكل وخصائص ايقونة Light mode

هذه الايقونة مسؤلة عن شكل وخصائص ايقونة Dark mode

11 - قم بتسمية TextButton.icon الاول والثاني في عنصر label :

هذا label مسؤل عن تسمية Light mode

هنا كامل الكود :

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  /// This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();

/// /// /// to set up turn on/off of theme data /// /// ///
  static _MyAppState of(BuildContext context) =>
      context.findAncestorStateOfType<_MyAppState>();
}

class _MyAppState extends State<MyApp> {
  ThemeMode _themeMode = ThemeMode.system;

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
        theme: ThemeData(),
        darkTheme: ThemeData.dark(),
        themeMode: _themeMode,
        debugShowCheckedModeBanner: false,
        home: Setting());
  }

/// /// /// code of theme data function /// /// ///
  void changeTheme(ThemeMode themeMode) {
    setState(() {
      _themeMode = themeMode;
    });
  }
}

class Setting extends StatefulWidget {
  @override
  _SettingState createState() => _SettingState();
}

class _SettingState extends State<Setting> {
  @override
  Widget build(BuildContext context) {
    /// /// ui of setting screen /// ///
    return Scaffold(
      body: Center(
          child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 32,
            ),
            Text(
              'Setting',
              style: TextStyle(
                  color: Colors.pinkAccent,
                  fontWeight: FontWeight.w700,
                  fontSize: 24),
            ),

/// /// ui of button theme switch [ light and dark ] for icons and text /// ///
            SizedBox(
              height: 50,
            ),

/// /// code of button to turn light mode /// ///
            TextButton.icon(
              onPressed: () => MyApp.of(context).changeTheme(ThemeMode.light),
              icon: Icon(
                Icons.highlight,
                size: 30,
              ),
              label: Text(
                'LightTheme',
                style: TextStyle(
                  decoration: TextDecoration.underline,
                  height: 1.5,
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            SizedBox(
              height: 20,
            ),

/// /// code of button to turn dark mode /// ///
            TextButton.icon(
              onPressed: () => MyApp.of(context).changeTheme(ThemeMode.dark),
              icon: Icon(
                Icons.lightbulb,
                size: 30,
              ),
              label: Text(
                'DarkTheme',
                style: TextStyle(
                  decoration: TextDecoration.underline,
                  height: 1.5,
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ),
      )),
    );
  }
}

ملاحظة : هذا الكود في حال كان اصدار flutter sdk

اما اذا كان رقم الاصدار flutter sdk

فعليك اضافة بعض الرموز المضلل عليها بالاحمر الى الاكواد كما في الاسفل

مخرجات الكود :

brhomapps

بحث هذه المدونة الإلكترونية

اضافة Dark & light mode لتطبيق فلاتر بشكل مبسط

اضافة Dark & light mode لتطبيق فلاتر

في هذا المقال سوف نشرح كيفية اضافة زر تحويل من الوضع النهاري الى الوضع الليلي والعكس لتطبيق فلاتر بشكل بسيط ومخنصر وبدون اضافة اي package او provider

تعليقات

إرسال تعليق