J'essaie donc d'aligner le bouton ENREGISTRER en bas au centre de l'écran. Je suis relativement nouveau dans Flutter et je me demande s'il existe un moyen de le faire facilement, ou dois-je réécrire beaucoup de code? Voici ce que j'ai jusqu'ici. Comme vous pouvez le voir, je l'ai mis dans un Align (), mais il ne va que vers le bas au centre de la zone remplie. Je pense que ce que je dois faire est de faire du Container extérieur () la hauteur de tout l'écran, mais je ne sais pas non plus comment faire cela. Si vous avez un moyen de le faire, faites-le moi savoir. Merci.
import 'package:flutter/material.dart';
class LoginSignupScreen extends StatefulWidget {
@override
_LoginSignupScreenState createState() => _LoginSignupScreenState();
}
class _LoginSignupScreenState extends State<LoginSignupScreen> {
// TRUE: register page, FALSE: login page
bool _register = true;
void _changeScreen() {
setState(() {
// sets it to the opposite of the current screen
_register = !_register;
});
}
@override
Widget build(BuildContext context) {
return Container(
// height:,
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
children: <Widget>[
MaterialButton(
onPressed: _changeScreen,
child: Text('REGISTER'),
),
MaterialButton(
onPressed: _changeScreen,
child: Text('LOGIN'),
),
],
),
],
),
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'E-MAIL'),
),
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'USERNAME'),
),
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'PASSWORD'),
)
],
),
),
Align(
alignment: FractionalOffset.bottomCenter,
child: MaterialButton(
onPressed: () => {},
child: Text(_register ? 'REGISTER' : 'LOGIN'),
),
),
],
),
);
}
}
5 Réponses :
Essaye ça :
import 'package:flutter/material.dart';
class LoginSignupScreen extends StatefulWidget {
@override
_LoginSignupScreenState createState() => _LoginSignupScreenState();
}
class _LoginSignupScreenState extends State<LoginSignupScreen> {
// TRUE: register page, FALSE: login page
bool _register = true;
void _changeScreen() {
setState(() {
// sets it to the opposite of the current screen
_register = !_register;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
// height:,
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
children: <Widget>[
MaterialButton(
onPressed: _changeScreen,
child: Text('REGISTER'),
),
MaterialButton(
onPressed: _changeScreen,
child: Text('LOGIN'),
),
],
),
],
),
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'E-MAIL'),
),
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'USERNAME'),
),
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'PASSWORD'),
)
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
MaterialButton(
onPressed: () => {},
child: Text(_register ? 'REGISTER' : 'LOGIN'),
),
],
)
],
),
),
);
}
}
Vous pouvez définir la hauteur du Container pour couvrir tout l'écran comme vous l'avez mentionné, puis simplement envelopper votre widget Align dans un widget Expanded , qui remplira l'espace disponible.
Essayez ce code:
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
children: <Widget>[
MaterialButton(
onPressed: _changeScreen,
child: Text('REGISTER'),
),
MaterialButton(
onPressed: _changeScreen,
child: Text('LOGIN'),
),
],
),
],
),
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'E-MAIL'),
),
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'USERNAME'),
),
TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: 'PASSWORD'),
)
],
),
),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: MaterialButton(
onPressed: () => {},
child: Text(_register ? 'REGISTER' : 'LOGIN'),
),
),
)
],
),
);
}
Vous résoudrez en utilisant le widget étendu .
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: MaterialButton(
onPressed: () => {},
child: Text(_register ? 'REGISTER' : 'LOGIN'),
),
),
),
Il existe un moyen plus simple:
return Scaffold(
bottomNavigationBar: BottomAppBar(
color: Colors.transparent,
child: Text('bottom screen widget'),
elevation: 0,
),
body: Text('body')
);
Juste pour ajouter à cela - en fonction de votre appareil cible, vous voudrez peut-être envelopper votre widget bottomNavigationBar dans un SafeArea, sinon il peut être partiellement couvert par la barre d'accueil (iPhone)
Il existe une autre façon de résoudre ce problème:
children : [
///1
Button(),
Expanded(child:Container()),
///2
Button(),
]
Logique: par conteneur étendu absorbera l'espace du milieu entre les deux boutons par lequel le deuxième bouton sera placé en bas de l'écran.