Cómo agregar subrayado a las pestañas no seleccionadas, como esta:

https://ibb.co/mfkzKp

Aquí puede ver que es de color gris para las pestañas no seleccionadas y azul para las seleccionadas.

5
Kevin Janson 8 sep. 2018 a las 18:00

4 respuestas

La mejor respuesta

No he encontrado ninguna referencia en la documentación sobre cómo personalizar el indicador deshabilitado. Sin embargo, puede crear su propio widget que tomará parámetros adicionales de decoración :

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,
      ],
    );
  }
}

Luego puedes decorar tu TabBar como quieras:

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

Lo que dará como resultado el comportamiento deseado:

TabBar custom decoration

13
tomwyr 8 sep. 2018 a las 20:14

Sé que estoy respondiendo tarde, pero esto eventualmente ayudará a mucha gente. Lo que debe hacer es seguir lo mismo que se menciona en la decoración por @tomwyr

No tiene que hacer su propio widget para eso, solo haga esto y listo.

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>[
          ...
        ],
      )
    )
  ]
);
}
}

RESULTADO

Required resultant

6
Alok 27 feb. 2019 a las 16:18

Esta publicación se había eliminado anteriormente porque la puse en dos lugares. Eliminé la otra publicación porque este es el mejor lugar para estar. Una pregunta similar se puede encontrar aquí: Cómo crear sin seleccionar indicador de barra de pestañas en Flutter

Creo que la mejor respuesta es envolver la barra de pestañas en un widget de Material y darle una elevación (elegí una elevación de 1.) Después de eso, puede personalizar el color de la sombra del widget de Material.

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),
                      ),
                    ),
                  ),
0
Eric Duffett 6 mar. 2019 a las 15:30
TabBar(
indicatorColor: Color(0xffF15C22),
unselectedLabelColor: Colors.black,
                labelColor: Color(0xffF15C22),
                tabs: [
                  Tab(text: "Tab 1"),
                  Tab(text: "Tab 2"),
                  Tab(text: "Tab 3"),
                ],
              ),

IndicatorColor es la propiedad que es útil para cambiar el color de la línea en la vista de pestaña

5
Mayur Garg 20 ene. 2020 a las 09:10