close

UI-ის ფორმატირება ThemeData და Styles მორგება Flutter

In, თქვენ შეგიძლიათ დაფორმატოთ Flutter თქვენი აპლიკაციის გარეგნობა და შეგრძნება. არის კლასი, რომელიც შეიცავს თვისებებს, რათა განისაზღვროს დომინანტური ფერი, შრიფტები და ა.შ. მთელი განაცხადისთვის. მორგებული სტილი საშუალებას გაძლევთ დააკონფიგურიროთ თითოეული კონკრეტულისთვის. აქ მოცემულია დეტალური ინსტრუქციები გამოყენების და მორგების შესახებ: ThemeData styles ThemeData styles padding styles Widget ThemeData Styles Flutter

ThemeData

In 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(),  
)

 

მორგებული სტილი

Custom Styles საშუალებას გაძლევთ დააკონფიგურიროთ სტილი თითოეული კონკრეტულისთვის Widget. ვიჯეტების ატრიბუტის გამოყენებით, style როგორიცაა Text, Container, RaisedButton და ა.შ., შეგიძლიათ შეცვალოთ შრიფტი, ფერი, ტექსტის ზომა 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

შეგიძლიათ დააკავშიროთ 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, თქვენ შეგიძლიათ მარტივად დაარეგულიროთ UI ელემენტები, როგორიცაა ფერები, შრიფტები, ტექსტის ზომები და ა.შ., რათა შექმნათ ლამაზი და მიმზიდველი ინტერფეისი თქვენი აპისთვის.