close

تنسيق واجهة المستخدم باستخدام ThemeData ومخصص Styles بتنسيق Flutter

في Flutter ، يمكنك تنسيق شكل وأسلوب التطبيق الخاص بك باستخدام ThemeData وتخصيص styles. ThemeData هي فئة تحتوي على خصائص لتحديد اللون السائد styles والخطوط padding وما إلى ذلك للتطبيق بأكمله. نمط مخصص يسمح لك بالتخصيص styles لكل محدد Widget. فيما يلي إرشادات مفصلة حول كيفية الاستخدام ThemeData والتخصيص: Styles Flutter

ThemeData

في Flutter ، ThemeData هي فئة تحتوي على سمات لتعريف اللون الأساسي وعائلة الخط padding والعديد من خيارات التصميم الأخرى للتطبيق بأكمله. باستخدام ThemeData ، يمكنك تغيير المظهر العام لتطبيقك بسرعة دون الحاجة إلى تعديل كل فرد Widget.

السمات المشتركة لـ ThemeData:

  • primaryColor: اللون الأساسي للعناصر الرئيسية للتطبيق ، مثل شريط التطبيق والأزرار وما إلى ذلك.
  • accentColor: لون التمييز للعناصر الثانوية أو الإبرازات في واجهة المستخدم ، مثل FloatingActionButton.
  • backgroundColor: لون الخلفية للتطبيق بأكمله.
  • textTheme: يحدد النص الأساسي styles لعناصر النص المختلفة في التطبيق ، مثل العناوين والنص الأساسي وما إلى ذلك.
  • textTheme.headline1: نمط النص لمستوى العنوان 1.
  • textTheme.headline2: نمط النص لمستوى العنوان 2.
  • textTheme.bodyText1: نمط النص للنص الأساسي الرئيسي.
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

نمط مخصص

مخصص Styles يسمح لك بتخصيص النمط لكل محدد Widget. باستخدام style سمة الأدوات مثل Text و Container و RaisedButton وما إلى ذلك ، يمكنك تغيير الخط واللون وحجم النص padding والعديد من السمات الأخرى.

السمات الشائعة لـ TextStyle(المستخدمة في Text Widget):

  • fontSize: حجم الخط.
  • fontWeight: وزن الخط.
  • color: لون النص.
  • fontStyle: نمط الخط ، مثل غامق ومائل.
  • letterSpacing: التباعد بين الأحرف.
  • wordSpacing: التباعد بين الكلمات.
  • decoration: زخرفة النص ، مثل تسطير ، يتوسطها خط.

مثال باستخدام Custom Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

استخدام Themes ومع Styles _ MediaQuery

يمكنك الجمع بين واجهة المستخدم وضبطها بناءً على حجم الشاشة أو دقة الجهاز Themes. Styles MediaQuery

مثال:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

خاتمة:

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