I have implemented TextFormField inside a Column where its parent is a SingleChildScrollView. But somehow it is failed to autoscroll when I click on TextFormField.
For more details I am adding video URL. Video
Here is the code:
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
resizeToAvoidBottomPadding: false,
floatingActionButton: FloatingActionButton(
backgroundColor: AppTheme.colors.themeBlue,
child: Icon(Icons.arrow_forward),
onPressed: () {
},
),
body: Container(
color: AppTheme.colors.backgroundLight,
child: Column(
children: <Widget>[
AppBarWidget(
title: Constants.addClient,
),
ProfileImageWidget(),
Container(
height: 100,
width: screenSize.width,
child: ListView(
padding: EdgeInsets.all(AppSize.small),
children: <Widget>[
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.clientName,
hintText: Constants.michaelNilson,
// cursorColor: AppTheme.colors.themeBlue,
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.email,
hintText: Constants.email,
textInputAction: TextInputAction.done,
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.mobile,
hintText: Constants.mobile,
textInputAction: TextInputAction.done,
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.followUp,
hintText: Constants.followUp,
textInputAction: TextInputAction.done,
suffixIcon: IconButton(
icon: Icon(
Icons.keyboard_arrow_down,
color: Colors.black87,
),
),
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.date,
suffixIcon: IconButton(
icon: Icon(
Icons.date_range,
size: 15,
color: Colors.black87,
),
),
hintText: Constants.date,
textInputAction: TextInputAction.done,
),
SizedBox(
height: 10,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
suffixIcon: IconButton(
icon: Icon(
Icons.access_time,
size: AppSize.medium,
color: Colors.black87,
),
),
hintText: Constants.time,
labelText: Constants.time,
textInputAction: TextInputAction.done,
),
SizedBox(
height: AppSize.small,
),
ProfileTextFieldWidget(
labelTextStyle: AppTheme.textStyle.lightHeading
.copyWith(
fontSize: AppFontSize.s18,
color: AppTheme.colors.themeBlue),
labelText: Constants.notes,
hintText: Constants.notes,
textInputAction: TextInputAction.done,
),
SizedBox(
height: AppSize.small,
),
],
)
)
],
),
),
);
}
For details here is the video:
Remove resizeToAvoidBottomPadding: false,
its deprecated now
and use resizeToAvoidBottomInset: true,
Compose an animation and move your TextField container up when a TextField gets focus.
For learning about composing animations refer to Composing Animations and Chaining Animations in Dart's Flutter Framework
Use Flutter's FocusNode to detect the focus on a TextField
here is an example:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Animation Demo',
theme: new ThemeData(
primaryColor: new Color(0xFFFF0000),
),
home: new FormDemo(),
);
}
}
class FormDemo extends StatefulWidget {
@override
_FormDemoState createState() => _FormDemoState();
}
class _FormDemoState extends State<FormDemo> with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
FocusNode _focusNode = FocusNode();
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
_animation = Tween(begin: 300.0, end: 50.0).animate(_controller)
..addListener(() {
setState(() {});
});
_focusNode.addListener(() {
if (_focusNode.hasFocus) {
_controller.forward();
} else {
_controller.reverse();
}
});
}
@override
void dispose() {
_controller.dispose();
_focusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false, // this avoids the overflow error
appBar: AppBar(
title: Text('TextField Animation Demo'),
),
body: new InkWell( // to dismiss the keyboard when the user tabs out of the TextField
splashColor: Colors.transparent,
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Container(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
SizedBox(height: _animation.value),
TextFormField(
decoration: InputDecoration(
labelText: 'I move!',
),
focusNode: _focusNode,
)
],
),
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.