Je construis actuellement un écran de code de vérification pour mon application et j'utilise une pile avec des widgets positionnés (), car le formulaire de code de vérification doit également être bien positionné, mais comment puis-je le centrer horizontalement ?
Mon code est le suivant :
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Stack(
children: [
Image.asset(verificationImage),
Positioned(
left: MediaQuery.of(context).size.width * 0.075,
top: MediaQuery.of(context).size.height * 0.32,
width: MediaQuery.of(context).size.width * 0.6,
child: Text(
'We have send you an email with a verification code at ${generatedCode[0]}${generatedCode[1]}***',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: MediaQuery.of(context).size.height * 0.025),
),
),
//Later the
// Mail Adress
Positioned(
child: Form(
key: formKey,
child: CodeFields(
length: codeLength,
validator: validateCode,
fieldWidth: MediaQuery.of(context).size.width * 0.1,
fieldHeight: MediaQuery.of(context).size.width * 0.14,
inputDecoration: InputDecoration(
filled: true,
fillColor: Colors.grey.withOpacity(0.2),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(24.0),
borderSide: BorderSide(color: Colors.transparent)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(24.0),
),
),
),
),
),
SizedBox(height: MediaQuery.of(context).size.height * 0.05),
FlatButton(
onPressed: onButtonPressed,
child: Text('Verify code'),
),
],
),
),
);
}
Pour placer le widget exactement au centre, vous devez utiliser la alignmentpropriété de Stackwidget.
Supposons que vous ayez un Textwidget à l'intérieur du Positionedwidget que vous souhaitez placer exactement au centre. Ensuite, supprimez simplement le Positionedwidget et utilisez la propriété d'alignement et définissez-le Alignment.centercomme indiqué ci-dessous :
Widget précédent :
Stack(
children: [
Positioned( // This widget needs to be exactly in the center
child: Text('Some text'),
),
// Other widgets
],
),
Placer les widgets au centre
Stack(
alignment: Alignment.center, // <---------
children: [
Text('Some text'),
// Other widgets
],
),
De cette façon, tout widget à l'intérieur du Stacksera centré par défaut. Si vous souhaitez modifier la position d'autres widgets, vous devez utiliser Positionedwidget.
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots