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: 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 మూలకాలను సులభంగా సర్దుబాటు చేయవచ్చు.