Flutter AnimatedCrossFade портит форматирование виджетов

Question

Прежде всего, я заранее прошу прощения за то, что не смог включить изображения, так как это мой первый вопрос на форуме, а изображения требуют более высокой репутации.

Я пытаюсь создать плавную анимацию с помощью виджета AnimatedCrossFade, но заметил 2 проблемы.

Размер кнопки изменяется и расширяется во время анимации.

Желаемый результат состоит в том, чтобы обе кнопки соответствовали ширине родительского элемента, как на первом изображении, и чтобы цвет и текст менялись плавно, но вот что происходит.

Без AnimatedCrossFade, кнопка 1 выглядит следующим образом :

https://stackru.com/images/d41b31075614a5aac176ce42fe61b925bf6643b9.jpg

Если я заключу его в виджет AnimatedCrossFade, кнопка 1 будет выглядеть так:

https://stackru.com/images/2505e22eb6d7d8755e7ac025eb950b12d5ce3a49.jpg

Пока происходит переход, он выглядит так:

https://stackru.com/images/343b386f7855d7532b07ddbbac71583b51637d24.jpg

TextField с обводкой InputDecoration становится тоньше

У меня есть несколько виджетов TextField, которые я хочу использовать на странице, но некоторые из них нужно анимировать. Проблема в том, что когда я помещаю TextField внутри виджета AnimatedCrossFade , нижняя строка становится тоньше, из-за чего макет выглядит ужасно. Вот сравнение того, как TextField выглядит внутри AnimatedCrossFade (вверху) и за его пределами (внизу).

https://stackru.com/images/27d1545c801ef5538dcc2b922694efac4fbbbace.jpg

Этого образца кода должно быть достаточно, чтобы воссоздать то, что я пытаюсь объяснить.

      class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        padding: EdgeInsets.symmetric(horizontal: 60, vertical: 60),
        children: [
          ElevatedButton(
            child: Text(_isExpanded ? "Collapse" : "Expand"),
            onPressed: () {
              setState(() {
                _isExpanded = !_isExpanded;
              });
            },
          ),
          AnimatedCrossFade(
            crossFadeState: _isExpanded
                ? CrossFadeState.showFirst
                : CrossFadeState.showSecond,
            duration: const Duration(seconds: 1),
            firstChild: TextField(
              decoration: InputDecoration(
                hintText: "Text",
              ),
            ),
            secondChild: SizedBox.shrink(),
          ),
          TextField(
            decoration: InputDecoration(
              hintText: "Text",
            ),
          ),
          AnimatedCrossFade(
            crossFadeState: !_isExpanded
                ? CrossFadeState.showFirst
                : CrossFadeState.showSecond,
            duration: Duration(seconds: 1),
            firstChild: ElevatedButton(
              child: Text("Button 1"),
              onPressed: () {},
            ),
            secondChild: ElevatedButton(
              child: Text("Button 2"),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),
              ),
              onPressed: () {},
            ),
          ),
        ],
      ),
    );
  }
}