Tema (Theme) adalah bagian penting dari antarmuka pengguna (UI) untuk setiap aplikasi. Tema digunakan untuk mendesain jenis huruf dan warna dari sebuah aplikasi agar terlihat lebih menarik. Di dalam Flutter, widget yang berhubungan dengan tema digunakan untuk menambahkan tema pada sebuah aplikasi. Kita dapat menggunakannya untuk bagian tertentu dari aplikasi seperti tombol dan navigasi bar atau mendefinisikannya di root aplikasi untuk digunakan di seluruh bagian aplikasi.
Constructor Widget Theme
const Theme(
{Key? key,
required ThemeData data,
bool isMaterialAppTheme: false,
required Widget child}
)Properti Widget Theme
- child: Properti child mengambil widget sebagai object untuk ditampilkan di bawah widget Theme dalam struktur pohon widget.
- data: Properti ini mengambil class ThemeData sebagai object untuk menentukan gaya, warna, dan tipografi yang akan digunakan.
- isMaterialAppTheme: Properti ini mengambil boolean (final) sebagai object. Jika diatur sebagai true, maka tema akan menggunakan desain material.
Pada artikel ini, kita akan membahas cara menggunakan widget Theme. Untuk memulainya, ikuti langkah-langkah di bawah ini:
- Buatlah tema dengan membuat widget Theme
- Buatlah container untuk menerapkan tema tersebut
- Gunakan tema yang sama pada bagian aplikasi tertentu atau untuk seluruh aplikasi
Sekarang, mari kita lihat langkah-langkah di atas secara detail.
Membuat Theme
Gunakan widget ThemeData untuk menentukan detil tema. Berikut ini adalah beberapa properti yang dapat digunakan dalam widget ThemeData:
- TextTheme
- brightness
- primarycolor
- accentColor
- fontFamily
Sebuah tema sederhana akan terlihat seperti contoh kode di bawah ini:
MaterialApp(
title: title,
theme: ThemeData(
// UI
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
// font
fontFamily: 'Georgia',
//text style
textTheme: TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
)
);Membuat Container
Di Flutter, sebuah container dengan tema tertentu dapat didefinisikan seperti di bawah ini:
Container(
color: Theme.of(context).accentColor,
child: Text(
'Halo Guys!',
style: Theme.of(context).textTheme.headline6,
),
),Mengaplikasikan Theme
Untuk mengganti tema default dari sebuah widget di Flutter, kita dapat membungkus widget tersebut di dalam widget Theme. Sebuah instance ThemeData() dapat dibuat dan diteruskan ke widget yang bersangkutan seperti yang ditunjukkan di bawah ini:
Theme(
data: ThemeData(
accentColor: Colors.yellow,
),
child: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
Anda dapat melakukan extends pada tema yang sama ke seluruh aplikasi dengan menggunakan fungsi copyWith() seperti yang ditunjukkan di bawah ini:
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
),
);
Source Code Lengkap
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appName = 'Nextgen Tutorial';
return MaterialApp(
title: appName,
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.green,
accentColor: Colors.deepOrangeAccent,
fontFamily: 'Georgia',
//gaya tulisan
textTheme: const TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
home: const MyHomePage(
title: appName,
),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
const MyHomePage({ Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Container(
color: Theme.of(context).accentColor,
child: Text(
'Halo Guys!',
style: Theme.of(context).textTheme.headline6,
),
),
),
floatingActionButton: Theme(
data: Theme.of(context).copyWith(
colorScheme:
Theme.of(context).colorScheme.copyWith(secondary: Colors.red),
),
child: const FloatingActionButton(
onPressed: null,
child: Icon(Icons.arrow_circle_up),
),
),
);
}
}Output:
Tutorial sebelumnya : Skeleton Text Di Flutter
Tutorial setelahnya : Flutter Lazy Loading
Semua Tutorial Flutter : Tutorial Flutter