Why doesn't the color change everywhere in the tabbar?

Question

My task is to change the background to orange on click, the text under the icon to orange, and the icon to white. However, I only change the color of the text. Why?

my tabs -

return Tab(
      height: 90,
      child: Column(
        children: [
          Container(
            width: 71,
            height: 71,
            decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle
            ),
            child: IconButton(onPressed: () {}, icon: Icon(iconName, size: 26, color: configColors.homeIcon,)),
          ),
          FittedBox(
            child: Text(header, style: TextStyle(fontFamily: "Mark-Pro", fontWeight: FontWeight.w500, fontSize: 15),),
          )
        ],
      ),);

my tabbar -

TabBar(
                       isScrollable: true,
                       labelColor: configColors.orange,
                       unselectedLabelColor: configColors.darkBlue,
                       indicatorColor: Colors.transparent,
                       tabs:  const [
                         Tabs('Phones', Icons.phone_iphone),
                         Tabs('Computer', Icons.computer),
                         Tabs('Health', Icons.monitor_heart_outlined),
                         Tabs('Books', Icons.menu_book),
                         Tabs('Watch', Icons.watch_later_outlined),
                       ],
                     ),

full code -

 return Scaffold(
      backgroundColor: configColors.bgHome,
      body: Container(
        margin: EdgeInsets.fromLTRB(17, 50, 33, 0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  SizedBox(
                    width: 50,
                  ),
                  Row(
                    children: [
                      IconButton(onPressed: () {}, icon: Icon(Icons.place_outlined, color: configColors.orange, size: 17,)),
                      Text('Zihuatanejo, Gro', style: TextStyle(
                          color: configColors.darkBlue,
                          fontFamily: "Mark-Pro",
                          fontSize: 15,
                          fontWeight: FontWeight.w500
                      ),),
                      IconButton(onPressed: () {}, icon: Icon(Icons.expand_more, color: configColors.grey, size: 20,))
                    ],
                  ),
                  IconButton(onPressed: () {}, icon: Image.asset('assets/image/vector.png'))
                ],
              ),
              Container(
                margin: EdgeInsets.only(top: 18),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('Select Category', style: TextStyle(
                        color: configColors.darkBlue,
                        fontFamily: "Mark-Pro",
                        fontSize: 25,
                        fontWeight: FontWeight.w700
                    ),),
                    TextButton(onPressed: () {}, child: Text('view all', style: TextStyle(
                        color: configColors.orange,
                        fontFamily: "Mark-Pro",
                        fontSize: 15,
                        fontWeight: FontWeight.w400
                    ),))
                  ],
                ),
              ),
              Container(
                child:           DefaultTabController(
                    length: 5, // length of tabs
                    initialIndex: 0,

                    child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
                      Container(
                        child: TabBar(
                          isScrollable: true,
                          labelColor: configColors.orange,
                          unselectedLabelColor: configColors.darkBlue,
                          indicatorColor: Colors.transparent,
                          tabs:  const [
                            Tabs('Phones', Icons.phone_iphone),
                            Tabs('Computer', Icons.computer),
                            Tabs('Health', Icons.monitor_heart_outlined),
                            Tabs('Books', Icons.menu_book),
                            Tabs('Watch', Icons.watch_later_outlined),
                          ],
                        ),
                      ),
                      // Container(
                      //   margin: EdgeInsets.only(top: 35),
                      //   child: Row(
                      //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      //     children: [
                      //       TextField(
                      //         decoration: InputDecoration(
                      //           enabledBorder: OutlineInputBorder(
                      //             borderSide:
                      //             BorderSide(width: 3, color: Colors.greenAccent), //<-- SEE HERE
                      //             borderRadius: BorderRadius.circular(50.0),
                      //           ),
                      //         ),
                      //       ),
                      //     ],
                      //   ),
                      // ),

                      Container(
                          height: 400, //height of TabBarView
                          decoration: BoxDecoration(
                              border: Border(top: BorderSide(color: Colors.grey, width: 0.5))
                          ),
                          child: TabBarView(children: <Widget>[
                            Container(
                              child: Center(
                                child: Text('Display Tab 1', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            ),
                            Container(
                              child: Center(
                                child: Text('Display Tab 2', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            ),
                            Container(
                              child: Center(
                                child: Text('Display Tab 3', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            ),
                            Container(
                              child: Center(
                                child: Text('Display Tab 4', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            ),
                            Container(
                              child: Center(
                                child: Text('Display Tab 5', style: TextStyle(
                                    fontSize: 22, fontWeight: FontWeight.bold)),
                              ),
                            )])
                      )
                    ])
                ),
              ),
            ],
          ),
        )

      ),
    );
  }
}

