close

Format UI karo ThemeData lan Custom Styles ing Flutter

Ing Flutter, sampeyan bisa ngowahi format tampilan lan rasa aplikasi sampeyan nggunakake ThemeData lan ngatur file styles. ThemeData iku kelas sing ngemot sifat kanggo nemtokake werna dominan styles, fonts, padding etc.. kanggo kabeh aplikasi. Gaya Kustom ngidini sampeyan ngatur styles kanggo saben tartamtu Widget. Punika instruksi rinci babagan cara nggunakake ThemeData lan Custom Styles ing Flutter:

ThemeData

Ing Flutter, ThemeData minangka kelas sing ngemot atribut kanggo nemtokake warna utami, kulawarga font, padding lan akeh opsi gaya liyane kanggo kabeh aplikasi. Kanthi nggunakake ThemeData, sampeyan bisa kanthi cepet ngganti tampilan sakabèhé app tanpa kudu ngowahi saben individu Widget.

Atribut umum saka ThemeData:

  • primaryColor: Werna utama kanggo unsur utama app, kayata bar app, tombol, lsp.
  • accentColor: Werna aksen kanggo unsur sekunder utawa sorotan ing UI, kayata FloatingActionButton.
  • backgroundColor: Werna latar mburi kanggo kabeh app.
  • textTheme: Nemtokake teks utama styles kanggo macem-macem unsur teks ing app, kayata judhul, teks awak, lsp.
  • textTheme.headline1: Gaya teks kanggo judhul level 1.
  • textTheme.headline2: Gaya teks kanggo judhul level 2.
  • textTheme.bodyText1: Gaya teks kanggo teks isi utama.
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(),  
)

 

Gaya Kustom

Custom Styles ngidini sampeyan ngatur gaya kanggo saben tartamtu Widget. Kanthi nggunakake style atribut Widget kaya Teks, Wadah, RaisedButton, lan sapiturute, sampeyan bisa ngganti font, warna, ukuran teks, padding lan macem-macem atribut liyane.

Atribut umum TextStyle(digunakake kanggo Widget Teks):

  • fontSize: Ukuran font.
  • fontWeight: Bobot font.
  • color: Warna teks.
  • fontStyle: Gaya font, kayata kandel, miring.
  • letterSpacing: Jarak antarane karakter.
  • wordSpacing: Jarak antarane tembung.
  • decoration: Dekorasi teks, kayata garis ngisor, strike-through.

Tuladha nggunakake Custom 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)),  
)

 

Nggunakake Themes lan Styles karo MediaQuery

Sampeyan bisa gabungke Themes lan Styles kanggo MediaQuery nyetel UI adhedhasar ukuran layar utawa résolusi piranti.

Tuladha:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

Kesimpulan:

Flutter nyedhiyakake alat sing kuat kanggo ngowahi format UI aplikasi sampeyan. Kanthi nggunakake ThemeData lan ngatur Styles, sampeyan bisa kanthi gampang nyetel unsur UI kayata werna, font, ukuran teks, lan sapiturute, kanggo nggawe antarmuka sing apik lan menarik kanggo aplikasi sampeyan.