Move textfield up when keyboard appears in Flutter - user-interface

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