Skip to main content

TabBarView & TabBar in Flutter using DefaultTabController()

  

Adding TabBarView & TabBar in Flutter using DefaultTabController

Import it
Now in your Dart code, you can use:
import 'package:flutter/gestures.dart';        //for drag gesture
Three Simple Steps:
1. Remember to add DefaultTabController before Scaffold:
class Timeline_PageState extends State<Timeline_Page>{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        initialIndex: 0,     // default is 0
        length: 4,           // Number of Tabs
    );
  }
}
2. TabBar Code:
Container(color:Colors.grey.shade100,    //TAB_BAR Inside a Container
              height: 50,
              child: TabBar(labelColor: Colors.black,
              tabs: [
                Tab(text: 'About',
                  icon: Icon(Icons.account_box_outlined,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0),),
                Tab(text: 'Posts',
                  icon: Icon(Icons.post_add,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0),),
                Tab(text: 'Q/A',
                    icon: Icon(Icons.question_answer,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0)),
                Tab(text: 'Mates',
                    icon: Icon(Icons.people,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 3.0))
              ],),),
Screen:
3. TabBarView Code :
SizedBox(        //TAB_BAR_VIEW Inside a SizedBox
              height: 300,
              child: TabBarView(dragStartBehavior:DragStartBehavior.start,
                    children: [
                      Center(child:Text("About Section")),
                      Center(child:Text("Posts Section")),
                      Center(child:Text("Q/A Section")),
                      Center(child:Text("Mates Section"))],)
            ),
Screen:

Final Code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class Timeline_Page extends StatefulWidget{
  Timeline_PageState createState()=> Timeline_PageState();
}

class Timeline_PageState extends State<Timeline_Page>{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(        //DEFAULT_TAB_CONTROLLER
        initialIndex: 0,     // default is 0
        length: 4,           // Number of Tabs
      child: Scaffold(
        body: SingleChildScrollView(
          child: Column( crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            SizedBox(height: 35),
            Row(children: [
              SizedBox(width: 15,),
              CircleAvatar(
                radius: 35,
                backgroundColor: Colors.grey.shade200,
                child: Icon(Icons.person,color: Colors.black,),),
              SizedBox(width: 15),
              Column(crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                Text("Joe Root ",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),
                SizedBox(height: 4,),
                Text("Los Angeles, California",style: TextStyle(fontSize: 16),),
              ],)
            ],),
            SizedBox(height: 5,),
            Container(color:Colors.grey.shade100,    //TAB_BAR Inside a Container
              height: 50,
              child: TabBar(labelColor: Colors.black,
              tabs: [
                Tab(text: 'About',
                  icon: Icon(Icons.account_box_outlined,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0),),
                Tab(text: 'Posts',
                  icon: Icon(Icons.post_add,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0),),
                Tab(text: 'Q/A',
                    icon: Icon(Icons.question_answer,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0)),
                Tab(text: 'Mates',
                    icon: Icon(Icons.people,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 3.0))
              ],),),
            SizedBox(        //TAB_BAR_VIEW Inside a SizedBox
              height: 300,
              child: TabBarView(dragStartBehavior:DragStartBehavior.start,
                    children: [
                      Center(child:Text("About Section")),
                      Center(child:Text("Posts Section")),
                      Center(child:Text("Q/A Section")),
                      Center(child:Text("Mates Section"))],)
            ),
          ],),
      ),
    ));
  }
}
Final Screen:
Screenshot

For queries or any other help related to flutter or dart feel free to ask in the comments😊

Labels:

Comments

Post a Comment

Popular posts from this blog

Adding Audio/sound in Flutter

  Adding Audio/Sound in Flutter First, Add dependencies: dependencies: audioplayers: ^0.18.3 Now, run an implicit dart pub get . Note: Install the latest version. Import it Now in your Dart code, you can use: import 'package:audioplayers/audioplayers.dart ' ; import 'package:audioplayers/audio_cache .dart ' ; Play  Sound/Audio after you open the app : AudioPlayer advancedPlayer ; Future loadMusic() async {      advancedPlayer = await AudioCache ().loop( "filename.mp3" );     //to play audio in a loop                    // OR      advancedPlayer = await AudioCache ().play( "filename.mp3" );    //to play audio once } @override void initState() {      loadMusic();      super .initState(); } To Stop  Sound/Audio : Future stopp(){          //created stopp() function to stop playing audio a...
1 comment
Read more

Retrieve Data from Firebase in Flutter

Retrieving Data Using DocumentSnapshot Retrieve Data Stored in a map in firebase First, Add dependencies: dependencies: cloud_firestore: ^1.0.7 Now, run an implicit dart pub get . Note: Install the latest version. Import it Now in your Dart code, you can use: import 'package:cloud_firestore/cloud_firestore.dart' ; Now in your Dart code: DocumentSnapshot documentSnapshot = await FirebaseFirestore. instance .collection( 'Collection_Name' ).doc( 'Document_Id' ).get(); Also, to get data length use: int dataLength = documentSnapshot.data(). length ; To get data of a single map: List<String> dataList = documentSnapshot['key'].toString(); For queries or any other help related to flutter or dart feel free to ask in the comments😊
Post a Comment
Read more