Flutter で TreeView を作る

TreeView というのは、グラフ理論において「木」と呼ばれる構造を持ったデータを表示する View のことです。

難しい雰囲気で書きましたが、要するに以下のようなよく見るやつです。

今回は、この TreeView を Flutter で実装する方法についてまとめます。

使えるパッケージを探す

使えるパッケージを探す

Flutter や Dart で凝ったことをするなら、とりあえず pub.dev で検索するのが確実で早いです。

flutter_treeview を見てみたが…

TreeView で検索してみると、flutter_treeview というパッケージが人気のようです。

…で、使ってみたのですが、このパッケージは正直イマイチでした。

理由は以下の通りです。

View の情報を何故か Controller がしっかり握っている
そのような設計なので、View の変更に Controller の再構築が必要になる
そもそも、開発者がメンテナンスを放棄している

つまり、あんまりイケてない設計だった上に、開発者が放棄したパッケージ（なのに「もうメンテナンスしてないよ」というラベルが付いてない…）というわけです。

flutter_simple_treeview がいい感じ

結局、たどり着いたのは flutter_simple_treeview でした。

こちらは以下のような点がイケています。

設計がマトモ（View と Controller がしっかり分離している）
シンプルで扱いやすい、その上で拡張性が高い
Google がメンテしているので将来のサポートについても信頼性が高い

実装例

TreeView の単純な表示と、Controller からの制御についても例を載せておきます。
State の実装のみ記載します。

class _MyHomePageState extends State<MyHomePage> {
  final TreeController _controller = TreeController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        TreeView(treeController: _controller, nodes: [
          TreeNode(content: Text('1年生'), children: [
            TreeNode(content: Text('1-1'), children: [
              TreeNode(content: Text('男子')),
              TreeNode(content: Text('女子')),
            ]),
          ]),
        ]),
        MaterialButton(
          child: Text("Expand"),
          onPressed: () {
            setState(() {
              _controller.expandAll();
            });
          },
        ),
        MaterialButton(
          child: Text("Collapse"),
          onPressed: () {
            setState(() {
              _controller.collapseAll();
            });
          },
        ),
      ],
    ));
  }
}