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 FloatingActionButton போன்ற UI இல் உள்ள இரண்டாம் நிலை கூறுகள் அல்லது சிறப்பம்சங்களுக்கான உச்சரிப்பு நிறம்.
  • 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 கூறுகளை எளிதாக சரிசெய்யலாம்.