close

यूआई को फ़ॉर्मेट करना ThemeData और कस्टम Styles इन करना Flutter

में Flutter, आप का उपयोग करके अपने एप्लिकेशन के स्वरूप और अनुभव को प्रारूपित ThemeData और अनुकूलित कर सकते हैं styles । एक वर्ग है जिसमें संपूर्ण एप्लिकेशन के लिए ThemeData प्रमुख रंग styles, फ़ॉन्ट आदि को परिभाषित करने के गुण शामिल हैं। padding कस्टम शैली आपको styles प्रत्येक विशिष्ट के लिए अनुकूलित करने की अनुमति देती है Widget । यहां उपयोग ThemeData और कस्टम के बारे Styles में विस्तृत निर्देश दिए गए हैं Flutter:

ThemeData

में Flutter, एक वर्ग है जिसमें संपूर्ण एप्लिकेशन के लिए ThemeData प्राथमिक रंग, फ़ॉन्ट परिवार, और कई अन्य स्टाइलिंग विकल्पों को परिभाषित करने के लिए विशेषताएँ शामिल हैं। padding इसका उपयोग करके ThemeData, आप प्रत्येक व्यक्ति को संशोधित किए बिना अपने ऐप के समग्र स्वरूप को तुरंत बदल सकते हैं Widget ।

इनके सामान्य गुण ThemeData:

  • primaryColor: ऐप के मुख्य तत्वों के लिए प्राथमिक रंग, जैसे ऐप बार, बटन इत्यादि।
  • accentColor: यूआई में द्वितीयक तत्वों या हाइलाइट्स के लिए उच्चारण रंग, जैसे फ्लोटिंगएक्शनबटन।
  • 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 और विभिन्न अन्य विशेषताओं को बदल सकते हैं।

टेक्स्टस्टाइल की सामान्य विशेषताएँ(टेक्स्ट विजेट के लिए प्रयुक्त):

  • 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

आप स्क्रीन आकार या डिवाइस रिज़ॉल्यूशन के आधार पर यूआई को समायोजित करने के लिए इसे जोड़ 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, आप अपने ऐप के लिए एक सुंदर और आकर्षक इंटरफ़ेस बनाने के लिए यूआई तत्वों जैसे रंग, फ़ॉन्ट, टेक्स्ट आकार इत्यादि को आसानी से समायोजित कर सकते हैं।