2
votes

Flutter / Dart Champ de texte déroulant au-dessus du clavier

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

https://pastebin.com/4EngQDV5

blank


3 commentaires

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.


3 Réponses :


0
votes

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,
      ],
    ),
  ),
);


2 commentaires

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



4
votes

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()
              ]
          ),
        )
    }
}


1 commentaires

J'essaye d'utiliser uniquement textfield, vous pouvez jeter un oeil à mon code dans og post.



8
votes

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.


1 commentaires

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.