close

UI کے ساتھ فارمیٹنگ ThemeData اور اپنی مرضی Styles کے مطابق Flutter

میں Flutter ، آپ اپنی ایپلیکیشن کی شکل و صورت کو استعمال کر کے اپنی ThemeData مرضی کے مطابق بنا سکتے ہیں styles ۔ ایک کلاس ہے جس میں تمام ایپلیکیشن کے لیے ThemeData غالب رنگ styles ، فونٹس، وغیرہ کی وضاحت کرنے کے لیے خصوصیات شامل ہیں۔ padding کسٹم اسٹائل آپ کو styles ہر مخصوص کے لیے اپنی مرضی کے مطابق کرنے کی اجازت دیتا ہے Widget ۔ یہاں کس طرح استعمال کرنے ThemeData اور کسٹم کرنے کے بارے Styles میں تفصیلی ہدایات ہیں Flutter:

ThemeData

میں Flutter ، ThemeData ایک ایسی کلاس ہے جس میں بنیادی رنگ، فونٹ فیملی، padding اور پوری ایپلیکیشن کے لیے اسٹائل کے بہت سے دیگر اختیارات کی وضاحت کرنے کے لیے صفات شامل ہیں۔ استعمال کر کے ThemeData ، آپ ہر فرد میں ترمیم کیے بغیر اپنی ایپ کی مجموعی شکل کو تیزی سے تبدیل کر سکتے ہیں Widget ۔

کی عام صفات ThemeData:

  • primaryColor: ایپ کے اہم عناصر کے لیے بنیادی رنگ، جیسے کہ ایپ بار، بٹن وغیرہ۔
  • accentColor: UI میں ثانوی عناصر یا ہائی لائٹس کے لیے لہجے کا رنگ، جیسے 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 ، آپ فونٹ، رنگ، ٹیکسٹ سائز، padding اور مختلف دیگر خصوصیات کو تبدیل کرسکتے ہیں۔

TextStyle کی عام صفات(ٹیکسٹ ویجیٹ کے لیے استعمال کیا جاتا ہے):

  • fontSize: فونٹ کا سائز۔
  • fontWeight: فونٹ کا وزن۔
  • color: متن کا رنگ۔
  • fontStyle: فونٹ کا انداز، جیسے بولڈ، ترچھا۔
  • letterSpacing: حروف کے درمیان فاصلہ۔
  • wordSpacing: الفاظ کے درمیان فاصلہ۔
  • decoration: متن کی سجاوٹ، جیسے انڈر لائن، سٹرائیک تھرو۔

حسب ضرورت استعمال کرنے کی مثال 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

آپ اسکرین کے سائز یا ڈیوائس ریزولوشن کی بنیاد پر UI کو ایڈجسٹ کرنے کے لیے یکجا 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 آپ کی درخواست کے UI کو فارمیٹ کرنے کے لیے طاقتور ٹولز فراہم کرتا ہے۔ ThemeData کو استعمال کرنے اور حسب ضرورت بنانے سے Styles ، آپ اپنی ایپ کے لیے ایک خوبصورت اور دلکش انٹرفیس بنانے کے لیے UI عناصر جیسے رنگ، فونٹ، ٹیکسٹ سائز وغیرہ کو آسانی سے ایڈجسٹ کر سکتے ہیں۔