Smoothly animating Flutter TextField to Text - flutter

Question

I'd like to be able to transition a TextField to (and from) just the Text, which means the input decorations fading out, and the text itself moving slightly to the left (as the input padding goes to 0).
I had some limited success with the following code, using the intrinsic animations of TextField. However, the text jumps left instead of moving there gradually, and the input decorations jump in/out as well as fading.
class ExampleScreen extends StatefulWidget {
#override
ExampleScreenState createState() => ExampleScreenState();
}
class ExampleScreenState extends State<ExampleScreen> {
TextEditingController text = TextEditingController();
bool editing = true;
#override
Widget build(BuildContext context) {
return Scaffold(
body: EditableText(controller: text, editing: editing),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() => editing = !editing),
child: Icon(Icons.ac_unit),
),
);
}
}
class EditableText extends StatelessWidget {
final TextEditingController controller;
final bool editing;
EditableText({this.controller, this.editing});
#override Widget build(BuildContext context) {
return TextField(
controller: controller,
enabled: editing,
decoration: InputDecoration().copyWith(
contentPadding: editing ? Theme.of(context).inputDecorationTheme.contentPadding : EdgeInsets.zero,
disabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent))
),
);
}
}
Any clever ideas?

Answer 1

I wrote a working example, but there are still some flicker, you can try some [curve] to modify the animation.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
AnimationController controller;
#override
void initState() {
super.initState();
controller = AnimationController(
duration: Duration(seconds: 1),
vsync: this,
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: AnimatedTextField(
controller: controller,
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.opacity),
onPressed: () {
var status = controller.status;
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
},
),
);
}
}
class AnimatedTextField extends StatefulWidget {
final AnimationController controller;
final Animation<double> opacity;
final Animation<double> left;
AnimatedTextField({
Key key,
#required this.controller,
}) : opacity = Tween<double>(
begin: 1.0,
end: 0.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.0,
0.5,
curve: Curves.easeInOut,
),
),
),
left = Tween<double>(
begin: 20.0,
end: 0.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.0,
1.0,
curve: Curves.easeIn,
),
),
),
super(key: key);
#override
_AnimatedTextFieldState createState() => _AnimatedTextFieldState();
}
class _AnimatedTextFieldState extends State<AnimatedTextField> {
TextEditingController _textEditingController =
TextEditingController(text: 'hello fluttr');
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: widget.controller,
builder: (context, child) {
var theme = Theme.of(context);
var o = widget.opacity.value;
var _child = o > 0.0
? TextField(
controller: _textEditingController,
style: theme.textTheme.body2,
decoration: InputDecoration(
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color.fromRGBO(0, 0, 0, 1)),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color.fromRGBO(0, 0, 0, o)),
),
),
)
: Opacity(
opacity: (o - 1).abs(),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
_textEditingController.text,
style: theme.textTheme.body2,
),
),
);
return Padding(
padding: EdgeInsets.only(
left: widget.left.value,
top: 20,
right: 20,
bottom: 20,
),
child: _child,
);
},
);
}
}

Answer 2

Managed to work it out. Created an 'AnimatedDouble' widget which just makes a builder with the value of an animation as a parameter, triggered by a ChangeNotifier:
class AnimatedDouble extends StatefulWidget {
final Widget child;
final Function(BuildContext context, Widget child, double d) builder;
final Duration duration;
final ChangeNotifier listen;
AnimatedDouble({this.child, this.builder, this.duration, this.listen});
#override
_AnimatedDoubleState createState() => new _AnimatedDoubleState();
}
class _AnimatedDoubleState extends State<AnimatedDouble> with SingleTickerProviderStateMixin{
AnimationController controller;
#override
void initState() {
super.initState();
controller = AnimationController(value: 1.0, vsync: this, duration: widget.duration);
widget.listen.addListener(_go);
}
#override
void dispose() {
controller.dispose();
widget.listen.removeListener(_go);
super.dispose();
}
void _go() {
controller.forward(from: 0.0);
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
child: widget.child,
builder: (context, child) => widget.builder(context, child, controller.view.value),
);
}
}
Then was able to use it like so to get the effect I wanted:
AnimatedDouble(
duration: Duration(milliseconds: 200),
listen: something_to_trigger_animation,
builder: (context, child, d) => TextField(
controller: controller,
decoration: InputDecoration(
contentPadding: editing ?
EdgeInsets.symmetric(vertical: 16.0 * d, horizontal: 12.0 * d) :
EdgeInsets.symmetric(vertical: 16.0 * (1 - d), horizontal: 12.0 * (1 - d)),
disabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.transparent)),
),
enabled: editing,
),
),