Move textfield up when keyboard appears in 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(),
      ],
    ),
  ),
);
}
}

score 2 · Answer 1 · answered Feb 05 '20 at 13:24

2

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

answered Feb 05 '20 at 13:24

Selim Kundakçıoğlu

1,986
10
20

I did this but I can't scroll when the keyboard is up :/ – luc Feb 05 '20 at 13:43
its not scroll automatically when keyboard is up, manually scroll page up side – MohammedAli Feb 05 '20 at 13:46
When I increment maxheight I can scroll but not just when the keyboard appears – luc Feb 05 '20 at 14:06

Aamil Silawat · Answer 2 · 2020-02-05T13:52:29.553

0

Try out this one

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

edited Feb 05 '20 at 13:52

answered Feb 05 '20 at 13:45

Aamil Silawat

7,735
3
19
37

All widgets disappears :/ – luc Feb 05 '20 at 13:49
@LucaMathevet Answer updated, did you perform hot restart? – Aamil Silawat Feb 05 '20 at 13:51
Updated my answer try it because i am using same and it is working fine – Aamil Silawat Feb 05 '20 at 13:54
I got Error: ParentDataElement: is not true – luc Feb 05 '20 at 14:00
Or a black screen – luc Feb 05 '20 at 14:01

Zoran Milicevic · Answer 3 · 2022-08-14T18:39:39.720

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

your answer code very long, and also give some supporting information for better answer and more up vote — Akbar Masterpadi, Aug 20 '22 at 06:52

score 0 · Answer 4 · answered Dec 30 '22 at 16:48

0

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

answered Dec 30 '22 at 16:48

Huzaifa Shakeel

11
2

Move textfield up when keyboard appears in Flutter

4 Answers4

Linked