Circle Tab Indicator In Flutter

Circle Tab Indicator In Flutter : This post is circle tab indicator in flutter. You can change indicator using customize widget.

Change color CircleTabIndicator

indicator: CircleTabIndicator(color: Colors.black, radius: 2),

Circle Tab Indicator in flutter

class CircleTabIndicator extends Decoration {
  final BoxPainter _painter;

  CircleTabIndicator({@required Color color, @required double radius})
      : _painter = _CirclePainter(color, radius);

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _CirclePainter extends BoxPainter {
  final Paint _paint;
  final double radius;

  _CirclePainter(Color color, this.radius)
      : _paint = Paint()
          ..color = color
          ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset circleOffset =
        offset + Offset(cfg.size.width / 2, cfg.size.height - radius);
    canvas.drawCircle(circleOffset, radius, _paint);

Screenshot :

home.dart

import 'package:achievement_view/utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

  final String title;

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

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    new Tab(
      text: 'Java',
    ),
    new Tab(
      text: 'PHP',
    ),
    new Tab(
      text: 'Android',
    ),
    new Tab(
      text: 'Flutter',
    ),
  ];

  TabController _tabController;

  String value = "";

  TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
      initialIndex: 1,
      length: 4,
      vsync: this,
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    var tabPageIndex = _tabController.index;
    print(tabPageIndex);

    return Scaffold(
      body: ListView(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                children: <Widget>[
                  DefaultTabController(
                    length: 4,
                    child: TabBar(
                      controller: _tabController,
                      labelStyle: tabTextStyle,
                      indicatorSize: TabBarIndicatorSize.tab,
                      indicator:
                          CircleTabIndicator(color: Colors.black, radius: 2),
                      isScrollable: true,
                      labelColor: Colors.black,
                      tabs: myTabs,
                    ),
                  ),
                  Spacer(),
                  IconButton(
                    icon: new Icon(
                      Icons.tune,
                      size: 20.0,
                    ),
                    onPressed: () {},
                  ),
                ],
              ),
              SizedBox(
                height: 5,
              ),
              Container(
                height: MediaQuery.of(context).size.height,
                child: Center(
                  child: TabBarView(
                    controller: _tabController,
                    children: <Widget>[
                      Container(),
                      Container(),
                      Container(),
                      Container(),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

utils.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

double smallSeparateSize = 15.0;
const AllAlign = const EdgeInsets.fromLTRB(16, 16, 16, 16);
const HomePageAlign = const EdgeInsets.only(left: 16.0);
var pageIndex = 1;

const tabTextStyle = const TextStyle(
  fontSize: 13.5,
  fontWeight: FontWeight.w300,
  color: Color(0xff000000),
  //fontFamily: '',
);

class CircleTabIndicator extends Decoration {
  final BoxPainter _painter;

  CircleTabIndicator({@required Color color, @required double radius})
      : _painter = _CirclePainter(color, radius);

  @override
  BoxPainter createBoxPainter([onChanged]) => _painter;
}

class _CirclePainter extends BoxPainter {
  final Paint _paint;
  final double radius;

  _CirclePainter(Color color, this.radius)
      : _paint = Paint()
          ..color = color
          ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset circleOffset =
        offset + Offset(cfg.size.width / 2, cfg.size.height - radius);
    canvas.drawCircle(circleOffset, radius, _paint);
  }
}

main.dart

import 'package:flutter/material.dart';
import 'home.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: SafeArea(
            child: Scaffold(
                appBar: AppBar(title: Text('circle tab indicator')),
                body: HomePage())));
  }
}

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