إضافة ملف للوضع الليلي والصباحي في Flutter

إضافة ملف للوضع الليلي والصباحي في Flutter

في هذا المقال سوف نتعرف على كيفية اضافة ملف للوضع الليلي داخل فلاتر وهذا الملف سوف يكون شامل للوضع الليلي والنهاري يمكنك استخدامه في اي وقت وفي اي مشروع بدلا من كتابة كود كبير في الmain وهذا الامر غير محبز لذلك نحاول قدر الامكان تنظيم الكود باكبر شكل لكي تتمكون من الوصول الى الاكواد والمشاريع بشكل اسرع وايضا لتسهيل عملية الكود عليكم .

اتجاه العالم في الايام المقبله كما هو موضح امامنا متجه بشكل كبير في محال البرمجيات وتطوير البرمجيات المختلفه سواء تطبيقات هواتف ذكيه او برامج سطح مكتب او حتى في مجال تطوير الاجهزه والبرمجيات التي تختص بعلم الذكاء الاصطناعي ، والاقبال ع تعلم البرمجه اصبح كبير جدا وذلك لانها تسهل على البشر الكثير من الوقت وتقدم امكانية استخدام مختلفه وخصوصا مجال تطوير وبرمجة تطبيقات الجوال وهذا ما نركز عليه في موقعنا بالشكل الكبير .

نحن تهتم في موقعنا في مساعتدكم على تعلم وتطوير تطبيقاات الاندرويد و ios باستخدام تقنية flutter وهي تقنيه حديثه مقدمه لنا من العملاق جوجل والتي تهدف وتسعى ان الى توسع علم البرمجه وتسهل على المستخدمين التعامل مع مختلف الاجهزه بلغة واحده مثل تطوير تطبيقات android , ios , embeded , desktop بلغة واحده وهذا ما يميز هذه اللغه ونسبة الوظائف بها اصبحت مطلوبه بشكل كبير عن غيرها من التقنيات ولكن في نهاية الامر هي تعد cross platform .

إنشاء ملف style للtheme

قم بإنشاء ملف باسم ستايل لتقوم بوضع داخلة الثيم الليلي والصباحي كما يظهر بالصورة .

كود Darkmode و lightTheme في فلاتر

قم بإضافة الاكواد التالية بداخل الملف الذي قمت بتصميمة .

style.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:hexcolor/hexcolor.dart';

ThemeData darkTheme = ThemeData(
// لون اتطبيق الرئيسي
  primarySwatch: Colors.deepOrange,
  floatingActionButtonTheme: FloatingActionButtonThemeData(
    backgroundColor: Colors.deepOrange,
  ),
  scaffoldBackgroundColor: HexColor('423F3E'),
  appBarTheme: AppBarTheme(
    iconTheme: IconThemeData(
        color: Colors.white
    ),
// سماح بتغيير لون الشريط العلوي

    backwardsCompatibility: false,
    systemOverlayStyle: SystemUiOverlayStyle(
// لون شريط الايقونات
        statusBarColor: HexColor('2B2B2B'),
// لون الايقونات
        statusBarIconBrightness : Brightness.light
    ),
    titleTextStyle: TextStyle(color: Colors.white , fontSize: 18.0 , fontWeight: FontWeight.bold),
    backgroundColor: HexColor('2B2B2B'),
    elevation: 1.0,
  ),
  bottomNavigationBarTheme: BottomNavigationBarThemeData(
    type: BottomNavigationBarType.fixed,
    backgroundColor: HexColor('2B2B2B'),
    elevation: 20.0,

    selectedItemColor: HexColor('EED6C4'),
    unselectedItemColor: HexColor('423F3E'),
  ),
  textTheme: TextTheme(
    bodyText1: TextStyle(
        fontSize: 18 , color: Colors.white , fontWeight: FontWeight.bold
    ),
    bodyText2: TextStyle( fontSize: 14 , color: Colors.white , fontWeight: FontWeight.bold),
  ),
);

ThemeData lightTheme = ThemeData(
// لون اتطبيق الرئيسي
primarySwatch: Colors.deepOrange,
textTheme: TextTheme(
bodyText1: TextStyle(
fontSize: 18 , color: HexColor('212121') , fontWeight: FontWeight.bold
),
bodyText2: TextStyle( fontSize: 14 , color: HexColor('4A403A') , fontWeight: FontWeight.bold),
),
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Colors.deepOrange,
),
scaffoldBackgroundColor: Colors.white,
appBarTheme: AppBarTheme(
iconTheme: IconThemeData(
color: Colors.black54
),
// سماح بتغيير لون الشريط العلوي

backwardsCompatibility: false,
systemOverlayStyle: SystemUiOverlayStyle(
// لون شريط الايقونات
statusBarColor: Colors.white,
// لون الايقونات
statusBarIconBrightness : Brightness.dark
),
titleTextStyle: TextStyle(color: Colors.black , fontSize: 18.0 , fontWeight: FontWeight.bold),
backgroundColor: Colors.white,
elevation: 1.0,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
type: BottomNavigationBarType.fixed,
elevation: 20.0,

selectedItemColor: Colors.deepOrange,
)
);

كود استدعاء theme في main class

main.dart

      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: ThemeMode.dark,
      home:  const OnBoardingScreen(),
      

لمزيد من الاكواد والشروحات في فلاتر او تطوير تطبيقات الجوال بشكل كبير يمكنكم مشاهدة باقي المقالات على الموقع والاستمتاع بكل ما نقدمه لكم بشكل مجاني ومفيد .

شرح إستخدام الStatefulWidget في Flutter وعمل تطبيق counter