Mengenal AppBar pada Flutter

Mengenal AppBar pada Flutter

Mengenal AppBar pada Flutter akan membahas tentang AppBar. Seperti yang kita ketahui semua komponen pada Flutter adalah widget , AppBar juga widget. Pada artikel ini kita akan menambahkan tombol, aksi , ikon dan lain-lain.

Seperti ini cara kita untuk menambahkan AppBar pada aplikasi Flutter kita

appBar: AppBar(
       title: Text("Judul Appbar"),
     ),

jika kita menambahkannya akan seperti ini hasil nya

Mengenal AppBar bada Flutter

Kemudian jika ingin meletakan judul di tengah , kita cukup menambahkan centerTitle: true,
 pada AppBar kita.

appBar: AppBar(
        title: Text("Judul Appbar"),
),

Leading

Sekarang, kita akan mencoba menambahkan icon di sisi sebelah kiri AppBar, kita akan menggunakan leading

return Scaffold(
      appBar: AppBar(
      title: Text("Judul Appbar"),
        leading: Icon(Icons.menu),
    ),
      body: Center(
        child: Text("Hallo"),
      ),
    );

hasilnya akan seperti ini



AppBar leading

tentu kita bisa menambahkan GestureDetector atau InkWell untuk menyesuaikannya dengan kebutuhan anda, misalnya membuka dialog atau apapun itu. Kemudian sekarang kita akan membahas tentang AppBar Action atau aksi pada AppBar. Untuk menambahkannya kita cukup menambahkan script dibawah ini

actions: <Widget>[
          GestureDetector(
            onTap: () {},
            child: Icon(Icons.more_vert),
          )
        ],

Kita bisa menambahkan lebih dari aksi atau Action. Hasilnya akan seperti ini

AppBar Action

 

Ubah warna backgroun AppBar

Untuk mengubah warna background dari AppBar, anda dapat mengubahnya via ThemeData

MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );

atau anda juga mengubahnya secara langsung dengan menambahkan backgroundColor di dalam AppBar

AppBar(
        backgroundColor: Colors.deepOrange,
        title: Text("Judul Appbar"),
        leading: Icon(Icons.menu),
        actions: <Widget>[
          GestureDetector(
            onTap: () {},
            child: Icon(Icons.more_vert),
          )
        ],
      ),

hasilnya seperti ini

AppBar Backgroud Color

Anda juga dapat menggunakan gradient

AppBar(
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: <Color>[Colors.lightBlueAccent, Colors.deepOrange],
            ),
          ),
        ),
        title: Text("Judul Appbar"),
        leading: Icon(Icons.menu),
        actions: <Widget>[
          GestureDetector(
            onTap: () {},
            child: Icon(Icons.more_vert),
          )
        ],
      ),

Gradient AppBar

sekian artikel Mengenal AppBar pada Flutte, semoga bermanfaat.

Tutorial Flutter Membuat Halaman Profil

Tutorial Flutter Membuat Halaman Profil

Artikel kali ini akan tentang Tutorial Flutter Membuat Halaman Profil. Kita akan membangun UI serta membuat proses untuk update ke table database melalui API. Artikel ini adalah lanjutan dari Tutorial Flutter Membuat Halaman Dashboard. Pada halaman profile nanti kita akan mampu untuk mengubah data, data yang dapat di ubah adalah gambar profil, nama dan no telpon. Baca selengkapnya

Tutorial Flutter Membuat Halaman Dashboard

Tutorial Flutter Membuat Halaman Dashboard

Setelah membuat form pendaftaran dan form masuk di flutter, sekarang kita akan membasah tentang Tutorial Flutter Membuat Halaman Dashboard. Pada halaman dashboard ini kita akan memiliki 2 menu, yaitu menu dashboard dan menu profil. Artikel ini akan melanjutkan artikel kami sebelumnya Tutorial Flutter Form Login dan Daftar dengan BLoC. Kurang lebih seperti ini tampilan dahsboard yang akan kita buat. Baca selengkapnya

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!