Skip to content

Provide ability to override NavigationBar indicator ink response overlay #138850

@TahaTesser

Description

@TahaTesser

Is there an existing issue for this?

Use case

Currently, there is no overlayColor property in the NavigationBar which should allow overriding ink response overlay.
This is typically found in other material widgets

For cases when you want override ink focus, hover and highlight effects, a Material State overlay can be used.

Take this example where we can set indicator color to be transparent but cannot override ink response overlay.

Code sample

expand to view the code sample
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        bottomNavigationBar: NavigationBarExample(),
      ),
    );
  }
}

class NavigationBarExample extends StatefulWidget {
  const NavigationBarExample({super.key});

  @override
  State<NavigationBarExample> createState() => _NavigationBarExampleState();
}

class _NavigationBarExampleState extends State<NavigationBarExample> {
  int index = 0;

  @override
  Widget build(BuildContext context) {
    return NavigationBar(
      elevation: 0,
      indicatorColor: Colors.transparent,
      selectedIndex: index,
      onDestinationSelected: (int index) {
        setState(() {
          this.index = index;
        });
      },
      destinations: const <Widget>[
        NavigationDestination(
          selectedIcon: Icon(Icons.home_filled),
          icon: Icon(Icons.home_outlined), label: 'Home'),
        NavigationDestination(
          selectedIcon: Icon(Icons.favorite),
          icon: Icon(Icons.favorite_outline), label: 'Favorites'),
      ],
    );
  }
}
Screen.Recording.2023-11-22.at.01.08.30.mov

Proposal

Provide an overlay color property for the indicator ink response

overlayColor: MaterialStatePropertyAll(Colors.transparent), should be able to override the default ink response overlay.

Screen.Recording.2023-11-22.at.01.10.51.mov

Metadata

Metadata

Assignees

Labels

Design Systems StudyIssues identified during the custom design system study.P2Important issues not at the top of the work listc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions