Change the color of selected node
Good morning, I feel a bit sorry for asking this question but I have changed all the colors of the application theme and I could not find the parameter that changes the color of the selected node, I attach an image with a node in purple which I want to change
I hope you can help me.
Thank you.
I hope you have a good day, greetings.
Comments (7)
-
-
reporter I made these 2 options according to your recommendation, but none worked. :(
opcion 1
this was in the main
return GetMaterialApp( debugShowCheckedModeBanner: false, localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: [ const Locale('en', 'US'), const Locale('es', 'ES'), ], locale: Locale('es', 'ES'), title: 'S.D.A.T.S.S.', home: SplashPage(), initialBinding: SplashBinding(), getPages: AppPages.pages, /* theme: ThemeData().copyWith( colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.green), ), */ theme: ThemeData( primaryColor: Constants.colorPrincipal, primarySwatch: Colors.teal, canvasColor: Constants.colorPrincipalLigero, textTheme: Theme.of(context).textTheme.copyWith(caption: TextStyle(color: Colors.white,)), colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.green) ), );
option2
this was when the treeview was created
Theme( data: Theme.of(x!).copyWith(colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.green)), child: treeview.TreeView( physics: const ClampingScrollPhysics(), theme: _treeViewTheme, controller: controller.treeViewController!, allowParentSelect: false, supportParentDoubleTap: false, onExpansionChanged: controller.expandNodeHandler, onNodeTap: controller.onNodeTap, ),)
I hope I can solve this detail and not have to change the widget just for this, because I really like how this looks
-
In your option 1, I see you commented the snippet I provided. Did that work for you? The code looks like it should be working but it could be something wrong with the how it is being instantiated. e.g. using GetMaterialApp vs MaterialApp. I’ve used GetX but not with flutter_treeview.
One thing to try is to create a new project and import the treeview widget. Then try the use the theme as in my example. If that works, it will likely take some trial and error to figure what is going on.
The more code you can provide, the better I can help in determining what is wrong.
-
reporter This is the code that I used to do the tests, from here I passed it to my project, in this code the purple color does not change either
import 'package:flutter/material.dart'; import 'package:pruebas/pages/treeview.dart'; void main() => runApp(LoginApp()); class LoginApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Treeview Challenge', theme: ThemeData().copyWith( colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.brown), ), home: Treeviewpruebas(), ); } } import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_treeview/flutter_treeview.dart'; class Treeviewpruebas extends StatefulWidget { Treeviewpruebas({Key? key}) : super(key: key); @override _TreeviewpruebasState createState() => _TreeviewpruebasState(); } class _TreeviewpruebasState extends State<Treeviewpruebas> { String _selectedNode=""; List<Node> _nodes=[]; TreeViewController? _treeViewController; bool docsOpen = true; bool deepExpanded = true; ExpanderPosition _expanderPosition = ExpanderPosition.end; ExpanderType _expanderType = ExpanderType.arrow; ExpanderModifier _expanderModifier = ExpanderModifier.circleOutlined; bool _allowParentSelect = false; bool _supportParentDoubleTap = false; @override void initState() { _nodes = [ Node( label: 'documents', key: 'docs', expanded: docsOpen, icon: docsOpen ? Icons.folder_open : Icons.folder, children: [ Node( label: 'personal', key: 'd3', icon: Icons.input, children: [ Node( label: 'Poems.docx', key: 'pd1', icon: Icons.insert_drive_file, ), Node( label: 'Job Hunt', key: 'jh1', icon: Icons.input, children: [ Node( label: 'Resume.docx', key: 'jh1a', icon: Icons.insert_drive_file ), Node( label: 'Cover Letter.docx', key: 'jh1b', icon: Icons.insert_drive_file, ), ], ), ], ), Node( label: 'Inspection.docx', key: 'd1', // icon: NodeIcon.fromIconData(Icons.insert_drive_file), ), Node( label: 'Invoice.docx', key: 'd2', icon: Icons.insert_drive_file ), ], ), Node( label: 'MeetingReport.xls', key: 'mrxls', icon: Icons.insert_drive_file ), Node( label: 'MeetingReport.pdf', key: 'mrpdf', icon: Icons.insert_drive_file ), Node( label: 'Demo.zip', key: 'demo', icon: Icons.archive ), Node( label: 'empty folder', key: 'empty', parent: true, ), ]; _treeViewController = TreeViewController( children: _nodes, selectedKey: _selectedNode, ); super.initState(); } @override Widget build(BuildContext context) { TreeViewTheme _treeViewTheme = TreeViewTheme( expanderTheme: ExpanderThemeData( type: _expanderType, modifier: _expanderModifier, position: _expanderPosition, // color: Colors.grey.shade800, size: 25, color: Colors.red),//Color Icono labelStyle: TextStyle( fontSize: 20, letterSpacing: 0.3, color: Colors.deepOrange ), parentLabelStyle: TextStyle( fontSize: 16, letterSpacing: 0.1, fontWeight: FontWeight.w900, color: Colors.red, ), iconTheme: IconThemeData( size: 18, color: Colors.green, ), colorScheme: ColorScheme.dark(), ); ThemeData _parentTheme = Theme.of(context); return Scaffold( drawer: Drawer(child: Padding( padding: const EdgeInsets.all(10.0), child: Theme( data: _parentTheme.copyWith(hoverColor: Colors.red), child: Theme( data: Theme.of(context).copyWith(colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.green)), child:TreeView( controller: _treeViewController!, allowParentSelect: _allowParentSelect, supportParentDoubleTap: _supportParentDoubleTap, onExpansionChanged: (key, expanded) => _expandNode(key, expanded), onNodeTap: (key) { debugPrint('Selected: $key'); setState(() { _selectedNode = key; _treeViewController = _treeViewController?.copyWith(selectedKey: key); }); }, theme: _treeViewTheme, ), ) )), ), appBar: AppBar( title: Text("Pruebas"), elevation: 0, ), body: GestureDetector( onTap: () { FocusScope.of(context).requestFocus(FocusNode()); }, child: Container( padding: EdgeInsets.all(20), height: double.infinity, child: Column( children: <Widget>[ Container( height: 160, child: Column( children: <Widget>[ // _makeAllowParentSelect(), // _makeSupportParentDoubleTap(), ], ), ), Expanded( child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), ), padding: EdgeInsets.all(10), child: TreeView( controller: _treeViewController!, allowParentSelect: _allowParentSelect, supportParentDoubleTap: _supportParentDoubleTap, onNodeTap: (key) { debugPrint('Selected: $key'); setState(() { _selectedNode = key; _treeViewController = _treeViewController?.copyWith(selectedKey: key); }); }, theme: _treeViewTheme, ), ), ), ], ), ), ), ); } _expandNode(String key, bool expanded) { String msg = '${expanded ? "Expanded" : "Collapsed"}: $key'; debugPrint(msg); Node node = _treeViewController!.getNode(key)!; if (node != null) { List<Node> updated; if (key == 'docs') { updated = _treeViewController!.updateNode( key, node.copyWith( expanded: expanded, icon: expanded? Icons.folder_open : Icons.folder, ), ); } else { updated = _treeViewController!.updateNode( key, node.copyWith(expanded: expanded)); } setState(() { if (key == 'docs') docsOpen = expanded; _treeViewController = _treeViewController!.copyWith(children: updated); }); } } }
-
HI Eloid, were you able to get this resolved?
-
reporter yep, the problem was in this treeview parameter, colorScheme, obviously it overlapped the app's colorscheme.
-
- changed status to resolved
- Log in to comment
Sorry you are having issues with that. I am working on much better documentation that should be available soon. In the meantime, the highlight color comes from the ColorScheme of your application theme.
Below is an example of how you would change the highlight to green:
Hope this helps.