Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Multicolored Tab Bar in Flutter. One color for each tab

My doubt is similar to this unanswered question. I need a multicolor tabbar. Also, each tab should be empty, being represented just by the backgroundcolor.

Trying to achieve:

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

For now, I have this:

enter image description here

Code:

class LinhaPage extends StatefulWidget {
const LinhaPage({Key? key}) : super(key: key);

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

class _LinhaPageState extends State<LinhaPage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        initialIndex: 1,
        length: 9,
        child: Scaffold(
          appBar: AppBar(
            title: Text(
              'Linha 1',
              style: TextStyle(color: Colors.white, fontSize: 36.0),
            ),
            toolbarHeight: 80.0,
            bottom: const TabBar(
              tabs: <Widget>[
                Tab(
                  child: BtnAppBar(corBotao: 0xFFAECA0A),
                ),
                Tab(
                  child: BtnAppBar(corBotao: 0xFFE4003A),
                ),
                Tab(
                  child: BtnAppBar(corBotao: 0xFF09BBEF),
                ),
                Tab(
                  child: BtnAppBar(corBotao: 0xFF154194),
                ),
                Tab(
                  child: BtnAppBar(corBotao: 0xFF50842C),
                ),
                Tab(
                  child: BtnAppBar(corBotao: 0xFFC7077F),
                ),
                Tab(
                  child: BtnAppBar(corBotao: 0xFFF49200),
                ),
                Tab(
                  child: BtnAppBar(corBotao: 0xFFF2E500),
                ),
                Tab(
                  child: BtnAppBar(corBotao: 0xFF000000),
                ),
              ],
            ),
          ),

and:

class BtnAppBar extends StatelessWidget {
  final corBotao;
  const BtnAppBar({Key? key, required this.corBotao}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: Container(
      color: Color(corBotao),
      child: Text("1"),
    ));
  }
}

TKS!

>Solution :

You can provide size on tabBar container using MediaQuery or LayoutBuilder. And use zero padding on labelPadding

bottom: const TabBar(
  padding: EdgeInsets.only(left: 24),
  labelPadding: EdgeInsets.zero,
  isScrollable: true,
  tabs: <Widget>[
@override
Widget build(BuildContext context) {
  return Container(
    color: Color(corBotao),
    width: MediaQuery.of(context).size.width / 9,
    alignment: Alignment.center,
    child: Text("1"),
  );
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading