Flutter 中出现键盘时向上移动文本字段

Question

I want to make my textfield go up when the keyboard appears. The keyboard is in front of textfield so I can't see what I write, I didn't found many solution to my problem or there were not very clean.

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Theme.of(context).backgroundColor,
  body: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      children: <Widget>[
        conseil(text),
        Spacer(),
        InkWell(
          onTap: () => [
            pic.getImage().then((a) {
              setState(() {
                myimg = myimage;
              });
            })
          ],
          child: Container(
            decoration: BoxDecoration(
                border: Border.all(width: 2.0, color: mygreen),
                boxShadow: <BoxShadow>[
                  BoxShadow(
                      color: mygreen, blurRadius: 0, offset: Offset(7, 3))
                ],
                shape: BoxShape.circle),
            child: ClipOval(
              child: SizedBox(
                width: 140,
                height: 140,
                child: (myimg != null)
                    ? Image.file(myimg, fit: BoxFit.fill)
                    : Image(
                        image: AssetImage('assets/images/others/add.png'),
                        fit: BoxFit.fill,
                      ),
              ),
            ),
          ),
        ),
        (myimage == null)?
        Text("Choisir une photo"): SizedBox(height: 1),
        Spacer(),
        SizedBox(
          width: 250,
          child: TextField(
            textAlign: TextAlign.center,
            style: TextStyle(color: Colors.white),
            decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                    borderSide:
                        BorderSide(color: Color(0xFF37cd41), width: 2)),
                hintText: 'TON PRENOM',
                hintStyle: TextStyle(color: Colors.white)),
            controller: name,
          ),
        ),
        Spacer(),
        button(mypink, 'CONTINUER', widget.admin, context, name),
        Spacer(),
      ],
    ),
  ),
);
}
}

Answer 1

Try using SingleChildScrollView and ConstrainedBox .

Scaffold(
  body: SingleChildScrollView(
    child: ConstrainedBox(
      constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
      child: yourWidget()

Checkout following answer: https://stackoverflow.com/a/59783374/12709039

Answer 2

Try out this one

  Column(
      children: <Widget>[
        Expanded(
          child: SingleChildScrollView(
            child: Column(
                     (Your other Widgets)

Answer 3

 import 'dart:async'; import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/material.dart'; import '../weight/boostrap/flutter_bootstrap.dart'; import '../weight/boostrap/bootstrap_widgets.dart'; /* TextEditingController txtname = TextEditingController(); showModalBottomSheet( context: context, isScrollControlled: true, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(20), topRight: Radius.circular(20), ), ), builder: (context) => SingleChildScrollView( padding: EdgeInsets.only( bottom: MediaQuery.of(context).padding.bottom), child: new AddItem( tektk: 'Category', tektd: 'Add', txtname: txtname, ismultik:false, onPressed: () {}), ), ); */ class AddItem extends StatelessWidget { const AddItem( {Key? key, required this.ismultik, required this.tektd, required this.tektk, required this.txtname, required this.onPressed}): super(key: key); final bool ismultik; final String tektk; final String tektd; final VoidCallback? onPressed; final TextEditingController txtname; @override Widget build(BuildContext context) { final MediaQueryData mediaQueryData = MediaQuery.of(context); bootstrapGridParameters(gutterSize: 10); return Padding( padding: mediaQueryData.viewInsets, child: Container( padding: EdgeInsets.only(bottom: 90.0, left: 10.0, right: 10.0), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ ListTile( trailing: SizedBox.fromSize( size: Size(35, 35), child: ClipOval( child: Material( color: Colors.indigo, child: InkWell( splashColor: Colors.white, onTap: () { Navigator.pop(context); }, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(Icons.close, color: Colors.white), ], ), ), ), ), ), ), BootstrapRow(height: 0, children: [ BootstrapCol( sizes: 'col-md-12', child: TextField( style: TextStyle(color: Colors.black), decoration: new InputDecoration( border: new OutlineInputBorder( borderSide: new BorderSide(color: Colors.white)), labelText: tektk, ), keyboardType: ismultik == true? TextInputType.multiline: TextInputType.text, maxLines: null, minLines: 1, controller: txtname, ), ), BootstrapCol( sizes: 'col-md-12', child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, // background onPrimary: Colors.white, // foreground ), onPressed: onPressed, child: Text(tektd)), ), ]), ], ), ), ); } }

Answer 4

try to add scroll padding from Bottom for textfield

TextField(
    scrollPadding: const EdgeInsets.only(bottom: 50), //add this line replace 50 with your required padding
  ),