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.

Mengganti warna hint textfield pada flutter

Hi, Kali ini saya akan membagikan cara menganti warna hint pada textfield selain itu kalian juga bisa menganti warna yang lainnya karena kita disini akan menggunakan ThemeData. ThemeData disini merupakan bawaan default dari MaterialApp sehingga kita bisa menganti apa pun mengunakan ini. Dengan menggunakan ThemeData kita bisa mengganti keseluran dari tampilan applikasi sehingga mempermudah kita dalam maintenace kedepannya karena kita hanya menganti dalam themedata nya saja.

Kalian bisa lihat seperti berikut contoh dari penerapan themedata. Dimana kita disini menggunakan inputDecorationTheme dimana jika menggunakan widget ini kita bisa dengan mudah mengganti decoration dari parent widgetnya sehingga semua textfield yang mana jika menggunakan hint akan langsung berwarna grey menggikuti dari warna yang kita terapkan pada themedata. Jika kalian ingin mengganti salah satu widget tidak mengikuti dari themedata kalian bisa mengunakan hintStyle yang ada dalam widget nya sendiri untuk menganti style dari textfield tersebut.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primaryColor: Colors.white,
          inputDecorationTheme: const InputDecorationTheme(
            labelStyle: TextStyle(color: Colors.black),
            hintStyle: TextStyle(color: Colors.grey),
          )),
      home: MainScreen(),
    );
  }

Oke sekian dulu semoga tutorial ini bisa membantu kalian semua. Salam Panen Kode.

Flutter - Error Several variant outputs are configured to use the same file name

Hi programer hari ini saya membagikan infromasi penting saat menjalankan flutter pertama kali ke android emulator ini adalah pengalaman saya belajar flutter.

FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:packageDebug'. > Several variant outputs are configured to use the same file name "resources-debug.ap_", filters : MAIN:MAIN

Saya mendapat kesalahan yang sama saat mencoba mengintegrasikan FCM ke dalam aplikasi saya .. Masalahnya ada di file build yang lebih lama .. yaitu saat kita mengedit file Manifest, kita perlu membangun kembali proyek jadi ..

flutter clean flutter run

Baik sekian dulu tutorial untuk mengatasi masalah seperti diatas. Salam Programer