Image Load

Hello world,

Contoh kali ini adalah lanjutan dari contoh sebelumnya dimana kita dapat membuat tabbar di dalam body. Selanjutnya kali ini kita akan mencoba membuat tabbar seperti pada halaman profil instagram. Pada halaman profil instagram kita dapat melihat ada sebuah box berisi detail profil dan foto profil dan kemudian di bawahnya ada tabbar dengan 3 tab yang berisi postingan dll. Karena ini adalah lanjutan dari tutorial sebelumnya maka saya sarankan untuk membaca dulu tutorial sebelumnya di sini dan melanjutkan ke tahap di bawah ini.

Tahap selanjutnya.

Kita wrap Tabbar kita dengan SingleChildScrollView dan Column seperti berikut.

SingleChildScrollView(
        child: Column(
          children: [
            DefaultTabController(
              length: 3,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  TabBar(
                    labelColor: Colors.black,
                    tabs: [
                      Tab(text: 'Tab 1'),
                      Tab(text: 'Tab 2'),
                      Tab(text: 'Tab 3'),
                    ],
                  ),
                  Expanded(
                    child: TabBarView(
                      children: [
                        Container(
                          child: Center(
                            child: Text("Tab 1"),
                          ),
                        ),
                        Container(
                          child: Center(
                            child: Text("Tab 2"),
                          ),
                        ),
                        Container(
                          child: Center(
                            child: Text("Tab 3"),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

Setelah tahap ini akan muncul error pada consol karena tidak adanya size dari TabbarView. Selanjutkan kita tambahakan height pada TabbarView dengan mengubah Expanded menjadi Container.

Ubah ini

 Expanded(
     child: TabBarView(

Menjadi

Container(
    height: MediaQuery.of(context).size.height,
    child: TabBarView(


Selanjutnya kita tinggal membuat box detail profil di atas tabbar dengan membuat container seperti berikut (berikut ini hanya contoh sederhana, kalian bisa membuat detail profil yang lebih bagus dengan desain kalian masing-masing).  

import 'package:flutter/material.dart';

class TabbarBody extends StatefulWidget {
  @override
  _TabbarBodyState createState() => _TabbarBodyState();
}

class _TabbarBodyState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tabbar Body"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.all(20.0),
              child: Row(
                children: [
                  Container(
                    width: 100,
                    height: 100,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100.0),
                      image: DecorationImage(
                        image: NetworkImage(
                            'https://www.byriza.com/lib/blog/1586938494.png'),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 20.0,
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("Username"),
                      RaisedButton(
                        onPressed: () {},
                        child: Text("follow"),
                      )
                    ],
                  )
                ],
              ),
            ),
            DefaultTabController(
              length: 3,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  TabBar(
                    labelColor: Colors.black,
                    tabs: [
                      Tab(text: 'Tab 1'),
                      Tab(text: 'Tab 2'),
                      Tab(text: 'Tab 3'),
                    ],
                  ),
                  Container(
                    height: MediaQuery.of(context).size.height,
                    child: TabBarView(
                      children: [
                        Container(
                          child: Center(
                            child: Text("Tab 1"),
                          ),
                        ),
                        Container(
                          child: Center(
                            child: Text("Tab 2"),
                          ),
                        ),
                        Container(
                          child: Center(
                            child: Text("Tab 3"),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Hasilnya menjadi seperti berikut.


Selamat mencoba :)