How To Create Tabbar With Different Design Using Flutter

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

Customizing the style of the tabs indicator in Flutter can be done with simple lines of code without implementing our own widget.

How to create different design tabbar in flutter

 Rounded Corner tab style in Flutter App

Round corner style can be done by adding BoxDecoration with borderRadius 40. In here, we are adding a lightGreen
colour border to each tab headers. When someone selects the tab It will fill with the lightGreen colour. If you are not interested in the border, you can just remove the border and keep it simple.
YOu can add this Tabbar Border Design code
:
bottom: TabBar(
      unselectedLabelColor: Colors.lightGreen,
      indicatorSize: TabBarIndicatorSize.label,
      indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Colors.lightGreen
),
      tabs: [
        Tab(
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                border: Border.all(color: Colors.lightGreen, width: 1)),
            child: Align(
              alignment: Alignment.center,
              child: Text("HOME"),
            ),
          ),
        ),
        Tab(
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                border: Border.all(color: Colors.lightGreen, width: 1)),
            child: Align(
              alignment: Alignment.center,
              child: Text("SCHOOL"),
            ),
          ),
        ),
        Tab(
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                border: Border.all(color: Colors.lightGreen, width: 1)),
            child: Align(
              alignment: Alignment.center,
              child: Text("MEMORY"),
            ),
          ),
        ),
      ]),
),
body: TabBarView(children: [
  Icon(Icons.home,size: 30,),
  Icon(Icons.school, size: 30,),
  Icon(Icons.memory, size: 30,),
]),

Complete Code  Tabbar Border Design in flutter
Main.dart
import 'package:flutter/material.dart';
import 'package:gradient_bottom_navigation_bar/gradient_bottom_navigation_bar.dart';


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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'App Design',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text('Tabbar Design'),
            backgroundColor: Colors.black,
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.lightGreen,
                indicatorSize: TabBarIndicatorSize.label,
                indicator: BoxDecoration(
                    borderRadius: BorderRadius.circular(40),
                    color: Colors.lightGreen),
                tabs: [
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(40),
                          border: Border.all(color: Colors.lightGreen, width: 1)),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text("HOME"),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(40),
                          border: Border.all(color: Colors.lightGreen, width: 1)),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text("SCHOOL"),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(40),
                          border: Border.all(color: Colors.lightGreen, width: 1)),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text("MEMORY"),
                      ),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.home,size: 30,),
            Icon(Icons.school, size: 30,),
            Icon(Icons.memory, size: 30,),
          ]),
        ),
    );

  }
}

Related Post