How To Add Indicator On Top Tabbar Using Flutter Android

admin_img Posted By Bajarangi soft , Posted On 06-11-2020

If indicator is specified or provided from TabBarTheme, the indicatorColor, indicatorWeight, and indicatorPadding properties are ignored.The default, underline-style, selected tab indicator can be defined with UnderlineTabIndicator.The indicator's size is based on the tab's bounds. If indicatorSize is TabBarIndicatorSize.tab the tab's bounds are as wide as the space occupied by the tab in the tab bar. If indicatorSize is TabBarIndicatorSize.label, then the tab's bounds are only as wide as the tab widget itself.

How To Add Indicator On Top Tabbar Using Flutter Android

Indicator On Top Tabbar
Complete Code For Indicator On Top Tabbar 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,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Indicator On Top Tabbar"),
          bottom: TabBar(
            indicator: UnderlineTabIndicator(
              insets: EdgeInsets.fromLTRB(30.0, 0.0, 30.0, 40.0),
            ),
            tabs: <Widget>[
              Tab(text: "First Tab",),
              Tab(text: "Second Tab",),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(
              child: Text("First Tab"),
            ),
            Center(
              child: Text("Second Tab"),
            ),
          ],
        ),
      ),
    );
  }
}

Related Post