Flutter: Mark ListTile as selected in drawer

Question

I want to mark the ListTile of the current page as selected but 2 days ago I'm looking for a general way to do it.

I saw examples like this one where you hardcode the tile ID and use a case to know which is the current Tile. My question is, what if I have, to exaggerate, 100 ListTiles? How do I change the selected attribute programmatically to the selected Tile? Or a more real case: I have a Drawer that changes shape in each release, so keeping a code with the hardcoded IDs is not useful. I hope you understand the idea.

I've been trying different solutions for days but none seems general enough to me.

Latanya

Answer 1

Simple create enum class like below.

enum DrawerSelection { home, favorites, settings}

Create enum object and pass pre-defined value if you want, in my case i pass home as selected ListTile item. Like below code.

class _MyHomePage extends State<MyHomePage> {
DrawerSelection _drawerSelection = DrawerSelection.home;

Then in ListTile use selected property and change enum onTap() like below code.

 ListTile(
              selected: _drawerSelection == DrawerSelection.home,
              title: Text('Home'),
              leading: Icon(Icons.home),
              onTap: () {
                Navigator.pop(context);
                setState(() {
                    _drawerSelection = DrawerSelection.home;
                    _currentWidget = MainWidget();                    
                    _appBarTitle = Text("Home");
                });
              },
            ),
 ListTile(
            selected: _drawerSelection == DrawerSelection.favorites,
            title: Text('Favorites'),
            leading: Icon(Icons.favorite),
            onTap: () {
              Navigator.pop(context);                 
              setState(() {
                  _drawerSelection = DrawerSelection.favorites;                 
                  _currentWidget = FavoritesWidget();                  
                  _appBarTitle = Text("Favorites");
              });
            },
          ),
ListTile(
            selected: _drawerSelection == DrawerSelection.settings,
            title: Text('Settings'),
            leading: Icon(Icons.settings),
            onTap: () {
              Navigator.pop(context);
              setState(() {
                  _drawerSelection = DrawerSelection.settings;                 
                  _currentWidget = SettingsWidget();
                  _appBarTitle = Text("Settings");
              });
            },
          ),

Strickman

Answer 2

i think it is just simple you can create a new class that have your data and the bool selected

    class Post {
      final bool selected;
      var data;

      Post({
        this.selected,
        this.data
      });
    }

now when you use LIstView.builder in the itemBuilder if list[index].selected is true then set the color to blue if not then let it white or whatever in the on tap or onpressed whatever you are you using save the last clicked index in a global variable(called savedIndex)-initialize it with (-1)- and change selected to true at the this list index,then if savedIndex wasnt equal -1 change list[savedIndex].selected=false.

---

global variable

int selectedIndex =-1;

and itemBuilder.

itemBuilder: (BuildContext _context, int i) {


        return GestureDetector(

                child:
                Container(
                  decoration: new BoxDecoration(
                    borderRadius: new BorderRadius.circular(16.0),
                    color:_list[index].selected? Colors.blue:colors.white,
                  ),
                  child: _buildRow(_list[index]),) ,
                onTap: () {
                   setState(){
                        if(savedIndex!=-1){
                         list[savedIndex].selected=false
                         }
                       _list[index].selected=true;
                       savedIndex=index;
                    }
                 }
              );

      }

Closure

Yes, I had thought of that solution, but I was thinking of something more at the production level. Where should this global variable be assigned? How to share Drawer between different screens? Should I use the ScopedModel class? – Latanya

#51660305 – Closure

the second answer is the best this one https://mcmap.net/q/276923/-persisting-appbar-drawer-across-all-pages-flutter – Closure

thats for the static drawer part as for any other question it seems i dont get what you really want – Closure

I've been looking at different approaches, and apparently the order from best to least option is: RxDart, scoped_model, InheritedWidget, StatefulWidget. I'm going to try the first two and as soon as I have something functional I'll put it as an answer. Thanks anyway! – Latanya