Flutter web：選擇時列表圖塊的背景顏色

Question

我正在嘗試使用 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),
      ),
    );
  }
}

它是 flutter web 項目的側面導航欄。我需要根據選擇更新 ListTile 背景顏色。 選擇后，它將被定向到具有相同側邊欄的另一個頁面，但所選的圖塊應該是彩色的。 有人可以給我一個解決方案/更新代碼嗎？

Answer 1

嘗試這個：

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

您還可以使用 selectedTileColor 為選定的一項設置背景顏色，並使用selectedTileColor更改selectedColor一項的文本和圖標顏色。