Swipeable Top Tab Navigation View In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 10-10-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. In tab navigation multiple activities screen is connected to single view but works individually on their own. Each screen is connected to a Top level navigation button which automatically navigate to screens on onPress event.

Swipeable Top Tab Navigation View In Flutter Android App

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

Complete Code For Swipeable Top Tab Navigation View In Flutter 
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(
            backgroundColor: Color(0xFF0D47A1),
            bottom: TabBar(
              tabs: [
                Tab(text: 'FIRST Tab'),
                Tab(text: 'SECOND Tab',),
                Tab(text: 'THIRD Tab'),
              ],
            ),
            title: Text('TABS TITLE TEXT'),
          ),
          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 Activity Screen',
                  style: TextStyle(fontSize: 21),)
            )
        )
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Center(
                child:
                Text('Second Activity Screen',
                  style: TextStyle(fontSize: 21),)
            )
        )
    );
  }
}
class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Center(
                child:
                Text('Third Activity Screen',
                  style: TextStyle(fontSize: 21),)
            )
        )
    );
  }
}

Related Post