Flutter web：选择时列表图块的背景颜色

Question

I am trying to change the background color of a selected tile using a ListTile.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:righteous/pages/dashboard/screens/menu1/data1.dart';
import 'package:righteous/pages/dashboard/screens/menu2/data2.dart';
import '../pages/landing.dart';
class SideMenu extends StatelessWidget {
   SideMenu({
    Key? key,
  }) : super(key: key);
  int _selected = -1; // none selected index is -1
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            child: Image.asset("assets/icons/logo.png"),
          ),
          DrawerListTile(
            index: 0,
            selectedIndex: _selected,
            title: "Dashboard",
            svgSrc: "assets/icons/menu_dashbord.svg",
            press: () {
              Get.to(WelcomePage());
            },
          ),
          DrawerListTile(
            index: 1,
            selectedIndex: _selected,
            title: "Transaction",
            svgSrc: "assets/icons/menu_tran.svg",
            press: () {
              print(_selected);
              Get.to(Data1());
            },
          ),
          DrawerListTile(
            index: 2,
            selectedIndex: _selected,
            title: "Task",
            svgSrc: "assets/icons/menu_task.svg",
            press: () {
              Get.to(Data2());
            },
          ),
        ],
      ),
    );
  }
}

class DrawerListTile extends StatelessWidget {
  const DrawerListTile({
    Key? key,
    required this.title,
    required this.svgSrc,
    required this.press,
    required this.index,
    required this.selectedIndex,
  }) : super(key: key);

  final String title, svgSrc;
  final VoidCallback press;
  final int index, selectedIndex;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      selected: index == selectedIndex,
      selectedColor: Colors.green ,
      onTap: press,
      horizontalTitleGap: 0.0,
      title: Text(
        title,
        style: const TextStyle(color: Colors.black),
      ),
    );
  }
}

It is side navbar on a flutter web project.I need to update ListTile background color based on selection. Upon selection it will be directed to another page with the same sidebar but that selected tile should be colored. Can someone give me a solution/updated code?

Answer 1

Try this:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:righteous/pages/dashboard/screens/menu1/data1.dart';
import 'package:righteous/pages/dashboard/screens/menu2/data2.dart';
import '../pages/landing.dart';


  class SideMenu extends StatefulWidget {
  const SideMenu({Key key}) : super(key: key);

  @override
  State<SideMenu> createState() => _SideMenuState();
}

class _SideMenuState extends State<SideMenu> {
  int _selected = -1; // none selected index is -1
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            child: Image.asset("assets/icons/logo.png"),
          ),
          DrawerListTile(
            index: 0,
            selectedIndex: _selected,
            title: "Dashboard",
            svgSrc: "assets/icons/menu_dashbord.svg",
            press: () {
              setState(() {
                _selected = 0;
              });
              Get.to(WelcomePage());
            },
          ),
          DrawerListTile(
            index: 1,
            selectedIndex: _selected,
            title: "Transaction",
            svgSrc: "assets/icons/menu_tran.svg",
            press: () {
              setState(() {
                _selected = 1;
              });
              print(_selected);
              Get.to(Data1());
            },
          ),
          DrawerListTile(
            index: 2,
            selectedIndex: _selected,
            title: "Task",
            svgSrc: "assets/icons/menu_task.svg",
            press: () {
              setState(() {
                _selected = 2;
              });
              Get.to(Data2());
            },
          ),
        ],
      ),
    );
  }
}

class DrawerListTile extends StatelessWidget {
  const DrawerListTile({
    Key? key,
    // For selecting those three line once press "Command+D"
    required this.title,
    required this.svgSrc,
    required this.press, 
    required this.index, 
    required this.selectedIndex, 
  }) : super(key: key);

  final String title, svgSrc;
  final VoidCallback press;
  final int index, selectedIndex;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      selectedColor: Colors.white,
      selectedTileColor: Colors.blue,
      selected: index == selectedIndex,
      onTap: press,
      horizontalTitleGap: 0.0,
      // leading: SvgPicture.asset(
      //   svgSrc,
      //   color: Colors.white54,
      //   height: 16,
      // ),
      title: Text(
        title,
        style: const TextStyle(color: Colors.black),
      ),
    );
  }
}

also you can set background color for selected one with selectedTileColor and change text and icon color of selected one with selectedColor .