How to disable a button in the BottomNavigationBar flutter [duplicate] - flutter

Question

I have BottomNavigationBar with 5 items and also FloatingActionButton that should change 3rd item 'Photo'.
So I need if user press on central BottomNavigationBarItem 'Photo' it didn't affect switching to this tab.
How can I disable clicking on specific BottomNavigationBarItem?
And here is my code:
import 'package:flutter/material.dart';
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => new _MainPageState();
}
class PageInfoData {
final String title;
final IconData iconData;
const PageInfoData(this.title, this.iconData);
}
class _MainPageState extends State<MainPage> {
int _selectedIndex = 0;
static const List<PageInfoData> pageInfo = [
PageInfoData('History', Icons.swap_horiz),
PageInfoData('Download', Icons.file_download),
PageInfoData('Photo ', null),
PageInfoData('Upload', Icons.file_upload),
PageInfoData('Settings', Icons.settings)
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text("Menu"),
actions: <Widget>[IconButton(icon: Icon(Icons.search, color: Colors.white,),)],
),
body: Center(child: Text('Index$_selectedIndex: ${pageInfo[_selectedIndex].title}')),
backgroundColor: Colors.white,
bottomNavigationBar: BottomNavigationBar(
items: new List<BottomNavigationBarItem>.generate(pageInfo.length, (int index) {
PageInfoData curPageInfo = pageInfo[index];
return BottomNavigationBarItem(icon: Icon(curPageInfo.iconData, size: 30.0), title: Text(curPageInfo.title, style: TextStyle(fontSize: 9.0),));
}),
type: BottomNavigationBarType.fixed,
unselectedItemColor: const Color(0xff797979),
fixedColor: Theme.of(context).primaryColor,
backgroundColor: const Color(0xffe2e2e2),
currentIndex: _selectedIndex,
showUnselectedLabels: true,
onTap: _onItemTapped,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Color(0xffa2a5a4),
child: Icon(Icons.photo_camera, size: 40.0,),
onPressed: null),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
}
UPDATE:
Problem almost solved (thank you #ibhavikmakwana) by changing _onItemTapped function
void _onItemTapped(int index) {
if (index != 2) {
setState(() {
_selectedIndex = index;
});
}
}
But it solved not completely.
When I tap photo label it still show me a tap splash effect.
Can I disable a tap splash effect?

Answer 1

I had the same issue as yours. In my case, I just only want to apply it on bottomNavigationBar, because I have splash effect on another widget.
I fixed it using this code below:
bottomNavigationBar: Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: BottomNavigationBar(),
),

Answer 2

You can do something like below:
Your bottomNavigationBar
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
...
),
BottomNavigationBarItem(
...
),
BottomNavigationBarItem(
...
),
],
onTap: navigationTapped,
currentIndex: _page,
),
You can add the conditional check whether the page index match with the current index than don't do anything and return from that point.
Like page == index
Where, index is position of the BottomNavigationBarItem
void navigationTapped(int page) {
if (page == 1) {
return;
} else {
setState(() {
_selectedIndex = page;
});
}
}

Answer 3

To extend the correct answers given here, the correct way to disable splash effect, you should copy the existing app ThemeData and override only the splashColor and highlighColor properties.
Otherwise the other app ThemeData properties will be lost.
Wrap your widget with Theme widget and instead:
Theme(
data: ThemeData(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: YourWidget(),
);
Use:
Theme(
data: Theme.of(context).copyWith(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: YourWidget(),
);

Answer 4

Maybe you can try this to disable splash effect:
Change the splashColor or splashFactory in ThemeData to Colors.transparent.
Reference:
How to disable default Widget splash effect in Flutter?

Answer 5

To disable the splash effect in BottomNavigationBar, wrap it in a Theme widget, and override the values of splashColor and highlightColor with Colors.transparent.