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 উপাদান যেমন রঙ, ফন্ট, পাঠ্য আকার ইত্যাদি সমন্বয় করতে পারেন।