close

Memformat UI dengan ThemeData dan Kustom Styles masuk Flutter

Di Flutter, Anda dapat memformat tampilan dan nuansa aplikasi Anda menggunakan ThemeData dan menyesuaikan file styles. ThemeData adalah kelas yang berisi properti untuk menentukan warna dominan styles, font, padding dll. untuk keseluruhan aplikasi. Gaya Kustom memungkinkan Anda menyesuaikan styles untuk setiap Widget. Berikut adalah petunjuk terperinci tentang cara menggunakan ThemeData dan Kustom Styles di Flutter:

ThemeData

Di Flutter, ThemeData adalah kelas yang berisi atribut untuk menentukan warna primer, jenis font, padding, dan banyak opsi gaya lainnya untuk keseluruhan aplikasi. Dengan menggunakan ThemeData, Anda dapat dengan cepat mengubah keseluruhan tampilan aplikasi Anda tanpa harus memodifikasi setiap individu Widget.

Atribut umum dari ThemeData:

  • primaryColor: Warna utama untuk elemen utama aplikasi, seperti bilah aplikasi, tombol, dll.
  • accentColor: Warna aksen untuk elemen sekunder atau sorotan di UI, seperti FloatingActionButton.
  • backgroundColor: Warna latar untuk seluruh aplikasi.
  • textTheme: Menentukan teks utama styles untuk berbagai elemen teks dalam aplikasi, seperti judul, teks isi, dll.
  • textTheme.headline1: Gaya teks untuk tajuk tingkat 1.
  • textTheme.headline2: Gaya teks untuk tajuk tingkat 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 Kustom

Kustom Styles memungkinkan Anda menyesuaikan gaya untuk setiap Widget. Dengan menggunakan style atribut Widgets seperti Text, Container, RaisedButton, dll, Anda dapat mengubah font, warna, ukuran teks, padding, dan berbagai atribut lainnya.

Atribut umum TextStyle(digunakan untuk Widget Teks):

  • fontSize: Ukuran huruf.
  • fontWeight: Berat font.
  • color: Warna teks.
  • fontStyle: Gaya font, seperti tebal, miring.
  • letterSpacing: Spasi antar karakter.
  • wordSpacing: Spasi antar kata.
  • decoration: Dekorasi teks, seperti garis bawah, coretan.

Contoh menggunakan Kustom 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 dapat menggabungkan Themes dan Styles dengan MediaQuery menyesuaikan UI berdasarkan ukuran layar atau resolusi perangkat.

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 alat canggih untuk memformat UI aplikasi Anda. Dengan menggunakan ThemeData dan menyesuaikan Styles, Anda dapat dengan mudah menyesuaikan elemen UI seperti warna, font, ukuran teks, dll., untuk membuat antarmuka yang indah dan menarik untuk aplikasi Anda.