Flutter Theme

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:

 

Tinggalkan Balasan

Keranjang Belanja0
Keranjang belanja kosong ...
0