Flutter - hover color of list tile not showing when sidenav gradient color is set (MacOS app)

Viewed 2560

I am trying to add a side navigation bar with gradient color and this works fine. However, I also set the hover color for list tile (Dashboard) in red but it's not showing when I hover.

I am guessing that the sidenav's background color is covering up the color of list tile when hovering. Any ideas on how to fix it? Thanks!

enter image description here

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(builders: {
          TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
          TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
        }),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Drawer(
          elevation: 0,
          child: Container(
            decoration: new BoxDecoration(
              border: Border(
                right: BorderSide(width: 0.0, color: Colors.transparent),
                left: BorderSide(width: 0.0, color: Colors.transparent),
              ),
              gradient: new LinearGradient(
                  colors: [
                    const Color(0xFFBE9CF9),
                    const Color(0xFF5378EE),
                  ],
                  begin: const FractionalOffset(0.0, 0.2),
                  end: const FractionalOffset(1.0, 1.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp),
            ),
            child: ListView(
              physics: NeverScrollableScrollPhysics(),
              children: <Widget>[
                Container(
                  width: double.infinity,
                  child: ListTile(
                    hoverColor: Colors.red,
                    enabled: true,
                    title: Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: Row(
                        children: [
                          Icon(
                            Icons.home,
                            color: Colors.white,
                            size: 22.0,
                          ),
                          SizedBox(width: 8),
                          Text(
                            "Dashboard",
                            style: TextStyle(color: Colors.white),
                          ),
                        ],
                      ),
                    ),
                    onTap: () {},
                  ),
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: Navigator(
            key: navigatorKey,
            initialRoute: '/',
            onGenerateRoute: (settings) {
              return MaterialPageRoute(
                  builder: (context) {
                    return Scaffold(
                      appBar: AppBar(
                        backgroundColor: Colors.transparent,
                        foregroundColor: Colors.black,
                        elevation: 0,
                        iconTheme: IconThemeData(color: Colors.black),
                        title: Text("Title",
                            style: TextStyle(color: Colors.black)),
                      ),
                      body: SafeArea(
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Text(""),
                        ),
                      ),
                    );
                  },
                  settings: settings);
            },
          ),
        ),
      ],
    );
  }
}
1 Answers

Wrap your ListTile with a Material widget:

Material(
    type: MaterialType.transparency,
    child: ListTile(...),
)

The way the hoverColor works - is render the hover on the first Material parent that it finds. The first one in your tree is the App itself and the gradient overlaps it. So you need to wrap your ListTile in another Material widget so it's the first one before the gradient.
That's a known behavior of the Flutter framework (search for Flutter Inkwell decoration problem which is similar)

Related