BottomNavigationBar using TabBarView with UnderLine

BottomNavigationBar using TabBarView with UnderLine :

BottomNavigationBar using TabBarView with UnderLine: To start, we’d write this code in the main.dart of your project. It has a default class MyApp that extends StatelessWidget.

You need the Scaffold to create appbars and BottomNavigationBar. If you want to create a tabbed layout with the tabs just under the appbar, you will use the appBar’s bottom: tag.

 have worked the layout using the BottomNavigationBar class but I would encourage you to try it out using the BottomAppBar class.

For building a layout like the ViewPager of Android, you will need the TabBarView class. This implements swipe views. Go ahead and give it some containers.

This might be enough for some projects, but I’ll also add the bottom tabs. the bottomNavigationBar takes one widget as a child. We’ll give it a TabBar and add some customizations to it. Now because TabBar and the TabBarView will be using the same DefaultTabController , swiping on the screen will also reflect on the tabs.

Add the following code to understand how to design BottomNavigationBar using TabBarView with UnderLine. the final output and the code is given below

Screenshot :

BottomNavigationBar using TabBarView with UnderLine

bottomNavigationBar using TabBarView with UnderLine .dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Tutorial',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: DefaultTabController(length: 3, child: TabsPage()));
  }
}

class TabsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        children: [
          Container(),
          Container(),
          Container(),
        ],
      ),
      bottomNavigationBar: new TabBar(
        tabs: [
          Tab(
            icon: new Icon(Icons.home),
          ),
          Tab(
            icon: new Icon(Icons.shopping_cart),
          ),
          Tab(
            icon: new Icon(Icons.perm_identity),
          ),
        ],
        labelColor: Theme.of(context).primaryColor,
        unselectedLabelColor: Colors.black38,
        indicatorSize: TabBarIndicatorSize.label,
        indicatorPadding: EdgeInsets.all(5.0),
        indicatorColor: Theme.of(context).primaryColor,
      ),
    );
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in