J'essaie de faire quelque chose qui devrait être extrêmement simple mais je ne vois pas comment cela se fait.
J'ai besoin d'aligner le gros texte au centre et aux boutons à droite de sorte que cela ressemble à une image ci-dessous : P>
p>
avec le code ci-dessous, les widgets sont alignés à gauche et à droite: P>
Container(
width: 300,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colour.darkBlue, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(child: Container()),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Centred', style: TextStyle(fontSize: 32)),
Text('24.6 %', style: TextStyle(fontSize: 48)),
],
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 18)),
Text('BtnB', style: TextStyle(fontSize: 18)),
Text('BtnC', style: TextStyle(fontSize: 18)),
],
),
),
),
],
),
),
3 Réponses :
Essayez avec widget Listtile, j'ai apporté des modifications à l'aide de Listtile, veuillez vérifier si cela fonctionne pour vous
Super réponse bro!
Ne fonctionne pas du tout. Pourquoi n'avez-vous pas vérifié le premier? Le gros texte est à gauche et le listtile est à droite.
Même votre image montre que ça ne marche pas ... ?? Comment est le gros texte au centre de l'ellipse là-bas ??
Comment ça ressemble à la première image de ma question ??
Pourquoi ça marche? Ce n'est toujours pas au centre de votre image.
Je parle de centré horizontal, comme dans mon image dans la question.
Cela semble plus central car il est plus large que les boutons de droite. Mais il reste toujours clairement à gauche, ce n'est pas centré. Essayez de faire les boutons sur la droite plus grand et vous verrez qu'ils sont simplement panoramus à gauche et à droite. Il n'y a pas d'alignement réel ici.
Vous devriez simplement supprimer votre réponse, je suppose.
child: Center(
child: Container(
width: 300,
height: 150,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.all(Radius.elliptical(100, 60)),
),
child: Container(
child: Stack(
children: <Widget>[
Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Text('Centred',
style: TextStyle(fontSize: 32)),
),
Flexible(
child: Text('24.6 %',
style: TextStyle(fontSize: 48)),
),
],
),
),
),
Align(
alignment: Alignment.centerRight,
child: Container(
margin: const EdgeInsets.only(right: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('BtnA', style: TextStyle(fontSize: 15)),
Text('BtnB', style: TextStyle(fontSize: 15)),
Text('BtnC', style: TextStyle(fontSize: 15)),
],
),
),
)
],
),
),
),
),
Oui ne peut pas être clair, expliquez ce que vous voulez réellement au centre?
S'il vous plaît supprimer votre réponse. Le grand texte est même appelé «centré»! Je ne vois pas comment vous ne pouvez pas savoir quel texte devait être centré ...
@Hasen avez-vous le vérifier?
Tu étais presque là. Juste "expansé" au milieu doit être supprimé: 
Avez-vous essayé utilisé
SIZBOX sur le côté gauche (vide) et le côté droit? Tous deux définissent la largeur et développez la colonne Middleou essayez de définirflex Factor comme Tutoriel YouTube de l'officiel@Tokenyet n'est-ce pas effectivement la même chose que ce que j'ai énuméré comme je l'ai déjà essayé? Le deuxième bloc de code.
@Tokenyet Le problème principal est comment centrer réellement le gros texte, donc c'est vraiment centré. Semble être quelque chose à flotter des difficultés avec. Il repose trop sur la position de tous les autres éléments autour de lui, alors ici avec un seul élément de droite, il ne sait pas comment le centrer.