close

ThemeData सह आणि सानुकूल Styles UI चे स्वरूपन 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. मजकूर, कंटेनर, RaisedButton इत्यादी विजेट्सचे गुणधर्म वापरून 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 घटक जसे की रंग, फॉन्ट, मजकूर आकार इ. सहजपणे समायोजित करू शकता.