web-dev-qa-db-fra.com

Flutter - Changer l'animation de TabBarView

J'ai implémenté un TabBar et TabBarView de base avec un DeafualtTabController, voir le code ci-dessous.

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

Fonctionne très bien! Maintenant, ce que je veux faire, c'est changer l'animation entre les deux onglets par rapport à l'animation par défaut. Mais je ne trouve pas de moyen facile de le faire.

Après un peu de recherche, il semble que je doive utiliser un TabController personnalisé et en quelque sorte utiliser sa méthode animateTo . Pour moi, cela semble être un assez gros changement juste pour changer l'animation. Ce que je me demande, c'est si c'est la bonne façon ou si je manque un moyen plus simple de simplement changer l'animation par défaut entre les tabulations?

Si quelqu'un pouvait me donner de bonnes ressources pour me diriger dans la bonne direction, je l'apprécierais grandement.

flutterflutter-layoutflutter-animation
11
molundb

Ce n'est pas difficile, utilisez simplement TabController (pour ce faire, vous devez utiliser SingleTickerProviderStateMixin) et AnimatedBuilder.

enter image description here

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(),
      ),
    );
  }
}
3
Kherel

Je ne sais pas si vous voulez changer complètement l'animation.

Mais si vous avez juste besoin d'une personnalisation, avez-vous essayé d'utiliser un TabController au lieu d'un DefaultTabController? Il vous suffit de passer le tabController comme argument au TabBar & TabBarView.

Pour personnaliser l'animation avec le tabController, vous devez spécifier une animation pour le tabController et également spécifier la courbe et la durée avec la fonction animateTo de la tabController .

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

0
Gaspard Merten