How To Set Up Tabbar With Example In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 21-09-2020

DefaultTabController widget is used in Flutter android & iOS mobile applications to create beautiful material style TABS view. The DefaultTabController by default comes to Create Swipeable Top Tab Navigation View in flutter android iOS applications.

Add TabBar in Flutter App

Contents in this project Flutter Create Swipeable Top Tab Navigation View using TabController Android iOS Example

Main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.home), text: 'Tab 1',),
                new Tab(icon: new Icon(Icons.person), text: 'Tab 2',),
                new Tab(icon: new Icon(Icons.book), text: 'Tab 3',),
              ],
            ),
            centerTitle: true,
            title: Text('TabBar'),
            backgroundColor: Colors.black,
          ),
          body: TabBarView(
            children: [
              FirstScreen(),
              SecondScreen(),
              ThirdScreen()
            ],
          ),
        ),
      ),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Center(
                child:
                Text('First Screen Tab',
                  style: TextStyle(fontSize: 20),)
            )
        )
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Center(
                child:
                Text('Second Screen Tab',
                  style: TextStyle(fontSize: 20),)
            )
        )
    );
  }
}

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Center(
                child:
                Text('Third Screen Tab',
                  style: TextStyle(fontSize: 20),)
            )
        )
    );
  }
}

Related Post