Membuat Tab Play Store dengan NestleTab Flutter

Sore yang indah 😃

Bagi para pengguna android mungkin tidak asing dengan Playstore, Playstore adalah salah layanan distribusi digital  berbasis android yang di miliki dan di kembangkan oleh google.  pada kali ini kita akan membuat tampilan utama Play Store dengan menggunankan Flutter.

Komponen penyusun dari tampilan utama Playstore adalah tiga komponen yaitu appBar, TabBar dan list dari content. Kita buat dulu stuktur dari DefaultTabController :

DefaultTabController( 
    length: 5,  #count of tab 
    child: Scaffold(
        appBar: AppBar(
           #structure of appBar UI
        ), 
        body: TabBarView(
           #structure of TabBarView
        )
    )
)

Kemudian kita tentukan  appBar Background color defalut

Color PrimaryColor = Color(0xff109618);

Kemudian kita content dari appBar dan memberi top padding 8.0

AppBar(
    backgroundColor: PrimaryColor,
    title: Padding(
    padding: EdgeInsets.only(top: 8.0),
    child: _GooglePlayAppBar(),
)

Dan kemudian kita buat child dari appBar dimana kita buat childnya berwarna putih  dan contentnya berisi tiga item, icon bars, text dan IconButton 

Widget _GooglePlayAppBar(){
  return Container(
    color: Colors.white,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          child: IconButton(icon: Icon(FontAwesomeIcons.bars),)
        ),
        Container(
          child: Text('Google Play', style: TextStyle(color: Colors.grey)),
        ),
        Container(
          child: IconButton(icon: Icon(FontAwesomeIcons.microphone, color:                                          Colors.blueGrey,), onPressed: null),
        )
      ]
    ),
  );
}

Full Code : https://github.com/ioacode/MaybeHelp/blob/master/HomePage.dart

Seteleh kita membuat appBar kita membuat TabBar yang posisinya di bawah appBar

  bottom: TabBar(
            isScrollable: true,
            indicatorColor: Colors.white,
            indicatorWeight: 6.0,
            onTap: (index){
              setState(() {
                switch (index) {
                  #index is count of lenght of Tab
                }
              });
            },
            tabs: <Widget>[
                  #count of tabs same with lenght of Tab
            ]
          ),

Full Code : https://github.com/ioacode/MaybeHelp/blob/master/HomePage.dart

Kemudian kita buat body dari untuk menampilkan value dari TabView

body: TabBarView(
     children: <Widget>[
          HomeTopTabs()
          # content of tabView 
     ]
)

Full Code : https://github.com/sdiik/MaybeHelp/blob/master/HomeTopTabs.dart

Output :

Sedangkan Sourcecode untuk content dari HomeTopTabs() bisa dilihat di link berikut 😋

https://github.com/ioacode/MaybeHelp/blob/master/HomeForYouTabs.dart