close

Memformat UI dengan ThemeData dan Custom Styles in Flutter

Dalam Flutter, anda boleh memformat rupa dan rasa aplikasi anda menggunakan ThemeData dan menyesuaikan styles. ThemeData ialah kelas yang mengandungi sifat untuk menentukan warna dominan styles, fon, padding dsb. untuk keseluruhan aplikasi. Gaya Tersuai membolehkan anda menyesuaikan styles untuk setiap khusus Widget. Berikut ialah arahan terperinci tentang cara menggunakan ThemeData dan Tersuai Styles dalam Flutter:

ThemeData

In Flutter, ThemeData ialah kelas yang mengandungi atribut untuk mentakrifkan warna utama, keluarga fon, padding, dan banyak pilihan penggayaan lain untuk keseluruhan aplikasi. Dengan menggunakan ThemeData, anda boleh menukar penampilan keseluruhan apl anda dengan cepat tanpa perlu mengubah suai setiap individu Widget.

Atribut biasa bagi ThemeData:

  • primaryColor: Warna utama untuk elemen utama apl, seperti bar apl, butang, dsb.
  • accentColor: Warna aksen untuk elemen sekunder atau sorotan dalam UI, seperti FloatingActionButton.
  • backgroundColor: Warna latar belakang untuk keseluruhan apl.
  • textTheme: Mentakrifkan teks utama styles untuk elemen teks yang berbeza dalam apl, seperti tajuk, teks kandungan, dsb.
  • textTheme.headline1: Gaya teks untuk tajuk tahap 1.
  • textTheme.headline2: Gaya teks untuk tajuk tahap 2.
  • textTheme.bodyText1: Gaya teks untuk 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 Tersuai

Tersuai Styles membolehkan anda menyesuaikan gaya untuk setiap khusus Widget. Dengan menggunakan style atribut Widget seperti Text, Container, RaisedButton, dsb., anda boleh menukar fon, warna, saiz teks, padding, dan pelbagai atribut lain.

Atribut biasa TextStyle(digunakan untuk Widget Teks):

  • fontSize: Saiz fon.
  • fontWeight: Berat fon.
  • color: Warna teks.
  • fontStyle: Gaya fon, seperti tebal, condong.
  • letterSpacing: Jarak antara aksara.
  • wordSpacing: Jarak antara perkataan.
  • decoration: Hiasan teks, seperti garis bawah, coretan.

Contoh menggunakan 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)),  
)

 

Menggunakan Themes dan Styles dengan MediaQuery

Anda boleh menggabungkan Themes dan Styles dengan MediaQuery untuk melaraskan UI berdasarkan saiz skrin atau resolusi peranti.

Contoh:

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 menyediakan alatan berkuasa untuk memformat UI aplikasi anda. Dengan menggunakan ThemeData dan menyesuaikan Styles, anda boleh melaraskan elemen UI dengan mudah seperti warna, fon, saiz teks, dsb., untuk mencipta antara muka yang cantik dan menarik untuk apl anda.