mirror of
https://github.com/aljazceru/Auto-GPT.git
synced 2025-12-18 14:34:23 +01:00
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:
32
frontend/lib/views/skill_tree/tree_node_view.dart
Normal file
32
frontend/lib/views/skill_tree/tree_node_view.dart
Normal 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'),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user