Tengo la siguiente TabBar (he usado flexibleSpace para eliminar el relleno que una AppBar vacía pondría sobre TabBar y SafeArea de modo que TabBar no aparezca debajo de la barra de estado de Android):

home: DefaultTabController(
                length: 3,
                child: Scaffold(
                    appBar: AppBar(
                        flexibleSpace: SafeArea(
                          child: Column(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                  TabBar(
                                      indicatorColor: Color(0xfffffffe),
                                      tabs: [
                                          Tab(
                                              text: "Diary",
                                              icon: Icon(Icons.book),
                                          ),
                                          Tab(
                                              text: "Charts",
                                              icon: Icon(Icons.insert_chart),
                                          ),
                                          Tab(
                                              text: "Settings",
                                              icon: Icon(Icons.settings),
                                          )
                                      ],
                                  ),
                              ],
                          ),
                        ),
                    ),
                    body: TabBarView(
                        children: [
                            Diary(),
                            Charts(),
                            Settings(),
                        ],
                    )
                )
            ),

Se ve así cuando se procesa: ingrese la descripción de la imagen aquí

¿Cómo puedo evitar el desbordamiento del fondo sin dejar de mantener el área segura y flexibleSpace?

-1
dhjtricks 17 abr. 2020 a las 00:31

2 respuestas

La mejor respuesta

Si envuelve su TabBar en un widget Expanded, debería resolver su problema

AppBar(
            flexibleSpace: SafeArea(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Expanded(
                    child: TabBar(
                      indicatorColor: Color(0xfffffffe),
                      tabs: [
                        Tab(
                          text: "Diary",
                          icon: Icon(Icons.book),
                        ),
                        Tab(
                          text: "Charts",
                          icon: Icon(Icons.insert_chart),
                        ),
                        Tab(
                          text: "Settings",
                          icon: Icon(Icons.settings),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

Déjame saber cómo funciona esto para ti.

1
wcyankees424 17 abr. 2020 a las 06:32

Eliminar SafeArea y la Columna debería solucionar el problema:

      appBar: AppBar(
        flexibleSpace: TabBar(
          indicatorColor: Color(0xfffffffe),
          tabs: [
            Tab(text: "Diary",
                icon: Icon(Icons.book),),
            Tab(text: "Charts",
                icon: Icon(Icons.insert_chart),),
            Tab(text: "Settings",
                icon: Icon(Icons.settings),)
          ],
        ),
      ),
1
aldobaie 16 abr. 2020 a las 22:57