Цвет подчеркивания флаттера Tabbarview

Question

Как добавить подчеркивание на невыбранные вкладки, например:

https://ibb.co/mfkzKp

Здесь видно, что это серый цвет для невыбранных вкладок и синий для выбранных.

Answer 1

Я знаю, что отвечаю поздно, но это в конечном итоге поможет многим людям. То, что вам нужно сделать, это следовать тому же, что упомянуто в украшении @ tomwyr

Вам не нужно создавать собственный виджет для этого, просто сделайте это, и все готово.

class CustomTabBarMenu extends StatefulWidget {
  @override
  _CustomTabBarMenuState createState() => _CustomTabBarMenuState();
}

class _CustomTabBarMenuState extends State<CustomTabBarMenu> 
with SingleTickerProviderStateMixin{

   TabController _controller;

   @override
   void initState() {
     // TODO: implement initState
     super.initState();
     _controller = new TabController(length: YOUR_LENGTH, vsync: this);
   }

   @override
   Widget build(BuildContext context) {
     return Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: [
     Container(
      //This is responsible for the background of the tabbar, does the magic
      decoration: BoxDecoration(
        //This is for background color
        color: Colors.white.withOpacity(0.0),
        //This is for bottom border that is needed
        border: Border(bottom: BorderSide(color: Colors.grey, width: 0.8))),
        child: TabBar(
        controller: _controller,
        tabs: [
          ...
        ]
      )
    ),
    Container(
      height: MediaQuery.of(context).size.height/2.3,
      child: new TabBarView(
        controller: _controller,
        children: <Widget>[
          ...
        ],
      )
    )
  ]
);
}
}

РЕЗУЛЬТАТ

Answer 2

Это сообщение ранее было удалено, потому что я поместил его в двух местах. Я удалил другой пост, потому что это лучшее место для него. Подобный вопрос можно найти здесь: Как создать невыбранный индикатор для панели вкладок в Flutter

Я полагаю, что лучший ответ - обернуть панель вкладок в виджете «Материал» и задать для нее угол возвышения (я выбрал отметку 1). После этого вы можете настроить цвет тени в виджете материала.

Material(
   type: MaterialType.canvas,
   shadowColor: Colors.orange, //Custom unselected underline color
   elevation: 1.0, //Create underline for entire tab bar
        child: Container(
              color: Color(0xFFe3f2fd), //Gives tab bar a background color
                 child: TabBar(tabs: 
                          [Tab(text: 'ACTIVITY'), 
                           Tab(text: 'LEADERBOARD',),
                           Tab(text: 'SETTINGS',)],
                        labelColor: Theme.of(context).primaryColor,
                        indicatorColor: Theme.of(context).primaryColor,
                        labelStyle: TextStyle(
                                   fontWeight: FontWeight.bold, 
                                   fontFamily: 'Montserrat'),
                        indicatorPadding: 
                                   EdgeInsets.symmetric(horizontal: 20.0),
                      ),
                    ),
                  ),

Answer 3

Я не нашел никаких ссылок в документации о том, как настроить отключенный индикатор. Однако вы можете создать свой собственный виджет, который будет принимать дополнительный украшение параметр:

class DecoratedTabBar extends StatelessWidget implements PreferredSizeWidget {
  DecoratedTabBar({@required this.tabBar, @required this.decoration});

  final TabBar tabBar;
  final BoxDecoration decoration;

  @override
  Size get preferredSize => tabBar.preferredSize;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(child: Container(decoration: decoration)),
        tabBar,
      ],
    );
  }
}

Тогда вы можете украсить свой TabBar так, как вы хотите:

appBar: AppBar(
  bottom: DecoratedTabBar(
    tabBar: TabBar(
      tabs: [
        // ...
      ],
    ),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          color: Colors.blue,
          width: 2.0,
        ),
      ),
    ),
  ),
),

Что приведет к желаемому поведению: