Question 244643 in Flutter Question posted in
The official Flutter documentation can be found here.

how to Switching from one bottomnavigationitem to another in flutter

im using bottom navigation for my app. in this i need to move one bottomnavigationitem to another while clicking the button.In this below image, Home is first screen here i’m having a button by clicking this move next bottomnavigation screen

Home -> Business &
Home -> School

enter image description here

Tags:

2

Answers


  1. 0

    This can be achieved using pageView and PageController.

    Custom Page:

    class CustomPage extends StatelessWidget {
  final VoidCallback onPressed;
  final Color color;
  final String buttonText;

  const CustomPage({
    super.key,
    required this.onPressed,
    required this.color,
    required this.buttonText,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      color: color,
      alignment: Alignment.center,
      child: MaterialButton(
        onPressed: onPressed,
        child: Text(buttonText),
      ),
    );
  }
}

    Main Page:

    class StackOverFlow extends StatefulWidget {
  const StackOverFlow({super.key});

  @override
  State<StackOverFlow> createState() => _StackOverFlowState();
}

class _StackOverFlowState extends State<StackOverFlow> {
  final PageController controller = PageController();

  int kSelectedPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: PageView(
        physics: const NeverScrollableScrollPhysics(),
        controller: controller, //page controller
        onPageChanged: (index){
          setState(() {
            kSelectedPage = index;
          });
        },
        children: [
          CustomPage(
            onPressed: (){
              controller.jumpToPage(1);
            },
            color: Colors.green,
            buttonText: "Jump to Business Page",
          ),
          CustomPage(
            onPressed: (){
              controller.jumpToPage(2);
            },
            color: Colors.yellow,
            buttonText: "Jump to School Page",
          ),
          CustomPage(
            onPressed: (){
              controller.jumpToPage(0);
            },
            color: Colors.cyan,
            buttonText: "Jump to Home Page",
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: kSelectedPage,
        onTap: (index){
          setState(() {
            kSelectedPage = index;
          });
          controller.jumpToPage(index);
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home),label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.business),label: "Business"),
          BottomNavigationBarItem(icon: Icon(Icons.school),label: "School"),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    As per my knowledge and understanding, this is what you’ve been looking for. It’s a bottom navigation bar linked with their respective page (The page has buttons). So, the bottom navigation changes using the bottom tab & also using their page. I did optimization, the whole source code in under 100 lines. Feel free to provide acknowledgement in the comment section.

    import "package:flutter/material.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(title: "My App", home: HomePage());
  }
}

List<int> indexesList = <int>[0, 1, 2];
List<IconData> iconsList = <IconData>[Icons.home, Icons.business, Icons.school];
List<String> stringsList = <String>["Home", "Business", "School"];

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        items: List<BottomNavigationBarItem>.generate(
          indexesList.length,
          (int index) => BottomNavigationBarItem(
            icon: Icon(iconsList[index]),
            label: stringsList[index],
          ),
        ),
        onTap: indexChange,
      ),
      body: TabPage(index: currentIndex, callBack: indexChange),
    );
  }

  void indexChange(int value) {
    currentIndex = value;
    setState(() {});
    return;
  }
}

class TabPage extends StatelessWidget {
  const TabPage({required this.index, required this.callBack, super.key});
  final int index;
  final Function(int) callBack;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          if (index == 0)
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[buttom(1), buttom(2)],
            )
          else if (index == 1)
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[buttom(0), buttom(2)],
            )
          else if (index == 2)
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[buttom(0), buttom(1)],
            )
          else
            const SizedBox(),
        ],
      ),
    );
  }

  Widget buttom(int toIndexindex) {
    return ElevatedButton(
      onPressed: () => callBack(indexesList[toIndexindex]),
      child: Text("Navigate to ${stringsList[toIndexindex]}"),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search