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