Flutter - 如何用动画扩展小部件？

Question

所以我有以下代码

Row(
  children: [
    IconButton(), // IconButton1
    Expanded(
      child: Container(
        child: Textfield(),
      ),
    ),
    IconButton(), // IconButton2
  ]
)

当我在文本字段中输入内容时，我希望删除 IconButton1，并且文本字段容器或文本字段本身通过动画展开以占用该 IconButton1 的空间。我可以做到这一点，但我不能用动画做到这一点。

我尝试了 AnimatedContainer 和 AnimatedSwitcher，但它们没有按预期工作。

Answer 1

如果它是一个简单的容器，你应该使用 AnimatedContainer。 否则你应该使用scale transition。

import 'package:flutter/material.dart';

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  final items = List<int>.generate(20, (i) => i + 1);

  @override
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';

    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              key: Key(item.toString()),
              onDismissed: (direction) {
                setState(() {
                  items.removeAt(index);
                });

                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('$item dismissed'),
                  ),
                );
              },
              background: Container(color: Colors.yellow),
              child: AnimatedContainer(
                height: 1200 / items.length,
                width: MediaQuery.of(context).size.width,
                duration: Duration(milliseconds: 300),
                child: Text('$item'),
                color: (items[index] % 2 == 0) ? Colors.green : Colors.red,
              ),
            );
          },
        ),
      ),
    );
  }
}