Implement TreeNodeView with selection functionality

This commit adds the TreeNodeView class, a StatelessWidget responsible for rendering individual nodes in the skill tree.

Features:
- Displays the node ID in the view.
- Uses the Provider package to interact with the SkillTreeViewModel.
- Includes an onTap method to toggle node selection state.
- Updates the UI to reflect the selected state by changing the background color.

The TreeNodeView is designed to work in conjunction with SkillTreeViewModel to manage node selection states.
This commit is contained in:
hunteraraujo
2023-09-10 14:33:42 -07:00
parent d6b0894c6b
commit 90e73b83a1

View File

@@ -0,0 +1,32 @@
import 'package:auto_gpt_flutter_client/viewmodels/skill_tree_viewmodel.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class TreeNodeView extends StatelessWidget {
final int nodeId;
final bool selected;
TreeNodeView({required this.nodeId, this.selected = false});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
print('Node $nodeId clicked');
Provider.of<SkillTreeViewModel>(context, listen: false)
.toggleNodeSelection(nodeId);
},
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: selected ? Colors.red : Colors.white,
borderRadius: BorderRadius.circular(4),
boxShadow: [
BoxShadow(color: Colors.red, spreadRadius: 1),
],
),
child: Text('Node $nodeId'),
),
);
}
}