2

I am able to navigate to multiple different pages with visible bottom navigation bar on all pages but not able to switch between all of them so how can I switch between tabs with bottom bar being there in all pages

I got till here using this Answer but not able to make it work i.e to switch between bottom navigation tabs...

in short I want to add view for my message tab i.e second tab and move to it also without losing my bottom navigation bar for every page i navigate to...

so far my code,

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.orange,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.call), label: 'Call'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: 'Message'),
        ],
      ),
      body: Navigator(
        onGenerateRoute: (settings) {
          Widget page = Page1();
          if (settings.name == 'page2') page = Page2();
          return MaterialPageRoute(builder: (_) => page);
        },
      ),
    );
  }
}

// 1st Page:

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page1')),
      body: Center(
        child: RaisedButton(
          onPressed: () => Navigator.pushNamed(context, 'page2'),
          child: Text('Go to Page2'),
        ),
      ),
    );
  }
}

// 2nd Page:

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: Text('Page2')));
}
Mithson
  • 1,554
  • 13
  • 33

1 Answers1

4

Try like this:

class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int activeIndex = 0;
  void changeActivePage(int index) {
    setState(() {
      activeIndex = index;
    });
  }

  List<Widget> pages = [];

  @override
  void initState() {
    pages = [
      Page1(() => changeActivePage(2)),
      Page2(),
      Page3(),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              IconButton(onPressed: () => changeActivePage(0), icon: Icon(Icons.call)),
              IconButton(onPressed: () => changeActivePage(1), icon: Icon(Icons.message)),
            ],
          ),
        ),
        body: pages[activeIndex]);
  }
}

// 1st Page:

class Page1 extends StatelessWidget {
  final Function callback;

  const Page1(this.callback);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page1')),
      body: Center(
        child: RaisedButton(
          onPressed: () => callback(),
          child: Text('Go to Page3'),
        ),
      ),
    );
  }
}

// 2nd Page:

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) =>
      Scaffold(appBar: AppBar(title: Text('Page2')));
}

// 3rd Page:

class Page3 extends StatelessWidget {
  const Page3();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page3')),
      body: Center(child: Text('Page3')),
    );
  }
}
Ante Bule
  • 1,834
  • 1
  • 2
  • 8
  • 1
    thanks for your suggestion but I want to navigate to some another page say page3 which is in first tab while also maintaining the bottom tab bar how thats possible that is my question like having having multiple navigators in bottom navigation bar – Mithson Feb 24 '22 at 10:42
  • 1
    Ok I edited my solution, it should be what you expected now, check it out. – Ante Bule Feb 24 '22 at 11:17
  • hey but there's a catch when I return to previous tab it looses the state like if I navigated from page 3 of tab 1 to tab 2 and when again I return to tab 1 it is showing me tab1 page 1 rather it should show me page 3 as it was my previous stack of navigation – Mithson Feb 24 '22 at 15:22
  • Yeah, of course it works like that because every page gets recreated every time it gets navigated to. But if you want it to behave like that, how would you ever be able to return to page 1 then if you want page 1 to preserve page 3 opened? – Ante Bule Feb 25 '22 at 07:12