Obtenir "La fenêtre horizontale a reçu une hauteur illimitée." avec TabBarView en flottement

Question

J'essaie de créer une page de profil, où les informations des utilisateurs sont en haut. Et puis avoir une vue d'onglet en dessous pour différentes vues.

C'est le code que j'utilise en ce moment, quand je retire le TabBarView il ne le fait pas par une erreur, et si j'encapsule le TabBarView dans un Expanded l'erreur RenderFlex children have non-zero flex but incoming height constraints are unbounded. arrive.

     @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(10.0),
            child: Row(
              children: <Widget>[
                CircleAvatar(
                  minRadius: 45.0,
                  backgroundImage: NetworkImage(
                      'https://www.ienglishstatus.com/wp-content/uploads/2018/04/Anonymous-Whatsapp-profile-picture.jpg'),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 10.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Testing Name',
                        style: TextStyle(
                          fontSize: 22.0,
                          color: Colors.grey.shade800,
                        ),
                      ),
                      Text(
                        '@testing_username',
                        style: TextStyle(
                          fontSize: 13.0,
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          DefaultTabController(
            length: 3,
            child: Column(
              children: <Widget>[
                TabBar(
                  tabs: <Widget>[
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                    Tab(
                      icon: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Image.asset(
                          "assets/images/icons/butterlike.png",
                          color: Colors.grey.shade800,
                        ),
                      ),
                    ),
                  ],
                ),

                TabBarView(
                  children: <Widget>[
                    Container(
                      color: Colors.grey,
                    ),
                    Container(
                      color: Colors.green,
                    ),
                    Container(
                      color: Colors.purple,
                    ),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

J'ai essayé une variante de this mais je n'ai pas pu le faire fonctionner.

Answer 1

La description de l'erreur est claire, le TabBarView n'a pas de hauteur limitée. le widget parent n'a pas non plus de hauteur limitée. Ainsi, le widget étendu ne résoudra pas ce problème.

EDIT: ci-dessous les solutions sont pour la question ci-dessus (avec colonnes). Dans les cas généraux, utilisez un ListView avec shrinkWrap: true. (Ou tout autre widget avec shrinkWrap)

Il y a quelques options:

Première solution:

Enveloppez le widget parent (colonne) avec un widget de hauteur limitée comme SizedBox ou AspectRatio. Utilisez ensuite le widget étendu comme ceci:

child: SizedBox(
          height: 300.0,
          child: Column(
            children: <Widget>[
       .
       .
       .
              Expanded(
                child: TabBarView(
                  children: <Widget>[
                    Container(
                      height: 200.0,
                      color: Colors.grey,
                    ),
                    Container(
                      height: 200.0,
                      color: Colors.green,
                    ),
                    Container(
                      height: 200.0,
                      color: Colors.purple,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),

Deuxième solution:

Utilisez un widget borné comme SizedBox ou AspectRatio sur le TabBarView lui-même:

SizedBox(
            height: 300.0,
            child: TabBarView(
                children: <Widget>[
                  Container(
                    height: 200.0,
                    color: Colors.grey,
                  ),
                  Container(
                    height: 200.0,
                    color: Colors.green,
                  ),
                  Container(
                    height: 200.0,
                    color: Colors.purple,
                  ),
                ],
              ),
            ),

Remarque Vous pouvez également calculer la hauteur dynamiquement si la hauteur n'est pas statique.

Answer 2

Je l'ai résolu en ajoutant TabBar à l'intérieur Container et TabBarView à l'intérieur Expanded:

DefaultTabController(
    length: 3,
    child: Column(
      children: <Widget>[
        Container(child: TabBar(..)),
        Expanded(child: TabBarView(..)),
      ],
    ),
  );