class Tabs extends StatelessWidget {
  final String header;
  final IconData iconName;
  const Tabs(this.header, this.iconName);
  @override
  Widget build(BuildContext context) {
    return Tab(
      height: 90,
      child: Column(
        children: [
          Container(
            width: 71,
            height: 71,
            decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle
            ),
            child: IconButton(onPressed: () {}, icon: Icon(iconName, size: 26, color: configColors.homeIcon,)),
          ),
          FittedBox(
            child: Text(header, style: TextStyle(fontFamily: "Mark-Pro", fontWeight: FontWeight.w500, fontSize: 15),),
          )
        ],
      ),);
  }

https://stackoverflow.com/questions/51941328/flutter-change-tabitem-background-when-selected — fartem, Aug 23 '22 at 04:25

score 0 · Answer 1 · answered Aug 23 '22 at 04:32

0

You can try below named parameter by assigning color in Tabbar widget.

indicatorColor: Colors.orange,

answered Aug 23 '22 at 04:32

Renik Shiroya

324
4
15

Thanks to this, the bottom line appears, but I do not need it. – Daniil Aug 23 '22 at 04:43
You need to compare index in Tab widget that you customized. Such as index == currentIndex ? Colors.orange : Colors.white. Also, Don't forget to change the state. – Renik Shiroya Aug 23 '22 at 04:52

score 0 · Answer 2 · answered Aug 23 '22 at 05:05

Use TabController to track the selected tap, and play with the color decoration by passing active index.

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

  @override
  State<FAG> createState() => _FAGState();
}

class _FAGState extends State<FAG> with SingleTickerProviderStateMixin {
  late final TabController controller = TabController(length: 5, vsync: this)
    ..addListener(() {
      setState(() {});
    });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pink,
      body: Container(
          margin: EdgeInsets.fromLTRB(17, 50, 33, 0),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: <Widget>[
                        Container(
                          child: TabBar(
                            controller: controller,
                            isScrollable: true,
                            labelColor: Colors.orange,
                            unselectedLabelColor: Colors.blueGrey,
                            indicatorColor: Colors.transparent,
                            tabs: [
                              Tabs(
                                'Phones',
                                Icons.phone_iphone,
                                isActive: controller.index == 0,
                              ),
                              Tabs(
                                'Computer',
                                Icons.computer,
                                isActive: controller.index == 1,
                              ),
                              Tabs(
                                'Health',
                                Icons.monitor_heart_outlined,
                                isActive: controller.index == 2,
                              ),
                              Tabs(
                                'Books',
                                Icons.menu_book,
                                isActive: controller.index == 3,
                              ),
                              Tabs(
                                'Watch',
                                Icons.watch_later_outlined,
                                isActive: controller.index == 4,
                              ),
                            ],
                          ),
                        ),
                        Container(
                            height: 400, //height of TabBarView
                            decoration: BoxDecoration(
                                border: Border(
                                    top: BorderSide(
                                        color: Colors.grey, width: 0.5))),
                            child: TabBarView(
                                controller: controller,
                                children: <Widget>[
                                  Container(
                                    child: Center(
                                      child: Text('Display Tab 1',
                                          style: TextStyle(
                                              fontSize: 22,
                                              fontWeight: FontWeight.bold)),
                                    ),
                                  ),
                                  Container(
                                    child: Center(
                                      child: Text('Display Tab 2',
                                          style: TextStyle(
                                              fontSize: 22,
                                              fontWeight: FontWeight.bold)),
                                    ),
                                  ),
                                  Container(
                                    child: Center(
                                      child: Text('Display Tab 3',
                                          style: TextStyle(
                                              fontSize: 22,
                                              fontWeight: FontWeight.bold)),
                                    ),
                                  ),
                                  Container(
                                    child: Center(
                                      child: Text('Display Tab 4',
                                          style: TextStyle(
                                              fontSize: 22,
                                              fontWeight: FontWeight.bold)),
                                    ),
                                  ),
                                  Container(
                                    child: Center(
                                      child: Text('Display Tab 5',
                                          style: TextStyle(
                                              fontSize: 22,
                                              fontWeight: FontWeight.bold)),
                                    ),
                                  )
                                ]))
                      ]),
                ),
              ],
            ),
          )),
    );
  }
}

