How to Navigate to screens using Flutter-CodePudding

I have created some screens in Flutter, Also i created Bottom navigation for them, so i can click and go to the respective screen here in.

amongst the screens Are :

 - Home Screen
 - Accounts Screen
 - Settings screen

Now i Created the screens in respective order like so :

Home Screen

import 'package:flutter/material.dart';

class BaseScreen extends StatelessWidget {
  const BaseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "Welcome to Home Screen",
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

Settings Screen

import 'package:flutter/material.dart';

class BaseScreen extends StatelessWidget {
  const BaseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "Welcome to Settings Screen",
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

Account Details Screen

import 'package:flutter/material.dart';

class BaseScreen extends StatelessWidget {
  const BaseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          "Welcome to Acc Details Screen",
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

Then the screen for Bottom navigator to navigate to the screens looks like this :

import 'package:flutter/material.dart';
import 'package:lapp4/accounts_screen.dart';
import 'package:lapp4/base_screen.dart';
import 'package:lapp4/settings_screen.dart';

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

  @override
  State<BottomNav> createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  int _selectedIndex = 0;
  static const List<Widget> _widgetOptions = <Widget>[
    BaseScreen(),
    Settings(),
    Acc_Data()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.green,
        unselectedItemColor: Colors.grey,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), label: "Settings"),
          BottomNavigationBarItem(icon: Icon(Icons.money), label: "Accounts"),
        ],
        type: BottomNavigationBarType.shifting,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        elevation: 5,
      ),
    );
  }
}

But the problem is, it does not navigate to the respective screens. I am quite new to this, so I need help here of some sort.

Please How do I go about something like this?

CodePudding user response：

Add a body to your Scaffold and depending on the current index you show the Widget in your list:

body:  _widgetOptions.elementAt(_selectedIndex),

CodePudding user response：

Add a body to the Scaffold and depending on the current index you will display the Widget along with the IndexedStack in your list. In IndexedStack, widgets are built once:

body:  IndexedStack(children:_widgetOptions,index:_selectedIndex),