How to make Ink effect fill all the space in a BottomNavigationBarItem - flutter

Question

I'm making a simple Flutter app with a BottomNavigationBar and the label in my BottomNavigationBarItem exceeds the ink effect created when I tap on it . For some reason, it seems to be covering the icon only and not the label as well.
How can I change this behavior to accommodate the label as well? I would also prefer to have a more rectangular shape for the ink reaction.
Edit:
My code for the navigation bar
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.blue[900],
unselectedItemColor: Colors.black87,
onTap: onTabTapped,
showUnselectedLabels: true,
currentIndex: _currentIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.collections),
title: Text('Collections'),
),
BottomNavigationBarItem(
icon: Icon(Icons.phone),
title: Text('Recent'),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_horiz),
title: Text('More'),
),
],
),
Current Behavior
Expected Behavior

Answer 1

After a few tries I figured that changing splashFactory could do the trick.
MaterialApp(
theme: ThemeData(
splashFactory: InkRipple.splashFactory,
),
)

Answer 2

After fiddling around with the flutter standard library, I now realised that BottomNavigationBarItem isn't a widget, but a container class to encapsulate the information that BottomNavigationBar need for its items.
Unfortunately, you will need to override BottomNavigationBar and create your own CustomBottomNavigationBar to do what you want.
The good news is that this is incredibly easy, since you only have to change one line of code. :)
I copied the code from $FLUTTER_HOME/packages/flutter/lib/src/material/bottom_navigation_bar.dart and made only one adjustment: at line 480, I changed InkResponse to InkWell and now it works as you wished.
With InkResponse:
With InkWell:
I suggest you to create an override folder in your project with the overridden classes, this is how I do it (I have overridden the default bottom sheet class):
Then, you can just import your overridden classes like this:
import 'package:your_project/widgets/override/bottom_navigation_bar.dart' as BottomNavigationBarOverride;
And use it like so:
bottomNavigationBar: BottomNavigationBarOverride.BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedItemColor: Colors.blue[900],
unselectedItemColor: Colors.black87,
onTap: onTabTapped,
showUnselectedLabels: true,
currentIndex: _currentIndex,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.collections),
title: Text('Collections'),
),
BottomNavigationBarItem(
icon: Icon(Icons.phone),
title: Text('Recent'),
),
BottomNavigationBarItem(
icon: Icon(Icons.more_horiz),
title: Text('More'),
),
],
),
Old response
If you provide more code, I could help you out more.
Judging by the picture that you provided, this is intended behavior as bottom navigation itens aren't intended to be large. They are intend to be swift and clean as the material spec suggests:
If you intend to make only one "option", I suggest that you change your widget to a FlatButton. But be warned, this is against the spec as, for usability purposes, bottom navigation itens should contain at least 3 options and at max 5 options.