web-dev-qa-db-fra.com

Débordement inférieur de 30px

Je fais face à un problème en encapsulant TextField avec new Expanded(). Quand essayer de chercher quelque chose dans textfield son débordement de fond me montre par 30px. Ci-dessous mon code:

 Widget build(BuildContext context) {
    return new Scaffold(
        body:
      Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.search), onPressed: () {
                setState(() {

                });
              }),
              new Flexible(
                child: new TextField(
                  onChanged: (String value) {
                    onchange(value);
                  },
                  maxLines: 1,
                  autocorrect: true,
//                  decoration: const InputDecoration(helperText: "Search"),
                  style: new TextStyle(fontSize: 10.0, color: Colors.black),
                ),
              ),
              _text != null ? IconButton(
                  icon: Icon(Icons.close), onPressed: (){
              }) : new Container(),

              IconButton(icon: Icon(Icons.bookmark_border), onPressed: () {}),
            ],
          ),
          new Expanded(
              child: FilstList(searchtext: _text,)
          ),


        ],
      ),
    );
  }
}
9
Hitanshu Gogoi

Il existe deux solutions à ce problème.

  1. Ajoutez resizeToAvoidBottomPadding: false À votre Scaffold

    Scaffold(
     resizeToAvoidBottomPadding: false,
     body: ...)
    
  2. Placez votre FilstList(searchtext: _text,) dans un scrollableView (comme SingleChildScrollView ou ListView)
34

Vous devriez utiliser resizeToAvoidBottomInset

Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  ... 
)

Si vous rencontrez des problèmes avec une erreur de débordement, utilisez SingleChildScrollView avec elle.

Scaffold(
  resizeToAvoidBottomInset: false, // set it to false
  body: SingleChildScrollView(child: YourBody()),
)
2
CopsOnRoad

mettre resizeToAvoidBottomPadding à false dans Scaffold:

  Scaffold(
 resizeToAvoidBottomPadding: false, 

mettre à jour c'est une meilleure solution: supprimer Column et le remplacer par ListView

parce que si vous exécutez cette application dans un appareil plus petit, les éléments du bas disparaîtront et se cacheront de l'écran d'affichage, ce qui sera mauvais pour les utilisateurs de cette application.

Utilisez la propriété Scaffold "resizeToAvoidBottomPadding: false" et "SingleChildScrollView" en tant que parent du corps d'échafaudage:

  class RegisterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Registration Page",
      home: Scaffold(
          resizeToAvoidBottomPadding: false,
          appBar: AppBar(
            title: Text("Registration Page"),
          ),
          body: SingleChildScrollView(
            child: RegisterUser(),
          )),
    );
  }
}

cela résoudra le problème.

0
Dhanaji Yadav