Any code example is welcome, thanks!

CodePudding user response：

TabBar does this animation by default...

You can look at its source code from the IDE or here to see how it's done.

This page has documentation, video, and examples if you want to use it directly in your app.

CodePudding user response：

Here is the code sample. You can use TabBar widget.

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