Change the color of selected node

[Eloid Ramses Sauceda Cebreros]

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.

[Kevin Armstrong]

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:

MaterialApp(
  theme: ThemeData().copyWith(
    colorScheme: ThemeData().colorScheme.copyWith(primary: Colors.green),
  ),
);

Hope this helps.

[Eloid Ramses Sauceda Cebreros]

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

[Kevin Armstrong]

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.

[Eloid Ramses Sauceda Cebreros]

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);
      });
    }
  }


}

‌

‌

‌

[Kevin Armstrong]

HI Eloid, were you able to get this resolved?

[Eloid Ramses Sauceda Cebreros]

yep, the problem was in this treeview parameter, colorScheme, obviously it overlapped the app's colorscheme.