How to add gradient to tab bar underline in flutter?

Question

I'm looking for way to add gradient to tab bar underline. Thank you.

The problem has already been resolved [enter link description here](https://stackoverflow.com/questions/57631838/is-there-a-way-to-make-the-tab-bar-indicator-line-a-gradient-in-flutter?noredirect=1&lq=1) — adel dev, Jun 17 '21 at 08:24

score 2 · Accepted Answer · answered Jun 17 '21 at 07:03

You will have to set the indicator property directly in the TabBar widget that accepts a BoxDecoration and then adjust other settings such as indicatorPadding, indicatorWeight.

Following is an example piece of working code. You can check the live demo in dartpad here.

import 'package:flutter/material.dart';

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

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.black,
            bottom: TabBar(                    
              indicator: BoxDecoration(             
                gradient: LinearGradient(
                  colors: [
                    Colors.green,
                    Colors.blue,
                    Colors.red,
                  ],
                ),
                borderRadius: BorderRadius.all(
                  Radius.circular(5),
                ),
              ),
              indicatorWeight: 5,
              indicatorPadding: EdgeInsets.only(top:40),              
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

How to add gradient to tab bar underline in flutter?

1 Answers1