flutter_hooks 管理画面的な左メニューを作る

動機としてはNavigationRailとExpansionTileを組み合わせて、 尚且つ、それぞれのExpansionTileの選択状態が連動させたいということでした。

以前の記事で、左メニューの閉開部分だけ作りましたが、 NavigationRailのソースを一部抜粋したみたいなwidgetでした。

今回はそれと、flutter_sidebar

pub.dev

のソースを利用し、さらにriverpod,flutter_hooksを組み合わせました。

https://raw.githubusercontent.com/na8esin/flutter_hooks_sidebar/main/flutter_hooks_sidebar.gif

flutter_sidebarだけだと左メニューが完全に消えてしまう パターンしかできなそうでした。

そうではなくて、firebaseの管理画面みたいに、 アイコンだけ残る状態にしたかったので改造しました。

左メニュー全体を縮めた時に、Expansionする部分(子widget) があるアイコンは左にちょっとずれてますが、 他と区別する方法がちょっと思いつかなかったのでそうしておきました。

ソースの全体は↓になります。

https://github.com/na8esin/flutter_hooks_sidebar