class Tabs extends StatelessWidget {
  final String header;
  final IconData iconName;
  final bool isActive;
  const Tabs(this.header, this.iconName, {required this.isActive, super.key});


  @override
  Widget build(BuildContext context) {
    return Tab(
      icon: Container(
        width: 71,
        height: 71,
        decoration: BoxDecoration(
            color: isActive ? Colors.white : Colors.amber,
            shape: BoxShape.circle),
        child: IconButton(
            onPressed:null,//dont need this
            icon: Icon(
              iconName,
              size: 26,
              color: isActive ? Colors.amber : Colors.white,
            )),
      ),
      height: 97,
      text: header,
    );
  }
}

Jungwon · Accepted Answer · 2022-08-23T08:22:57.787

There is a way to determine if it was triggered by using the index value at the time of tapping.


class _HomeState extends State<Home> {
  List<bool> _selected = [true, false, false, false];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.white70,
      appBar: AppBar(),
      body: DefaultTabController(
        length: 4,
        child: TabBar(
          isScrollable: true,
          labelColor: Colors.orange,
          unselectedLabelColor: Colors.blueGrey,
          indicatorColor: Colors.transparent,
          onTap: (index) => _selectedState(index),
          tabs: [
            Tabs('Phones', Icons.phone_iphone, 0),
            Tabs('Computer', Icons.computer, 1),
            Tabs('Books', Icons.menu_book, 2),
            Tabs('Watch', Icons.watch_later_outlined, 3),
          ],
        ),
      ),
    );
  }

  Widget Tabs(String header, IconData iconName, int index) {
    return Tab(
      height: 90,
      child: Column(
        children: [
          Container(
            width: 71,
            height: 71,
            decoration:
                BoxDecoration(color: _selected[index] == true ? Colors.orange : Colors.white, shape: BoxShape.circle),
            child: IconButton(
                onPressed: () {},
                icon: Icon(
                  iconName,
                  size: 26,
                  color: Colors.grey,
                )),
          ),
          FittedBox(
            child: Text(
              header,
              style: TextStyle(
                  fontFamily: "Mark-Pro",
                  fontWeight: FontWeight.w500,
                  fontSize: 15),
            ),
          )
        ],
      ),
    );
  }

  _selectedState(int index) {
    setState(() {
      switch (index) {
        case 0:
          _selected[0] = true;
          _selected[1] = false;
          _selected[2] = false;
          _selected[3] = false;
          break;
        case 1:
          _selected[0] = false;
          _selected[1] = true;
          _selected[2] = false;
          _selected[3] = false;
          break;
        case 2:
          _selected[0] = false;
          _selected[1] = false;
          _selected[2] = true;
          _selected[3] = false;
          break;
        case 3:
          _selected[0] = false;
          _selected[1] = false;
          _selected[2] = false;
          _selected[3] = true;
          break;
        default:
          _selected[0] = true;
          _selected[1] = false;
          _selected[2] = false;
          _selected[3] = false;
      }
    });
  }
}

Sorry, but where is _selected defined? (Undefined name '_selected'. (Documentation) Try correcting the name to one that is defined, or defining the name) — Daniil, Aug 23 '22 at 08:10

Why doesn't the color change everywhere in the tabbar?

3 Answers3