Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
Ask Question
I want to achieve a tree hierarchy list view. I have tried a few references that I found on pub.dev:
links to packages:
https://pub.dev/packages/parent_child_checkbox
https://pub.dev/packages/list_treeview
I have tested them, but they do not meet my requirements. I need a n-level sub-tree with checkbox and selection, as shown in the image below. Does anyone have any ideas on how to achieve this or can anyone please provide guidance? Thank you.
this.isSelected = false,
this.children = const <TreeNode>[],
}) : checkBoxState = isSelected
? CheckBoxState.selected
: (children.any((element) =>
element.checkBoxState != CheckBoxState.unselected)
? CheckBoxState.partial
: CheckBoxState.unselected);
TreeNode copyWith({
String? title,
bool? isSelected,
List<TreeNode>? children,
return TreeNode(
title: title ?? this.title,
isSelected: isSelected ?? this.isSelected,
children: children ?? this.children,
Your data could be something like this:
final nodes = [
TreeNode(
title: "title.1",
children: [
TreeNode(
title: "title.1.1",
TreeNode(
title: "title.1.2",
children: [
TreeNode(
title: "title.1.2.1",
TreeNode(
title: "title.1.2.2",
TreeNode(
title: "title.1.3",
TreeNode(
title: "title.2",
TreeNode(
title: "title.3",
children: [
TreeNode(
title: "title.3.1",
TreeNode(
title: "title.3.2",
TreeNode(
title: "title.4",
create an enum for checkBox state:
enum CheckBoxState {
selected,
unselected,
partial,
create a TitleCheckBox widget that has three states and shows title:
class TitleCheckBox extends StatelessWidget {
const TitleCheckBox({
Key? key,
required this.title,
required this.checkBoxState,
required this.onChanged,
required this.level,
}) : super(key: key);
final String title;
final CheckBoxState checkBoxState;
final VoidCallback onChanged;
final int level;
@override
Widget build(BuildContext context) {
final themeData = Theme.of(context);
const size = 24.0;
const borderRadius = BorderRadius.all(Radius.circular(3.0));
return Row(
children: [
SizedBox(
width: level * 16.0,
IconButton(
onPressed: onChanged,
// borderRadius: borderRadius,
icon: Container(
height: size,
width: size,
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(
color: checkBoxState == CheckBoxState.unselected
? themeData.unselectedWidgetColor
: themeData.primaryColor,
width: 2.0,
borderRadius: borderRadius,
color: checkBoxState == CheckBoxState.unselected
? Colors.transparent
: themeData.primaryColor,
child: AnimatedSwitcher(
duration: const Duration(
milliseconds: 260,
child: checkBoxState == CheckBoxState.unselected
? const SizedBox(
height: size,
width: size,
: FittedBox(
key: ValueKey(checkBoxState.name),
fit: BoxFit.scaleDown,
child: Center(
child: checkBoxState == CheckBoxState.partial
? Container(
height: 1.8,
width: 12.0,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: borderRadius,
: const Icon(
Icons.check,
color: Colors.white,
const SizedBox(
width: 8.0,
Text(title),
Now implement the recursive TreeView with the selection logic:
class TreeView extends StatefulWidget {
const TreeView({
Key? key,
required this.nodes,
this.level = 0,
required this.onChanged,
}) : super(key: key);
final List<TreeNode> nodes;
final int level;
final void Function(List<TreeNode> newNodes) onChanged;
@override
State<TreeView> createState() => _TreeViewState();
class _TreeViewState extends State<TreeView> {
late List<TreeNode> nodes;
@override
void initState() {
super.initState();
nodes = widget.nodes;
TreeNode _unselectAllSubTree(TreeNode node) {
final treeNode = node.copyWith(
isSelected: false,
children: node.children.isEmpty
? null
: node.children.map((e) => _unselectAllSubTree(e)).toList(),
return treeNode;
TreeNode _selectAllSubTree(TreeNode node) {
final treeNode = node.copyWith(
isSelected: true,
children: node.children.isEmpty
? null
: node.children.map((e) => _selectAllSubTree(e)).toList(),
return treeNode;
@override
Widget build(BuildContext context) {
if (widget.nodes != nodes) {
nodes = widget.nodes;
return ListView.builder(
itemCount: nodes.length,
physics: widget.level != 0 ? const NeverScrollableScrollPhysics() : null,
shrinkWrap: widget.level != 0,
itemBuilder: (context, index) {
return ExpansionTile(
title: TitleCheckBox(
onChanged: () {
switch (nodes[index].checkBoxState) {
case CheckBoxState.selected:
nodes[index] = _unselectAllSubTree(nodes[index]);
break;
case CheckBoxState.unselected:
nodes[index] = _selectAllSubTree(nodes[index]);
break;
case CheckBoxState.partial:
nodes[index] = _unselectAllSubTree(nodes[index]);
break;
if (widget.level == 0) {
setState(() {});
widget.onChanged(nodes);
title: nodes[index].title,
checkBoxState: nodes[index].checkBoxState,
level: widget.level,
trailing:
nodes[index].children.isEmpty ? const SizedBox.shrink() : null,
children: [
TreeView(
nodes: nodes[index].children,
level: widget.level + 1,
onChanged: (newNodes) {
bool areAllItemsSelected = !nodes[index]
.children
.any((element) => !element.isSelected);
nodes[index] = nodes[index].copyWith(
isSelected: areAllItemsSelected,
children: newNodes,
widget.onChanged(nodes);
if (widget.level == 0) {
setState(() {});
All done! you can use your TreeView like this:
TreeView(
onChanged: (newNodes) {},
nodes: nodes,
and this is the result:
–
–
–
–
Maybe you can create your own renderObject, I try my best for make the indent widget look like your image provided. Keep in mind this is not Sliver widget therefore this can cost some perform an issue.
also I suggest you take a look this video if youe interest about renderObject in flutter.
https://www.youtube.com/watch?v=HqXNGawzSbY&t=7458s
main.dart
import 'package:flutter/material.dart';
import 'indent_widget.dart';
void main() {
runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage> {
Widget _buildColumn() {
return Row(
children: [
Checkbox(value: false, onChanged: (value) {}),
const Expanded(child: Text('text'))
@override
Widget build(BuildContext context) {
double tabSpace = 30;
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: IndentWidget(children: [
_buildColumn(),
IndentTab(
tabSpace: tabSpace,
child: IndentWidget(
children: [
IndentTab(
tabSpace: tabSpace,
child: IndentWidget(
children: [
_buildColumn(),
_buildColumn(),
IndentTab(
tabSpace: tabSpace,
child: IndentWidget(
children: [
_buildColumn(),
_buildColumn(),
IndentTab(
tabSpace: tabSpace,
child: IndentWidget(
children: [
_buildColumn(),
_buildColumn(),
_buildColumn(),
_buildColumn(),
IndentTab(
tabSpace: tabSpace,
child: IndentWidget(
children: [
_buildColumn(),
_buildColumn(),
_buildColumn(),
_buildColumn(),
_buildColumn(),
_buildColumn(),
_buildColumn(),
_buildColumn(),
indent_widget.dart
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/rendering.dart';
class IndentWidget extends MultiChildRenderObjectWidget {
IndentWidget({super.key, super.children});
@override
RenderObject createRenderObject(BuildContext context) {
/// 1. entry point.
return RenderIndent();
/// provide information to RenderIndent;
class RenderIndentParentData extends ContainerBoxParentData<RenderBox> {
double? tabSpace;
class IndentTab extends ParentDataWidget<RenderIndentParentData> {
final double tabSpace;
const IndentTab({super.key, required this.tabSpace, required super.child});
@override
void applyParentData(RenderObject renderObject) {
final RenderIndentParentData parentData =
renderObject.parentData! as RenderIndentParentData;
if (parentData.tabSpace != tabSpace) {
parentData.tabSpace = tabSpace;
final targetObject = renderObject.parent;
if (targetObject is RenderObject) {
targetObject.markNeedsLayout();
@override
Type get debugTypicalAncestorWidgetClass => RenderIndentParentData;
class RenderIndent extends RenderBox
ContainerRenderObjectMixin<RenderBox, RenderIndentParentData>,
RenderBoxContainerDefaultsMixin<RenderBox, RenderIndentParentData> {
@override
void setupParentData(RenderBox child) {
if (child.parentData is! RenderIndentParentData) {
child.parentData = RenderIndentParentData();
Size _performLayout(BoxConstraints constraints, bool dry) {
RenderBox? child = firstChild;
double width = 0, height = 0;
while (child != null) {
final RenderIndentParentData childParentData =
child.parentData as RenderIndentParentData;
final double leftShift = childParentData.tabSpace ?? 0;
if (!dry) {
childParentData.offset = Offset(leftShift, height);
child.layout(BoxConstraints(maxWidth: constraints.maxWidth),
parentUsesSize: true);
height += child.size.height;
width = max(width, leftShift + child.size.width);
child = childParentData.nextSibling;
if (width > constraints.maxWidth) {
width = constraints.maxWidth;
return Size(width, height);
@override
void performLayout() {
size = _performLayout(constraints, false);
@override
Size computeDryLayout(BoxConstraints constraints) {
return _performLayout(constraints, true);
@override
void paint(PaintingContext context, Offset offset) {
defaultPaint(context, offset);
@override
bool hitTestChildren(BoxHitTestResult result, {required Offset position}) {
return defaultHitTestChildren(result, position: position);
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
