web-dev-qa-db-fra.com

Comment personnaliser la largeur de la barre de tabulation en flutter?

Salut, pouvons-nous personnaliser la largeur de la barre de tabulation en flottant? ma largeur de barre de tabulation est fixée ici, donc lorsque j'ai du texte long dans ma barre de tabulation, il ne s'affichera pas complètement, je veux que ma largeur de barre de tabulation soit flexible sur la base du contenu. lorsque le texte est long, la largeur de la barre de tabulation doit être supérieure à celle du texte court. J'ai essayé de le rechercher sur Internet mais je n'ai trouvé aucune réponse pour résoudre mes problèmes.

enter image description here

dartmaterial-designflutter
8
Theodorus Agum Gumilang
TabBar(isScrollable: true)

Crée une barre d'onglets déroulante. il est utile lorsque le contenu du texte de votre onglet ou le nombre de vos onglets ne correspond pas à la taille d'affichage.

ou peut-être pouvez-vous faire quelque chose comme ceci:

child: new TabBar(
            tabs: [
              new Container(
                width: 30.0,
                child: new Tab(text: 'hello'),
              ),
              new Container(
                  child: new Tab(text: 'world'),
              ),
            ],
          )
14
behzad besharati
  double width = MediaQuery.of(context).size.width;

    double yourWidth = width  / 5;


bottom: TabBar(
            indicatorColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            isScrollable: true,
            controller: _tabcontroller,
            tabs: <Widget>[
              Container(
                width: 30,
                height: 50,
                alignment: Alignment.center,
                child: Icon(
                  Icons.camera_alt,
                ),
              ),
              Container(
                width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("CHATS")),
              Container(
                  width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("STATUS")),
              Container(
                  width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("CALL"))
            ],
          ),`


---------------

`
7
Hardik Bhalala

voici comment j'ai résolu ce problème:

    bottom: TabBar(
      isScrollable: true,
      controller: _tabController,
      indicatorColor: Colors.white,
      labelPadding: EdgeInsets.symmetric(horizontal: 10.0),

      tabs: <Widget>[
        Tab(
          icon: Icon(Icons.camera_alt),
        ),
        Tab(
          text: "CONVERSAS",
        ),
        Tab(
          text: "STATUS",
        ),
        Tab(
          text: "CHAMADAS",
        )
      ],
    )

Utilisez simplement un rembourrage, je pense que cela fonctionnera pour toutes les tailles d'écran! ... et n'oubliez pas:

   isScrollable: true
5
Leonardo Severo

Vous pouvez ajouter labelPadding à votre widget TabBar comme ceci:

child: TabBar(
        indicatorColor: Colors.white,
        labelPadding: EdgeInsets.symmetric(horizontal: 2.0),
        ....
        tabs: <Tab>[
                     ......
        ]
)
......

Ou vous pouvez le faire (je ne le recommande pas)

Dans le fichier material/tabs.Dart, modifiez cette ligne:

padding: widget.labelPadding ?? tabBarTheme.labelPadding ?? kTabLabelPadding,

avec quelque chose de similaire

padding: EdgeInsets.symmetric(horizontal: 2.0),

Par défaut, flutter utilise kTabLabelPadding pour le remplissage.

Problème de flottement ici

0
Paul Kitatta

pour un appareil de différentes tailles:

double orjWidth = MediaQuery.of(context).size.width;
double cameraWidth = orjWidth/24;
double yourWidth = (orjWidth - cameraWidth)/5;

    bottom: TabBar(
      controller: _tabController,
      indicatorColor: Colors.white,
      labelPadding: EdgeInsets.symmetric(horizontal:(orjWidth - ( cameraWidth + yourWidth*3))/8),
      isScrollable: true,
      tabs: [
        Container(
          child: Tab(icon: Icon(Icons.camera_alt)),
          width: cameraWidth,
        ),
        Container(
          child: Tab(
            text: "CHATS",
          ),
          width: yourWidth,
        ),
        Container(
          child: Tab(
            text: "STATUS",
          ),
          width: yourWidth,
        ),
        Container(
          child: Tab(
            text: "CALL",
          ),
          width: yourWidth,
        ),
0
Adem Aygun