LoginSignup
11
8

More than 1 year has passed since last update.

TabBarのtabControllerをstatelessWidgetで使う方法(Flutter)

Last updated at Posted at 2021-06-07

tabControllerをstatelessWidgetで使う方法

TabBarでtabControllerを使おうと思って公式ドキュメントを読んだが、

with TickerProviderStateMixinがstatefulWidgetでしか使えないためvsync:thisが利用できなかった。

TabBarの公式ドキュメント

しかしtabControllerの公式ドキュメントをよく見ると下の方にstatelessWidgetでもtabControllerを使う方法が記されていた。

tabControllerの公式ドキュメント

以下、ほとんど公式のコピペ↓

@override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Builder(builder: (BuildContext context) {
        final TabController tabController = DefaultTabController.of(context)!;
        tabController.addListener(() {
          if (!tabController.indexIsChanging) {
            //ここでcontrollerの値が変わった時の処理を書く。
          }
        });
        return Scaffold();

このように、DefaultTabController()の中でadd.Listener()をすることで、controllerの値が変わった時に処理が走る。

最後に

そもそもtabControllerがstatefulWidgetでしか使えない、ということがなんとなくおかしいと推測するのが順当な考え方だと思った。おおもとを辿れば全てstelessWidgetなのでstatelessでも使えるはずということを前提におきつつ検索をかけにいくという姿勢が大事なのかな?と思った。

11
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
8