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: हेडिङ स्तर १ को लागि पाठ शैली।
  • textTheme.headline2: हेडिङ स्तर २ को लागि पाठ शैली।
  • 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 । Text, Container, 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 तत्वहरू समायोजन गर्न सक्नुहुन्छ जस्तै रङ, फन्ट, पाठ आकार, आदि, आफ्नो एपको लागि सुन्दर र आकर्षक इन्टरफेस सिर्जना गर्न।