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(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
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,
);
},
);
}
}