Flutter 将TextField平滑过渡到Text

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