Cara membuat appbar menjadi transparent pada flutter

Hai guess, Selamat datang di website yang kecil ini semoga yang kalian cari bisa ditemukan dan bisa dipelajari dari website ini. oke kali ini saya akan memberikan tutoral bagaimana cara membuat AppBar pada flutter menjadi Transparent. Bisanya kita hanya melihat pada AppBar itu ada warna nya nah kali ini kita buat supaya mirip iphone x dimana applikasi yang berjalan bisanya pada AppBarnya menjadi Transparent sehingga background dari aplikasinya terlihat karena tembus pandang.

Oke sekarag kita buat semua aplikasi bisa, pastinya kalian sudah bisa mebuat sebuah aplikasi di flutter yah. supaya kalian bisa mengikuti tutorial ini. Dimana kita setelah membuat aplikasi secara default atau yang bisa kita lakukan adalah mebuat appbar seperti code berikut:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(
        title: Text("Panen Kode"),
      ),
      body: Center(child: Text("Cara membuat appbar menjadi transparent pada flutter")),
    );
  }

Nah dari potongan kode diatas merupakan sebuat widget yang sering kita gunakan dalam membuat sebuah aplikasi, mulai dari Scaffold Widget, AppBar Widget dan lain-lainnya. Dari widget diatas kita akan modifikasi dengan menambahkan satu line yang sangat berpengaruh dalam membuat appbar menjadi transparent yaitu mengunkan "extendBodyBehindAppBar" dimana yang kalo kita artikan ke bahasa indonesia "Extend = Menambah", "Body = Badan atau bingkai aplikasi", "Behind = Belakang", Widget AppBar jadi kalau kita satukan menjadi "Menambah bingkai aplikasi yang berada di belakang widget AppBar" sehingga tidak ada lagi warna dibelakangnya AppBar karena disaat kita menjadikan warna backgroundColor pada Appbar menjadi transparent tidak ada warna default dari scaffold(Warna Default Scaffold adalah Hitam).

Setelah kita tambahkan line yang penting tersebut pada widget Scaffold serta menambahkan line lagi pada bagian widget AppBar sehingga kode yang didapat seperti berikut ini:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.red,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text("Panen Kode"),
      ),
      body: Center(child: Text("Cara membuat appbar menjadi transparent pada flutter")),
    );
  }

Ok dari code diatas kita sudah bisa membuat sebuah appbar menjadi transparent dengan menambahkan 3 element yaitu

• Widget Scaffold dengan menambahkan extendBodyBehindAppBar menjadi true
• Widget AppBar menambah elevation mejadi 0 untuk mudarkan shadow
• Widget AppBar menambah backgroundColor mejadi warna yang transparent

Nah sekarang saatnya bagi kalian berkreasi dengan ide-ide kalian. Oke sekian dulu tutorialnya semoga bermanfaat yah.