J'utilise des champs de texte, comment puis-je faire en sorte qu'il défile un peu lors de la saisie de l'adresse e-mail et du mot de passe?
Voici un aperçu du code
blank
3 Réponses :
C'est un nouveau code. Je pense que celui-ci vous aide. Ajoutez ce code après la déclaration passwordField.
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
emailField,
SizedBox(
height: 10,
),
passwordField,
],
),
),
);
J'ai essayé cela sur une nouvelle page mais tout apparaît en haut de l'écran, comment puis-je positionner les champs de texte?
J'ai changé le code. veuillez ajouter ce code après votre mot de passe final
J'ai en fait eu le même problème. J'ai pensé que vous deviez encapsuler les TextForms dans un ListView pour que cela fonctionne.
import 'package:flutter/material.dart';
class ScrollView extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _ScrollViewState();
}
}
class _ScrollViewState extends State<ScrollView>{
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: userInputBackgroundColor,
body: ListView(
padding: EdgeInsets.all(0.0),
shrinkWrap: true,
children: <Widget>[
TextForm(),
TextForm()
]
),
)
}
}
J'essaye d'utiliser uniquement textfield, vous pouvez jeter un oeil à mon code dans og post.
D'abord, le code que vous avez collé est incomplet, donc je suppose que vous avez ces champs de texte dans une colonne. Vous avez deux options:
1st) Dans votre Scaffold, vous pouvez définir cette propriété sur false comme resizeToAvoidBottomInset: false,
2o) Vous pouvez utiliser un SingleChildScrollView qui se déplacera vers le haut de votre champ de texte lorsque le clavier apparaît, par exemple:
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SingleChildScrollView(
child: MyLoginPage(title: 'Flutter Demo Home Page'),
),
),
);
}
}
class MyLoginPage extends StatefulWidget {
MyLoginPage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyLoginPageState createState() => _MyLoginPageState();
}
class _MyLoginPageState extends State<MyLoginPage> {
String _email;
String _password;
TextStyle style = TextStyle(fontSize: 25.0);
@override
Widget build(BuildContext context) {
final emailField = TextField(
obscureText: false,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Icon(FontAwesomeIcons.solidEnvelope),
hintText: "Email",
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red[300], width: 32.0),
borderRadius: BorderRadius.circular(97.0))),
onChanged: (value) {
setState(() {
_email = value;
});
},
);
final passwordField = TextField(
obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Icon(FontAwesomeIcons.key),
hintText: "Password",
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red[300], width: 32.0),
borderRadius: BorderRadius.circular(25.0))),
onChanged: (value) {
setState(() {
_password = value;
});
},
);
return Center(
child: Column(
children: <Widget>[
Container(
color: Colors.yellow[300],
height: 300.0,
),
emailField,
passwordField
],
),
);
}
}
Il suffit de copier et coller le code, et voir si c'est ce que vous voulez.
J'espère que cette aide.
J'ai essayé cette solution. Mais après avoir tapé, il ne peut pas être fait défiler vers le haut, pouvez-vous m'aider avec cela.
Mais où se trouvent ces champs de texte? pouvez-vous montrer ce que vous avez jusqu'à présent.
@Hosar, j'ai ajouté un aperçu du code, le code peut être un peu désordonné mais vous pouvez y jeter un coup d'œil.
Vous devez conserver le code dans la question pour de futures références.