Halo teman-teman,

Pada kesempatan kali ini kita akan membuat sebuah Toolbar Dinamis menggunakan SliverAppBar

Sebelum memulai koding, karena tampilan contoh menggunakan background gambar maka kita harus simpan dahulu gambar yang akan menjadi background ke dalam folder images/

source images

https://static3.cbrimages.com/wordpress/wp-content/uploads/2019/11/Konoha-11-Naruto.jpg

https://thecinemaholic.com/wp-content/uploads/2019/07/onepiece-1.jpg

Berikut contoh kode sederhana penggunaan SliverAppBar dengan FlexibleSpaceBar sebagai child

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BelajarAppBar(),
    );
  }
}

class BelajarAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("Belajar SliverAppBar",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                    )),
                background: Image(
                  image: AssetImage('images/konoha.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ];
        },
        body: Center(
          child: Text("Keluarga Besa KONOHAGAKURE"),
        ),
      ),
    );
  }
}

Dapat kita lihat bahwa dalam SliverAppBar Widget menggunakan properti pinned: true dengan expandedHeight: 200.0 yang artinya secara default appbar akan memiliki tinggi 200px. Saat di scroll maka Appbar akan mengecil ke ukuran standar dan sticky di atas. Contoh hasilnya Seperti ini 

Sekarang kita coba tambahkan Tab widget untuk menampilkan tab song dan gallery. Code nya seperti ini

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BelajarAppBar(),
    );
  }
}

class BelajarAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 200.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text("Belajar SliverAppBar",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      )),
                  background: Image(
                    image: AssetImage('images/konoha.jpg'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SliverPadding(
                padding: new EdgeInsets.all(10.0),
                sliver: new SliverList(
                  delegate: new SliverChildListDelegate([
                    TabBar(
                      labelColor: Colors.black87,
                      unselectedLabelColor: Colors.grey,
                      tabs: [
                        new Tab(
                            icon: new Icon(Icons.audiotrack), text: "Songs"),
                        new Tab(
                            icon: new Icon(Icons.collections), text: "Gallery"),
                      ],
                    ),
                  ]),
                ),
              ),
            ];
          },
          body: Center(
            child: Text("Keluarga konohagakure"),
          ),
        ),
      ),
    );
  }
}

Penempatan TabBar pada headerSliverBuilder memastikan bahwa Tab berada pada header. Namun terdapat sedikit masalah dimana walaupun telah di tempatkan pada header, tabBar ikut menghilang saat di scroll.

selamat mencoba…….