So I set up a bottom navigation bar to switch between 5 different pages split over 5 different files with the 6th acting as the actual navigation bar page. Problem is, I can't even get the pages to change using either routes or named routes.

This is the code I have within the main page.

import 'package:flutter/material.dart';
import 'package:fluttericon/typicons_icons.dart';
import 'package:luxview/Custom/Themes.dart';
import 'package:luxview/Pages/Messages.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  Widget _currentWidget = Container();

  @override
  void initState() {
    super.initState();
    _Screen();
  }

  void _Screen() {
    // Area where I tried to set up screen switching
    switch (_currentIndex) {
      case 0:
        Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const MessagePage()));
      //case 1:
      //  Themes
      //case 2:
      //  Plugins
      //case 3:
      //  Profile
      //case 4:
      //  Settings
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _currentWidget,
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() => _currentIndex = index);
            _Screen();
          },
          backgroundColor: bottomnavbar_bgc,
          selectedItemColor: bottomnavbar_selcol,
          unselectedItemColor: Colors.blue,
          type: BottomNavigationBarType.fixed,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.message),
              label: "Messages",
            ),
            BottomNavigationBarItem(icon: Icon(Icons.brush), label: "Themes"),
            BottomNavigationBarItem(
                icon: Icon(Typicons.puzzle), label: "Plugins"),
            BottomNavigationBarItem(
                icon: Icon(Icons.account_box), label: "Profile"),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), label: "Settings"),
          ]),
    );
  }
}

This is what I have in the messages.dart file in case it matters.

import 'package:flutter/material.dart';
import 'package:luxview/Custom/Themes.dart';

class MessagePage extends StatefulWidget {
  const MessagePage({super.key});
  @override
  _MessagePageState createState() => _MessagePageState();
}

class _MessagePageState extends State<MessagePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: universal_bgc,
    );
  }
}

CodePudding user response：

If you just want to update the pages.

class MainPage extends StatefulWidget {
  const MainPage({super.key});
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0; //keep track of current selected index.

  @override
  Widget build(BuildContext context) {
    Widget selectedWidget = Home();
    switch (_currentIndex) {
      case 0:
         selectedWidget = Home();
         break;
      case 1:
         selectedWidget = Page2();
         break;
      ...
    }
    return Scaffold(
      body: selectedWidget,
      bottomNavigationBar: BottomNavigationBar(
         currentIndex: _currentIndex,
         onTap: (index) {
          setState(() => _currentIndex = index);
         },
         ...
      ),
    );
  }
}