tree_checkbox_list.dart

/*
  Author: Jorge Wander Santana Urena
  Goal: Paint a Tree View of Checkbox List
  Source: https://gist.github.com/jorwan/abcf91068b7a910ac3388b399b1bb71f
*/

import 'package:flutter/material.dart';

main() {
  final data = {
    "Opt 1": true,
    "Opt 2": false,
    "Opt 3": true,
    "Opt 4": false,
    "Opt 5": false,
    "Opt 6": true,
  };

  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tree View'),
        ),
        body: Container(
          padding: EdgeInsets.all(10),
          child: _createTreeView(title: 'Group A', children: data),
        ),
      ),
    ),
  );
}

_createTreeView(
        {String title,
        Map<String, bool> children,
        Function(String, bool) onTap}) =>
    Column(
      children: [
        _createCheckBox(active: false, title: title),
        ...children.keys
            .map<Widget>((k) => _createChildNode(
                child: _createCheckBox(
                  active: children[k],
                  title: k,
                ),
                isLastNode: children.keys.last == k))
            // children.indexOf(e) == children.indexOf(children.last)))
            .toList()
      ],
    );

Widget _createChildNode({bool isLastNode = false, Widget child}) => Container(
      height: 40,
      padding: EdgeInsets.only(left: 12.5),
      child: Row(
        children: [
          Stack(
            children: [
              isLastNode
                  ? SizedBox.shrink()
                  : Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        height: 20,
                        width: 1,
                        color: Colors.black,
                      ),
                    ),
              Align(
                alignment: Alignment.topCenter,
                child: Container(
                  height: 20,
                  width: 25,
                  decoration: BoxDecoration(
                      border: Border(
                          left: BorderSide(
                              color: Colors.black,
                              width: 1,
                              style: BorderStyle.solid),
                          bottom: BorderSide(
                              color: Colors.black,
                              width: 1,
                              style: BorderStyle.solid))),
                ),
              ),
            ],
          ),
          child
        ],
      ),
    );

_createCheckBox({String title, bool active = false}) => Row(
      children: [
        Container(
          height: 25,
          width: 25,
          margin: EdgeInsets.only(right: 10),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.black),
              borderRadius: BorderRadius.circular(3)),
          child: active
              ? Icon(
                  Icons.check,
                  color: Colors.blue,
                )
              : null,
        ),
        Text(title)
      ],
    );