Example 1: how textfield move up when keyboard appears flutter
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,
)
],
),
),
),
);
}
}
Example 2: adjust keybaord behaviour in textform field flutter
var _ageController = TextEditingController();var _heightController = TextEditingController();var _weightController = TextEditingController();final FocusNode _ageFocus = FocusNode(); final FocusNode _heightFocus = FocusNode(); final FocusNode _weightFocus = FocusNode();var _mainPartView = Container( width: 380.0, height: 240.0, color: Colors.grey, child: Column( children: <Widget>[ TextFormField( controller: _ageController, keyboardType: TextInputType.number, textInputAction: TextInputAction.next, focusNode: _ageFocus, onFieldSubmitted: (term){ _fieldFocusChange(context, _ageFocus, _heightFocus); }, decoration: InputDecoration( labelText: 'Age', hintText: 'Age', icon: Icon(Icons.person_outline), fillColor: Colors.white, ), ), TextFormField( controller: _heightController, keyboardType: TextInputType.number, textInputAction: TextInputAction.next, focusNode: _heightFocus, onFieldSubmitted: (term) { _fieldFocusChange(context, _heightFocus, _weightFocus); }, decoration: InputDecoration( labelText: _heightMessage, hintText: _heightMessage, icon: Icon(Icons.assessment), fillColor: Colors.white, ), ), TextFormField( controller: _weightController, keyboardType: TextInputType.number, textInputAction: TextInputAction.done, focusNode: _weightFocus, onFieldSubmitted: (value){ _weightFocus.unfocus(); _calculator(); }, decoration: InputDecoration( labelText: _weightMessage, hintText: _weightMessage, icon: Icon(Icons.menu), fillColor: Colors.white ), ), Padding(padding: EdgeInsets.all(4.5)), Center( child: RaisedButton( onPressed: _calculator, color: Colors.pinkAccent, child: Text( 'Calculate', style: TextStyle(fontSize: 16.9), ), textColor: Colors.white70, ), ) ], ),);_fieldFocusChange(BuildContext context, FocusNode currentFocus,FocusNode nextFocus) { currentFocus.unfocus(); FocusScope.of(context).requestFocus(nextFocus); }