عمل theme للApplication كامل في flutter
المظهر في التطبيق من الاشياء التي يجب عليك التركيز عليها جيدا وبكثرة ولهذا في هذا المقال نشارك معكم كيفية تغيير الثيم الخاص بالتطبيق الذي تعمل عليه بكل سهوله , ولهذا يمكنك التعامل مع الاكواد والاشكال بشكل جيد من خلال الاكواد التي سوف تضعها في صفحة الmain وفي الصورة المقدمه في هذة المقالة والاكواد سوف تفهم الفكرة وتعرف كيف تستطيع التحكم في الوان التطبيق بشكل كامل من مكان واحد .
ظهرت لغة دارت في سنة 2011 و فلاتر ظهر في سنة 2017 وهذا يعني انهاومن بيئات العمل الجديده وللمعلومية flutter من تطوير العملاق جوجل والتي تطور الكثير من اللغات وتهتم بعالم البرمجه بشكل كبير جدا وهي ايضا من قامت بتطوير كوتلن والمختصه بتطوير تطبيقات الاندرويد واصبحت المنافسه للجافا وذلك بعد المشاكل التي واجهتها جوجل بسبب التطبيقات المطوره باستخدام جافا على Google play واصبحت تقدم الكثير من libraries التي تسهل على المطورين العمل وتسهل عليهم الكثير من الوقت في انشاء وتطوير تطبيقات الجوال بشكل سريع .
Flutter كغيرها من بيئات العمل سوف تواجه مشاكل مع التطبيقات التي تظهر بواسطتها ولكن لا تقلق فقد لا تشاهد مشاكل سوا في المشاريع الكبيره جدا ولكن كتطبيقات بسيطه او متوسطه فلا تقلق منها اطلاقا ودائما نجد استمراريه في التطوير من قبل جوجل لحل المشاكل التي تواجه المستخدمين بشكل كبير ، وهذا ما يجعل المبرمجين ينتقلون الى هذه اللغه والتعامل معها في الفترات الاخيره وترك باقي اللغات ، ونحن سنشارك معكم شروحات في تطوير التطبيقات بشكل مبسط لكم .
تغيير الثيم الخاص بالتطبيق بشكل كامل في فلاتر
لكي تقوم بتغيير شكل المظهر الخاص بالتطبيق فهذا يكون من خلال استخدام main والتعديل في الثيم الخاص بالتطبيق ويمكنك عمل ثيم للوضع الليلي واخر للوضع الصباحي وعمل خصائص لكل وضع من الاوضاع وهذا ما يجعل الامر افضل ويسهل التعامل مع الالوان والاوضاع في التطبيق ويساعدك على تغيير الالوان والتحكم بشكل كامل من مكان واحد دون الحاجه الى الانتقال الى اكثر من مكان لكي تقوم بعملية التعديل
class MyApp extends StatelessWidget {
@override
Widget build(Object context) {
return MaterialApp(
// delete debug in app
debugShowCheckedModeBanner: false,
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
appBarTheme: AppBarTheme(
iconTheme: IconThemeData(
color: Colors.black54
),
// سماح بتغيير لون الشريط العلوي
backwardsCompatibility: false,
systemOverlayStyle: SystemUiOverlayStyle(
// لون شريط الايقونات
statusBarColor: Colors.red[300],
// لون الايقونات
statusBarIconBrightness : Brightness.dark
),
titleTextStyle: TextStyle(color: Colors.black , fontSize: 18.0 , fontWeight: FontWeight.bold),
backgroundColor: Colors.deepOrange,
elevation: 20.0,
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
type: BottomNavigationBarType.fixed,
elevation: 20.0,
selectedItemColor: Colors.deepOrange,
),
),
home: News_layout()
);
}
}
لمزيد من الشروحات والمقالات يمكنك مشاهدة الموقع والاستفاده من الاكواد التي نقدمها لكم بشكل مجاني
- كيفية عمل listview في flutter بسهوله | Flutter Widget of ListView
- شرح عمل ModelClass و Constructor لبيانات الlistView في Flutter
- كيفية اظهار واخفاء كلمة المرور في فلاتر بسهوله
- تصميم واجهة تطبيق messanger facebook بإستخدام flutter
- تصميم واجهة Login في Flutter مع شرح كيفية التصميم
