Im having issues with laying out this treesliver widget. I want the nodes to all end in the same position horizontally but start with an indent based on where they are in the tree.
All the icons should be in the red box.
Thought I could achieve this with regular row behaviour but seems not. For some reason the rows are not adapting in size. I tried setting a sizedbox over my rows to constraint them to a small width but that didnt have any effect either, the rows seems to always be exactly the width of the scrollview. I assume this is because of optimizations?
relevant code:
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: [
TreeSliver<PartLocator>(
tree: nodes,
controller: controller,
treeNodeBuilder: (context, node, _) {
final part = node.content as PartLocator;
final expanded = controller.isExpanded(node);
return Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(4),
onTap: () => controller.toggleNode(node),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
part.serialNumber ??
'No serial number for part ${part.id}',
),
if (node.children.isNotEmpty)
Icon(
expanded
? Icons.arrow_drop_up
: Icons.arrow_drop_down,
),
if (node.children.isEmpty) Icon(Icons.add, size: 15),
],
),
),
),
);
},
),
],
);
}
Does anyone know how I could achieve this result?
managed to fix it in a bit of a hacky way by adding a custom indentation and setting the default indentation to zero:
return Row(
children: [
SizedBox(width: node.depth == null ? 0 : node.depth! * 10),
Expanded(
child: //Original node widget
),
],
);