Flutter - изменить анимацию TabBarView

Question

Я реализовал базовый TabBar и TabBarView с DeafualtTabController, см. Код ниже.

class MyApp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: BOTTOM_TABS,
      child: Scaffold(
        appBar: AppBar(title: const Text('Bottom App Bar')),
        body: _tabBarView(),
        bottomNavigationBar: _bottomTabBar(),
      ),
    );
  }

  _tabBarView() {
    return TabBarView(
      physics: NeverScrollableScrollPhysics(),
      children: [
        Container(
          color: Colors.blue,
        ),
        Container(
          color: Colors.orange,
        ),
        Container(
          color: Colors.lightGreen,
        ),
        Container(
          color: Colors.red,
        ),
      ],
    );
  }

  _bottomTabBar() {
    return TabBar(
      tabs: [
        Tab(
          icon: new Icon(Icons.home),
        ),
        Tab(
          icon: new Icon(Icons.public),
        ),
        Tab(
          icon: new Icon(Icons.group),
        ),
        Tab(
          icon: new Icon(Icons.person),
        )
      ],
    );
  }
}

Работает отлично! Теперь я хочу изменить анимацию между двумя вкладками с анимации по умолчанию. Но я не могу найти легкий способ сделать это.

После небольшого исследования кажется, что мне нужно использовать пользовательский TabController и каким-то образом использовать его метод animateTo. Для меня это кажется довольно большим изменением только для изменения анимации. Что мне интересно, так это то, что это правильный путь, или мне не хватает более простого способа просто изменить анимацию по умолчанию между вкладками?

Если бы кто-то мог дать мне хорошие ресурсы, чтобы указать мне правильное направление, я был бы очень признателен.

Answer 1

Это несложно, просто используйте TabController (для этого вам нужно использовать SingleTickerProviderStateMixin) и AnimatedBuilder.

class MyApp2 extends StatefulWidget {
  @override
  _MyApp2State createState() => _MyApp2State();
}

class _MyApp2State extends State<MyApp2> with SingleTickerProviderStateMixin {
  TabController _tabController;

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

  _tabBarView() {
    return AnimatedBuilder(
      animation: _tabController.animation,
      builder: (BuildContext context, snapshot) {
        return Transform.rotate(
          angle: _tabController.animation.value * pi,
          child: [
            Container(
              color: Colors.blue,
            ),
            Container(
              color: Colors.orange,
            ),
            Container(
              color: Colors.lightGreen,
            ),
            Container(
              color: Colors.red,
            ),
          ][_tabController.animation.value.round()],
        );
      },
    );
  }

  _bottomTabBar() {
    return TabBar(
      controller: _tabController,
      labelColor: Colors.black,
      tabs: [
        Tab(
          icon: new Icon(Icons.home),
        ),
        Tab(
          icon: new Icon(Icons.public),
        ),
        Tab(
          icon: new Icon(Icons.group),
        ),
        Tab(
          icon: new Icon(Icons.person),
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(title: const Text('Bottom App Bar')),
        body: _tabBarView(),
        bottomNavigationBar: _bottomTabBar(),
      ),
    );
  }
}

Answer 2

Снимок экрана (нулевой безопасный):

---

Код:

Если вам нужен детальный контроль, вы можете использовать AnimationController.

      class _MyPageState extends State<MyPage> with TickerProviderStateMixin {
  late final TabController _tabController;
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
      value: 1,
    );

    _tabController = TabController(
      length: 3,
      vsync: this,
    )..addListener(() {
        if (_tabController.indexIsChanging) {
          setState(() => _controller.forward(from: 0.5));
        }
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScaleTransition(
        scale: _controller,
        child: [
          Container(color: Colors.red),
          Container(color: Colors.green),
          Container(color: Colors.blue),
        ][_tabController.index],
      ),
      bottomNavigationBar: TabBar(
        controller: _tabController,
        tabs: [
          Tab(child: Text('Red')),
          Tab(child: Text('Green')),
          Tab(child: Text('Blue')),
        ],
      ),
    );
  }
}

Answer 3

Отключите анимацию между вкладками флаттера, установив продолжительность анимации на ноль, как это

          tabController = TabController(
    animationDuration: Duration.zero,
    length: 4, vsync: this, initialIndex: 0);

Поблагодаришь меня позже.

Answer 4

Не знаю, хотите ли вы полностью изменить анимацию.

Но если вам просто нужна настройка, вы пытались использовать TabController вместо DefaultTabController? Вам просто нужно пройтиtabController как аргумент к TabBar & TabBarView.

Чтобы настроить анимацию с помощью tabController, вы должны указать Animation для tabController а также укажите кривую и продолжительность с помощью animateTo функция tabController.

https://api.flutter.dev/flutter/material/TabController/animateTo.html https://api.flutter.dev/flutter/material/TabController-class.html