Flutter How to clickable the selected item in bottom navigation bar

Viewed 58

I'm trying to implement clickable the selected item in the Bottom navigation bar in my Flutter app. What I'm trying to achieve is when the user clicks any item in the Bottom navigation bar the selected item page contains the button which navigates to another inner page so if I want to try to click the select item in the Bottom navigation bar it shows me the same inner page, the app changes the selected tab inside the bottom navigation bar. but if I click again the select item tab it shows me the same inner page. Any help is appreciated.

Or Maybe it's clickable but the selected tab shows me the inner page only

Any help is appreciated.

My main.dart:-

import 'package:flutter/material.dart';
import 'MyPage.dart';
import 'MyPage2.dart';
import 'MyPage3.dart';
import 'package:double_back_to_close_app/double_back_to_close_app.dart';
import 'Notifications.dart';
import 'MyCustomPage.dart';

class MyApp extends StatefulWidget {

 @override
 _MyAppcreateState() => _MyApp();
}

class _MyApp extends State<MyApp> {
 late List<Widget> _pages;

 List<BottomNavigationBarItem> _items = [
  BottomNavigationBarItem(
  icon: Icon(Icons.home),
  label: "Home",
),
BottomNavigationBarItem(
  icon: Icon(Icons.messenger_rounded),
  label: "Messages",
),
BottomNavigationBarItem(
  icon: Icon(Icons.settings),
  label: "Settings",
)
];

late int _selectedPage;

@override
void initState() {
super.initState();
_selectedPage = 0;

_pages = [
  MyPage(
    count: 1,
  ),
  MyPage2(
    count: 2,
  ),
  MyPage3(
    count: 3,
  ),
 ];
 }
 @override
 Widget build(BuildContext context) {
  print(_selectedPage);
  return Scaffold(
    body: _pages[_selectedPage],
  bottomNavigationBar: BottomNavigationBar(
    items: _items,
    currentIndex: _selectedPage,
    onTap: (index) {

        setState(() {

          _selectedPage = index;
        });

    },
  )
);
}
}

MyPage.dart

import 'package:flutter/material.dart';
import 'MyCustomPage.dart';
import 'Notifications.dart';

class MyPage extends StatefulWidget {
 final count;
 MyPage({Key? key, this.count}) : super(key: key);


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


class _MyPage extends State<MyPage>{

 late int _selectedPage;

@override
Widget build(BuildContext context) {
return Navigator(
  onGenerateRoute: (RouteSettings settings) {
    return MaterialPageRoute(
      builder: (BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('page 01'),
          ),
          body: Center(
            child: RaisedButton(
              child: Text('my page1'),
              onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (ctx) => MyCustomPage()
                  )
                  );

              },
            ),
          ),
        );
      },
    );
  },
);
}
}

MyCustomPage.dart

import 'package:flutter/material.dart';

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

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


class _MyCustomPage extends State<MyCustomPage>{
 @override
 Widget build(BuildContext parentContext) {
 return Scaffold(
  appBar: AppBar(
    title: Text('custompage'),
  ),
  body: Column(
    children: [
      Expanded(
        child: Container(
          child: ListView.builder(
            itemCount: 15,
            itemBuilder: (context, index) {
              return Container(
                width: double.infinity,
                child: Card(
                  child: Center(
                    child: Text('My Custom Page'),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    ],
  ),
);
}
}

I add the image for a better understanding:-

my home page view

my home which contains a button that navigates to the inner page and in the bottom bar the selected item is the home icon

MycustomPage/inner page view

when I click on the button it shows me the inner page but you see the home icon is still selected and if I click on the selected home icon it shows the same inner page.

this is my issue what I want is when I navigate to the inner page the select tab must be unselectable and when I click on that selected tab it will show the first page which is MyPage.dart page, not the inner page(MyCustomPage.dart).

Please answer me if any further questions. Please comment to me if you don't understand it.

But please don't ignore this. I really want to do that task.

Any help is appreciated.

1 Answers

Till I understood this thing is not possible with default BottomNavigationBar maybe you can with custom. this is already a predefined index in the BottomNavigationBar constructor and set it to "0"

int currentIndex = 0,

BottomNavigationBar(
{Key? key,
required List<BottomNavigationBarItem> items,
ValueChanged<int>? onTap,
int currentIndex = 0,
double? elevation,
BottomNavigationBarType? type,
Color? fixedColor,
Color? backgroundColor,
double iconSize = 24.0,
Color? selectedItemColor,
Color? unselectedItemColor,
IconThemeData? selectedIconTheme,
IconThemeData? unselectedIconTheme,
double selectedFontSize = 14.0,
double unselectedFontSize = 12.0,
TextStyle? selectedLabelStyle,
TextStyle? unselectedLabelStyle,
bool? showSelectedLabels,
bool? showUnselectedLabels,
MouseCursor? mouseCursor,
bool? enableFeedback,
BottomNavigationBarLandscapeLayout? landscapeLayout}
)

BottomNavigationBar ref

Related