Flutter change AppBottomNavigation body by tapping on button on another state

Question

I have an AppBottomNavigation for five different states. In the first state, HomeScreen, I have a button. By tapping on this button, the state is to be changed to the third element of the AppBottomNavigation.How exactly can I implement this? I have already tried several times to call the method "bottomTapped" with index 2 via ScannderDummy. Unfortunately without success.

app_bottom_navigation.dart

class AppBottomNavigation extends StatefulWidget {
  @override
  _AppBottomNavigationState createState() => _AppBottomNavigationState();
}

class _AppBottomNavigationState extends State<AppBottomNavigation> {
  int _selectedIndex = 0;
  List<dynamic> menuItems = [
    ...
  ];

  PageController pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );

  Widget buildPageView() {
    return PageView(
      controller: pageController,
      onPageChanged: (index) {
        pageChanged(index);
      },
      children: <Widget>[
        HomeScreen(),
        CategoryScreen(),
        ScannerScreen(),
        CategoryScreen(),
        ProfileSettingsScreen(),
      ],
    );
  }

  pageChanged(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  bottomTapped(int index) {
    setState(() {
      _selectedIndex = index;
      pageController.jumpToPage(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        showUnselectedLabels: true,
        unselectedItemColor: Colors.grey,
        type: BottomNavigationBarType.fixed,
        selectedLabelStyle: GoogleFonts.outfit(
          textStyle:
              TextStyle(height: 1.5, fontSize: 10, fontWeight: FontWeight.bold),
        ),
        unselectedLabelStyle: GoogleFonts.outfit(
          textStyle: TextStyle(
            height: 1.5,
            fontSize: 10,
          ),
        ),
        items: menuItems.map((i) {
          return BottomNavigationBarItem(
            icon: (i['icon']),
            activeIcon: (i['icon']),
            label: i['label'],
          );
        }).toList(),
        currentIndex: _selectedIndex,
        selectedItemColor: primaryColor,
        onTap: (index) {
          bottomTapped(index);
        },
      ),
      body: buildPageView(),
    );
  }
}

scanner_dummy.dart (Element from home_screen.dart)

class ScannerDummy extends StatelessWidget {
  final AppBottomNavigation bn = new AppBottomNavigation();

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {

      },
      child: Container(
          margin:
              EdgeInsets.only(top: 6, bottom: 28.0, left: 28.0, right: 28.0),
          padding: EdgeInsets.symmetric(
            horizontal: 16.0,
          ),
          height: 125,
          width: double.infinity,
          decoration: BoxDecoration(
            color: darkGrey,
            borderRadius: BorderRadius.all(Radius.circular(15)),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(
                LineIcons.retroCamera,
                color: Colors.white,
                size: 35.0,
              ),
              Text(
                'Artikel scannen & verkaufen',
                textAlign: TextAlign.right,
                style: GoogleFonts.outfit(
                    textStyle: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  height: 2,
                )),
              ),
            ],
          )),
    );
  }
}

Thank you very much for your help.

Sorry, I am not getting top level two methods. Can you simplify the 1st widget and include the snippet how you’ve used it. — Md. Yeasin Sheikh, Aug 29 '22 at 17:35
Hello, I edited the snippet. The first two methods were not necessary. I removed them completely. In my app_bottom_navigation.dart I use buildPageView to build the body. The body is one of the five Screens (HomeScreen, CategoryScreen, ScannerScreen, ...). When I tap on an element of the bottom Navigation it changes the body. Im my HomeScreen I included scanner_dummy.dart. When i tap on this widget, i want to show ScannerDummy() as body of my bottom nav. — Jeremy Brehe, Aug 29 '22 at 17:42
I still failed to get the snippet flow, But you like to control `AppBottomNavigation` nav from other widget, is it the actual issue ? — Md. Yeasin Sheikh, Aug 29 '22 at 18:03

score 0 · Answer 1 · answered Aug 29 '22 at 18:38

Play with this widget. I am using callback method.


class ItemB extends StatefulWidget {
  final VoidCallback callback;
  ItemB({Key? key, required this.callback}) : super(key: key);

  @override
  State<ItemB> createState() => _ItemBState();
}

class _ItemBState extends State<ItemB> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [ 
        Text("B"),
        ElevatedButton(
          onPressed: widget.callback,
          child: Text("switch Tab"),
        ),
      ],
    );
  }
}

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

  @override
  State<HomeWidgetX> createState() => _HomeWidgetXState();
}

class _HomeWidgetXState extends State<HomeWidgetX> {
  int currentTab = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: [
        Text("A"),
        ItemB(
          callback: () {
            setState(() {
              currentTab = 0;
            });
          },
        )
      ][currentTab]),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentTab,
        onTap: (value) {
          currentTab = value;
          setState(() {});
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.abc),
            label: "",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.ac_unit),
            label: "",
          ),
        ],
      ),
    );
  }
}

Flutter change AppBottomNavigation body by tapping on button on another state

1 Answers1