0
votes

Comment créer un centre de texte à l'intérieur de la pile

Je veux centrer mon texte à l'intérieur d'un widget Stack. C'est ce que j'ai tenté jusqu'à présent. Pour le moment, c'est à gauche en haut de l'image et ce n'est pas là que je veux que ce soit. J'ai essayé d'utiliser le widget Align et le widget Center mais en vain. Que fais-je mal?

 Expanded(child: Card(
              child: Container(
                child: Center(
                  child:  Stack(
                    children: <Widget>[
                      Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
                        height: 100,
                      ),
                      SafeArea(child: Text("asdad"))
                    ],
                  ),
                ),
              ),
            ))

Toute option pour mettre ce texte au centre

Flexible(
  child: Padding(
    padding: const EdgeInsets.only(left: 8,top: 8,bottom: 8,right: 8),
    child: Stack(
      children: <Widget>[
        Wrap(
          children: <Widget>[ 
            Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
               height: 100,
            ),
          ],
        ),
        Container(
          width: MediaQuery.of(context).size.width/2,
          height: 100,
          child: Center(
            child: Wrap(
              children: <Widget>[
                Center(
                  child: Container(
                    height: 100,
                    width: MediaQuery.of(context).size.width/2,
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        "BOOKS AND BOOKLETS",
                        style: TextStyle(
                          color: Colors.white, 
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
),

Problème identifié si la taille du texte est petite (signifie "abc") cela fonctionne mais si la taille du texte est grand (mesuré "abc abc abc acb acb abc") cela ne fonctionne pas
Comment résoudre ce problème?

flutter flutter-layout

2 commentaires

Pouvons-nous voir tout le code, c'est-à-dire au-dessus du widget Flexible?

En outre, vous pouvez utiliser EdgeInsets.all (8) au lieu de les spécifier tous individuellement.

4 Réponses :

0
votes

Vous pouvez l'essayer:

Container(
        width: 500,
        height: 100,
        child: Stack(
          children: <Widget>[
            Image.network(
              "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
              height: 100,
              width: 500,
            ),
            Align(
              alignment: Alignment.center,
              child: Text(
                "BOOKS AND BOOKLETS",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 11,
                    fontWeight: FontWeight.bold),
              ),
            )
          ],
        ),
      )

1 commentaires

Problème identifié si la taille du texte est petite (signifie "abc") cela fonctionne mais si la taille du texte est grande (mes. "Abc abc abc acb acb abc") cela ne fonctionne pas Comment résoudre ce problème?

0
votes

Je veux y parvenir par une approche différente, et si vous utilisiez un widget Container et le décoriez en utilisant une image d'arrière-plan? Ensuite, vous pouvez éviter d'utiliser un widget Stack .

Voici le code minimal:

return Padding(
  padding: const EdgeInsets.all(8),
  child: Container(
    height: 500,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage(
          "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
        ),
      ),
    ),
    child: Center(
      child: Text(
        "hi",
        style: TextStyle(color: Colors.white, fontSize: 56),
      ),
    ),
  ),
);

2 commentaires

Problème identifié si la taille du texte est petite (signifie "ABC"), il fonctionne, mais si la taille du texte est grande (ABC ABC ABC ABC ABC ABC ABC "), il ne fonctionne pas comment résoudre ce problème?

J'ai refait ma réponse @Midhilaj.

0
votes

Résolu

 Expanded(
          child: Card(
            child: Container(

              child: Center(
                child: Stack(
                  children: <Widget>[
                    Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1OlcL_Laxy1rcct4vok3rkEb3l6NdV1pncE1_K1mzZ9NDYy3J",
                      height: 100,
                    ),
                    Positioned.fill(
                      child:Center(child:Align(
                        child:  Text("BOOKS AND BOOKLETS",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: Colors.white),textAlign: TextAlign.center,),
                        alignment: Alignment.center,
                      )
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),

0 commentaires

0
votes

Utilisez textAlign: TextAlign.center dans votre Text Widget

en utilisant alignement: Alignment.center dans votre Container Widget pourrait aussi aider

Pas besoin d'utiliser autant de widgets, il suffit de mettre le widget Texte dans le widget Container et utilisez la propriété d'alignement des deux widgets

qui devrait résoudre le problème.

     Container(
          width: MediaQuery.of(context).size.width/2,
          height: 100,
          alignment: Alignment.center,
             child: Text(
                     "BOOKS AND BOOKLETS",
                     textAlign: TextAlign.center
                     style: TextStyle(
                       color: Colors.white, 
                       fontSize: 18,
                       fontWeight: FontWeight.bold,
                       ),
                     ),
                   )

0 commentaires