Pada tutorial kali ini, KonsepKoding akan berbagi tutorial Flutter Bahasa Indonesia yang ke-19. Kadang ketika kita membuat sebuah aplikasi kita ingin membuat animasi untul AppBar di Aplikasi mobile kita. Nah Flutter sendiri telah memberikan widget primitif untuk membuat animasi AppBar yang bernama SilverAppBar dimana dengan menggunakan SilverAppBar animasi akan ditampilkan ketika user scrolling list dalam aplikasi kita.

Flutter Membuat SilverAppBar
Flutter Membuat SilverAppBar


Kenapa kita harus belajar materi ini?.  Jawabannya simple karena sebagai developer atau kamu yang berniat menjadi developer sangat baik untuk mempelajari Prifimitif Component/Widget/UIView di framework atau bahasa pemrograman yang kamu pelajari. Karena sekarang kita sedang fokus mempelajari Flutter. SilverAppBar sangat baik dipeljari bila kamu ingin fokus atau menjadi Flutter Developer khususnya mobile application Flutter.


Apa Yang Akan Kita Pelajari?

1. Membuat Project Flutter
2. Membuat SilverAppBar Flutter
3. Penjelasan Kode Yang Kita Tulis


Membuat Project Flutter

Sebelum kamu mengikuti tutorial ini pastikan kamu sudah membuat project Flutter terlebih dahulu, jika belum silahkan buka terminal atau cmd kamu dan ketikan perintah di bawah ini :

flutter create silver

Membuat SilverAppBar Flutter

Setelah berhasil membuat project flutter silahkan ubah kode pada file lib/main.dart menjadi seperti kodingan di bawah ini :


JIka sudah kamu ubah silahkan jalankan project Flutter mu, dengan perintah dibawah ini (Terminal/CMD) :

flutter run 

Jika berhasil maka Flutter Widget Silver kita akan menjadi seperti gambar di bawah ini :

Flutter Membuat SilverAppBar
Flutter Membuat SilverAppBar

Flutter Membuat SilverAppBar
Flutter Membuat SilverAppBar


Penjelasan Kode 

return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: true,
          expandedHeight: 150,
          flexibleSpace: FlexibleSpaceBar(
            title: Text("Epic Sliver"),
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 50.0,
          delegate:
              SliverChildBuilderDelegate((BuildContext context, int index) {
            return Container(
                alignment: Alignment.centerLeft,
                color: Colors.white,
                child: Text("List data : $index"));
          }, childCount: 20),
        )
      ],
    );
  }
Kode di atas kita membuat CystomView dan membuat Widget Silver dengan array 0-19. Oh ya kamu bisa mengubah List tersebut dengan kode mu sendiri.



Sekian semoga tutorial flutter Bahasa Indonesia series gratis ini dapat bermanfaat dan membantu kamu yang sedang mempelajari Flutter dan Dart untuk menjadi mobile developer, semoga bermanfaat apabila ada pertanyaan terkait tutorial flutter ini silahkan tuliskan di kolom komentar jangan ragu dan bila bermanfaat silahkan share dan kunjungi terus konsepkoding.com  untuk tutorial pemrograman dan koding menarik lainnya. Happy Coding, While Learning FLutter.
Baca Tutorial Flutter Dart KonsepKoding Lainnya:
#11 Tutorial Flutter Alert Dialog
#12 Tutorial Menampilkan Gambar Pada Flutter
#13 Tutorial Flutter Membuat Top TabBarView
#14 Tutorial Flutter Membuat Bottom TabBarView
#15 Tutorial Flutter Membuat Drawer Navigation
#16 Tutorial Flutter Membuat Menu Dengan Row
#17 Tutorial Flutter Membuat Stepper Schedule
#18 Tutorial Flutter Membuat CircularProgressIndicator