Flutter AppBar

AppBar adalah komponen dari aplikasi Flutter, yang biasanya berisi toolbar dan beberapa tombol aktifitas umum. Komponen ini dapat ditempatkan di bagian atas atau bawah aplikasi tergantung pada kebutuhan. Widget AppBar didasarkan pada Material Design dan menyediakan fungsionalitas secara otomatis. Untuk menentukan di mana konten AppBar harus ditempatkan, kita dapat menggunakan class lain seperti MediaQuery dan Scaffold. Meskipun AppBar sangat fleksibel dan mudah disesuaikan, kita juga dapat menggunakan widget SliverAppBar untuk membuat AppBar yang dapat di-scroll atau membuat AppBar kustom dari awal.

Constructor dari AppBar

AppBar(
{Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List actions,
double elevation,
Color shadowColor,
ShapeBorder shape,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
...}
)

Properti dari AppBar

Widget Appbar memiliki beberapa properti, antara lain:

actions: Properti ini memungkinkan Anda menambahkan daftar widget yang akan ditampilkan setelah judul pada baris Appbar.
title: Properti ini memungkinkan Anda menambahkan widget utama yang akan ditampilkan di Appbar.
backgroundColor: Properti ini digunakan untuk menambahkan warna ke latar belakang Appbar.
elevation: Properti ini digunakan untuk menentukan koordinat-z dari Appbar relatif terhadap induknya.
shape: Properti ini digunakan untuk memberikan bentuk pada Appbar dan mengatur bayangannya.

Contoh:

import 'package:flutter/material.dart';

void main() {
  runApp(ngtApp()); 
}

MaterialApp ngtApp() {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
      ), 
      body: const Center(
        child: Text(
          'Nextgen Tutorial',
          style: TextStyle(fontSize: 24),
        ), 
      ), 
    ), 
    debugShowCheckedModeBanner: false,
  );
}

Output:

Penjelasan:

Pertama-tama, kita mengimpor file material.dart karena widget AppBar membutuhkannya. Kita juga akan melakukan hal yang sama pada dua contoh berikutnya. Fungsi utama kita yaitu menjalankan runApp.

Di atasnya, terdapat widget MaterialApp yang diikuti oleh Scaffold. Widget MaterialApp menyediakan style untuk AppBar, sedangkan widget Scaffold secara default menempatkan widget AppBar di bagian atas layar. Ini adalah tampilan dasar dari AppBar yang disediakan oleh flutter.

AppBar menggunakan properti title dari class AppBar, yang akan menampilkan widget utama di dalam AppBar. Dalam contoh ini, digunakan widget Teks.

Di dalam bagian body, terdapat sebuah widget center yang memiliki child sebuah widget teks. Widget teks tersebut menampilkan teks “Nextgen Tutorial” dengan ukuran font 24.

Terakhir, banner debug telah dinonaktifkan. Jadi banner debug merah yang ada di sebelah kanan atas tidak akan tampil.

Contoh:

import "package:flutter/material.dart";

void main() {
  runApp(const MyApp()); 
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Nextgen Tutorial"),
          titleSpacing: 00.0,
          centerTitle: true,
          toolbarHeight: 60.2,
          toolbarOpacity: 0.8,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(25),
                bottomLeft: Radius.circular(25)),
          ),
          elevation: 0.00,
          backgroundColor: Colors.blueAccent[400],
        ), 
        body: const Center(
          child: Text(
            'Nextgen Tutorial',
            style: TextStyle(fontSize: 24),
          ),
        ), 
      ), 
      debugShowCheckedModeBanner: false, 
    );
  }
}

Output:

Penjelasan:

Pertama, kita mengimpor file material.dart karena widget AppBar membutuhkannya. Fungsi utama adalah runApp yang akan memulai aplikasi kita. Di atasnya, kita menggunakan widget MaterialApp dan di dalamnya kita menggunakan widget Scaffold. Widget MaterialApp memberikan style untuk AppBar, sedangkan widget Scaffold secara default menempatkan widget AppBar di bagian atas layar. Ini adalah tampilan dasar dari AppBar yang disediakan oleh Flutter. AppBar hanya menggunakan properti title dari class AppBar, yang mengambil widget utama yang akan ditampilkan di AppBar. Dalam contoh ini, itu adalah widget Teks.

Di dalam body, kita memiliki widget Teks di dalam widget Center yang menampilkan teks “Nextgen Tutorial” dengan ukuran font 24. Kita menonaktifkan banner debug dengan mendefinisikan debugShowCheckedModeBanner menjadi false.

Contoh:

import "package:flutter/material.dart";
import 'package:flutter/services.dart';

void main() {
  runApp(ngtApp()); 
}

MaterialApp ngtApp() {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("Nextgen Tutorial"),
        actions: [
          IconButton(
            icon: const Icon(Icons.comment),
            tooltip: 'Comment Icon',
            onPressed: () {},
          ), 
          IconButton(
            icon: const Icon(Icons.settings),
            tooltip: 'Setting Icon',
            onPressed: () {},
          ), 
        ], 
        backgroundColor: Colors.blueAccent[400],
        elevation: 50.0,
        leading: IconButton(
          icon: const Icon(Icons.menu),
          tooltip: 'Menu Icon',
          onPressed: () {},
        ),
        systemOverlayStyle: SystemUiOverlayStyle.light,
      ), 
      body: const Center(
        child: Text(
          "Nextgen Tutorial",
          style: TextStyle(fontSize: 24),
        ), 
      ), 
    ), 
    debugShowCheckedModeBanner: false, 
  );
}

Output:

Penjelasan:

Di sini, kita bisa melihat bahwa AppBar memiliki tiga ikon tambahan selain title: satu di sebelah kiri dan dua di sebelah kanan title. Widget AppBar ini dimulai dengan properti title yang menggunakan widget Teks sebagai parameter. Kemudian, dilanjutkan dengan properti actions yang mengambil daftar widget sebagai parameter untuk ditampilkan setelah title. Dalam kasus ini, terdapat dua ikon yang dapat dilihat, yaitu ikon komentar dan pengaturan. Kedua ikon ini adalah widget IconButton yang memiliki tiga properti, yaitu icon, tooltip, dan fungsi onPressed. Fungsi onPressed tidak didefinisikan pada IconButton sehingga belum ada efeknya. Properti icon menggunakan string sebagai parameter yang merupakan nama icon. Properti tooltip juga menggunakan string sebagai parameter yang ditampilkan dalam label mengambang saat kursor mouse diarahkan atau saat mouse ditekan lama. Pada IconButton pertama, kita menggunakan Icons.comment dan string ‘Comment Icon’ sebagai parameter properti tooltip. Sedangkan pada IconButton kedua, kita menggunakan Icons.setting dan string ‘Setting Icon’ sebagai parameter properti tooltip. Selanjutnya, backgroundColor dan elevation diatur menjadi Colors.blueAccent[400] dan 50.0. Setelah itu, properti leading ditetapkan dengan widget IconButton sebagai parameter untuk ditampilkan sebelum title di AppBar.

Dalam kasus ini, leading juga merupakan IconButton yang menampilkan ikon menu. Properti onPressed tidak didefinisikan dan properti tooltip diberikan parameter string ‘Menu Icon’. Dan body-nya mirip dengan contoh pertama dan kedua.

Tutorial sebelumnya : Flutter Drawer
Tutorial setelahnya : Flutter RichText
Semua Tutorial Flutter : Tutorial Flutter

Constructor dari AppBar

Properti dari AppBar

Tinggalkan Balasan