How To Set Up Gradient Background With Tabbar In 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 add gradient tabbar in flutter app

Rounded Corner with Gradient tab style​
We are going to remove the style which I was added to each tab in the previous method. After removing, added a gradient to BoxDecoration. You can use the LinearGradient widget with two colours get the gradient effect. You can change the gradient-based on your preferences.

You can add this Tabbar Gradient Colour code :
TabBar(
      unselectedLabelColor: Colors.pinkAccent,
      indicatorSize: TabBarIndicatorSize.tab,
      indicator: BoxDecoration(
          gradient: LinearGradient(
              colors: [Colors.purple, Colors.orangeAccent]),
          borderRadius: BorderRadius.circular(40),
          color: Colors.pinkAccent),
      tabs: [
        Tab(
          child: Align(
            alignment: Alignment.center,
            child: Text("CAMERA"),
          ),
        ),
        Tab(
          child: Align(
            alignment: Alignment.center,
            child: Text("BIKE"),
          ),
        ),
        Tab(
          child: Align(
            alignment: Alignment.center,
            child: Text("TRAM"),
          ),
        ),
      ]),
),
body: TabBarView(children: [
  Icon(Icons.camera, size: 50,),
  Icon(Icons.directions_bike, size: 50,),
  Icon(Icons.tram, size: 50,),
]),

Complete Cod Tabbar Gradient Colour  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('Gradiant TabBar'),
            backgroundColor: Colors.black,
            elevation: 0,
            bottom: TabBar(
                unselectedLabelColor: Colors.pinkAccent,
                indicatorSize: TabBarIndicatorSize.tab,
                indicator: BoxDecoration(
                    gradient: LinearGradient(
                        colors: [Colors.purple, Colors.orangeAccent]),
                    borderRadius: BorderRadius.circular(40),
                    color: Colors.pinkAccent),
                tabs: [
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("CAMERA"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("BIKE"),
                    ),
                  ),
                  Tab(
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("TRAM"),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(children: [
            Icon(Icons.camera, size: 50,),
            Icon(Icons.directions_bike, size: 50,),
            Icon(Icons.tram, size: 50,),
          ]),
        )
    );
  }
}

Related Post