Flutter tabBar with triangle indicator - flutter

Question

I want to create a tabBar with triangular indicator, just like the following
Here is the code.
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
indicator: <What should I put in here?>,
tabs: <Widget>[
Tab(text: "Tab1"),
Tab(text: "Tab2"),
Tab(text: "Tab3")
],
),
),
body: TabBarView(
children: <Widget>[
Text("Content1"),
Text("Content2"),
Text("Content3")
],
),
),
);
}
I have tried BoxDecoration with image. But the image won't show until you click on the tab. For FlutterLogoDecoration, it seems no way to change the icon.
Thank you very much.

Answer 1

You can copy paste run full code below
You need custom indicator
code snippet
TabBar(
indicator: TriangleTabIndicator(color: kMainColor),
...
class TriangleTabIndicator extends Decoration {
...
class DrawTriangle extends BoxPainter {
Working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
const kMainColor = Color(0xFF573851);
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Custom Tab Indicator Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.white,
bottom: TabBar(
indicator: TriangleTabIndicator(color: kMainColor),
tabs: <Widget>[
Tab(
child: Text('fruits', style: TextStyle(color: kMainColor)),
),
Tab(
child: Text('vegetables', style: TextStyle(color: kMainColor)),
),
Tab(
child: Text('berries', style: TextStyle(color: kMainColor)),
),
],
),
),
body: TabBarView(
children: <Widget>[
Center(child: Text('Tab 1')),
Center(child: Text('Tab 2')),
Center(child: Text('Tab 3')),
],
),
),
);
}
}
class TriangleTabIndicator extends Decoration {
final BoxPainter _painter;
TriangleTabIndicator({#required Color color, #required double radius})
: _painter = DrawTriangle(color);
#override
BoxPainter createBoxPainter([onChanged]) => _painter;
}
class DrawTriangle extends BoxPainter {
Paint _paint;
DrawTriangle(Color color) {
_paint = Paint()
..color = color
..style = PaintingStyle.fill;
}
#override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
final Offset triangleOffset =
offset + Offset(cfg.size.width / 2, cfg.size.height - 10);
var path = Path();
path.moveTo(triangleOffset.dx, triangleOffset.dy);
path.lineTo(triangleOffset.dx + 10, triangleOffset.dy + 10);
path.lineTo(triangleOffset.dx - 10, triangleOffset.dy + 10);
path.close();
canvas.drawPath(path, _paint);
}
}