如何制作这样的 Flutter 动画？

Question

欢迎任何代码示例，谢谢！

Answer 1

TabBar 默认执行此动画...

您可以从 IDE 或 here 查看它的源代码，看看它是如何完成的。

如果您想直接在您的应用程序中使用它，page 有文档、视频和示例。

Answer 2

这是代码示例。您可以使用 TabBar 小部件。

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this, initialIndex: 0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text("Demo"),
        bottom: TabBar(
          controller: _tabController,
          indicatorColor: Colors.white,
          tabs: [
            Tab(
              text: "Wellbeing",
            ),
            Tab(
              text: "Cleaning",
            ),
            Tab(
              text: "Self-care",
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Center(child: Text("Wellbeing")),
          Center(child: Text("Cleaning")),
          Center(child: Text("Self-care")),
        ],
      ),
    );
  }
}

如何制作这样的 Flutter 动画？

How to make Flutter animation like this?

animation

flutter