Home Coding Memakai themes dalam Flutter

Memakai themes dalam Flutter

0

Styling aplikasi dilakukan dengan menggunakan Theme. Theme adalah sekumpulan warna yang memungkinkan untuk men-tweak dan memperbarui berbagai properti visual seperti warna font, warna latar belakang untuk elemen UI, warna teks, dll., dalam aplikasi.

Di Flutter, menyesuaikan tema widget agar terlihat dan cocok dengan desain pribadi Anda atau desain perusahaan Anda yang sudah ada memberikan hierarki, arah, dan struktur ke seluruh UI, membantu akuisisi dan interaksi pengguna.

Membuat Theme yang Adaptive

Agar aplikasi Flutter kami dapat beradaptasi dengan preferensi sistem yang berbeda saat membuat tema, kami harus memberikan beberapa parameter ke Widget ‘MaterialApp’, seperti di bawah ini:

Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 title: ‘Flutter Theme demo’,
 home: Screen1(),
 darkTheme: ThemeData(
 brightness: Brightness.dark,
 ),
 theme: ThemeData(
 brightness: Brightness.light,
 ),
 themeMode: ThemeMode.system,
 );
 }

Melihat kode di atas, kami bisa melihat bahwa dengan memberikan nilai ‘themeMode’, mode aplikasi diatur sesuai pengaturan yang digunakan di perangkat. Ini berarti bahwa ketika sistem mengaktifkan tema gelap, ‘darkTheme’ akan digunakan. Alternatifnya, nilai objek yang sesuai akan digunakan saat tema mode cahaya diaktifkan.

Untuk ini, nilai untuk objek ‘darkTheme’ dan ‘theme’ harus ditentukan agar tema dapat diubah ke tema mana pun yang disetel di perangkat. Secara default, tema ringan dipilih untuk aplikasi Flutter. Namun, jika hanya mode tema gelap yang diperlukan, nilai yang sesuai untuk ‘ThemeMode.dark’ perlu disediakan ke themeMode. Dalam skenario ini, hanya objek ‘darkTheme’ yang dapat diteruskan.

Membuat Custom Theme

Mulailah dengan membuat file baru dan beri nama sebagai custom_theme.dart. Buka file yang baru dibuat dan tuliskan kode di bawah ini di dalamnya:

import ‘package:flutter/material.dart’;
 
 ThemeData customLightTheme() {
 
 TextTheme _customLightThemesTextTheme(TextTheme base) {
 return base.copyWith(
 headline1: base.headline1.copyWith(
 fontFamily: ‘Roboto’,
 fontSize: 22.0,
 color: Colors.green,
 ),
 headline6: base.headline6.copyWith(
 fontSize: 15.0,
 color: Colors.orange
 ),
 headline4: base.headline1.copyWith(
 fontSize: 24.0,
 color: Colors.white,
 ),
 headline3: base.headline1.copyWith(
 fontSize: 22.0,
 color: Colors.grey,
 ),
 caption: base.caption.copyWith(
 color: Color(0xFFCCC5AF),
 ),
 bodyText2: base.bodyText2.copyWith(color: Color(0xFF807A6B)),
 bodyText1: base.bodyText1.copyWith(color: Colors.brown),
 );
 }
 
 final ThemeData lightTheme = ThemeData.light();
 return lightTheme.copyWith(
 textTheme: _customLightThemesTextTheme(lightTheme.textTheme),
 primaryColor: Color(0xffce107c),
 indicatorColor: Color(0xFF807A6B),
 scaffoldBackgroundColor: Color(0xFFF5F5F5),
 accentColor: Color(0xFFFFF8E1),
 primaryIconTheme: lightTheme.primaryIconTheme.copyWith(
 color: Colors.white,
 size: 20,
 ),
 iconTheme: lightTheme.iconTheme.copyWith(
 color: Colors.white,
 ),
 buttonColor: Colors.white,
 backgroundColor: Colors.white,
 tabBarTheme: lightTheme.tabBarTheme.copyWith(
 labelColor: Color(0xffce107c),
 unselectedLabelColor: Colors.grey,
 ),
 buttonTheme: lightTheme.buttonTheme.copyWith(buttonColor: Colors.red),
 cursorColor: Colors.deepPurple,
 errorColor: Colors.red,
 );
 }
 
 
 ThemeData customDarkTheme() {
 final ThemeData darkTheme = ThemeData.dark();
 return darkTheme.copyWith(
 primaryColor: Colors.black38,
 indicatorColor: Color(0xFF807A6B),
 accentColor: Color(0xFFFFF8E1),
 primaryIconTheme: darkTheme.primaryIconTheme.copyWith(
 color: Colors.green,
 size: 20,
 ),
 cursorColor: Colors.green,
 );
 }

Dalam kode di atas, kami telah menetapkan dua tema di kelas ini: mode gelap dan mode terang. Anda dapat melihat kami memberikan nilai khusus kami untuk properti objek tema. Kami hanya mengganti beberapa parameter untuk tema gelap khusus.

Untuk tema cahaya custom, kita telah memberikan nilai ke banyak parameter. Parameter lain akan menggunakan nilai default. Jika diperlukan, kami dapat menetapkan nilai khusus untuk parameter tersebut.

Di widget MaterialApp, teruskan objek tema kustom berikut untuk parameter tema terang dan gelap:

MaterialApp(
 debugShowCheckedModeBanner: false,
 title: ‘Flutter Theme demo’,
 home: HomeScreen(),
 darkTheme: customDarkTheme(),
 theme: customLightTheme(),
 themeMode: ThemeMode.system,
 );

Jika Anda menjalankan aplikasi sekarang, Anda akan melihat warna tema khusus akan diterapkan sesuai mode masing-masing yang diatur dalam sistem.