mrk
mrk

Reputation: 75

Unterstanding flutter Navigation

I am using Fluro but I think that doesn't matter in this case.

I have a BottomNavigationBar with two different icons. On each tab I want to use the navigator to go the other route. Is it possible to use the Navigator to set a route without any animation and back button?

Upvotes: 1

Views: 1848

Answers (1)

Hemanth Raj
Hemanth Raj

Reputation: 34829

Navigator is used only to navigate between two different routes (Say completely two different screens or views). BottomNavigationBar does not take us to new screen but is used to change the view of current route. You can achieve it many ways.

An example with PageView:

void main() {
  runApp(new MaterialApp(
    title: "Example",
    home: new BottomNav(),
  ));
}

class BottomNav extends StatefulWidget {
  @override
  _BottomNavState createState() => new _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  PageController _controller = new PageController();

  int _currentPage = 0;

  void _onBottomNavChange(int index) {
    _controller.animateToPage(index,
        duration: new Duration(milliseconds: 200), curve: Curves.ease);
    setState(() {
      _currentPage = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new PageView(controller: _controller, children: [
        new Container(color: Colors.red),
        new Container(color: Colors.blue),
      ]),
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
              icon: new Icon(Icons.arrow_left), title: new Text("Left")),
          new BottomNavigationBarItem(
              icon: new Icon(Icons.arrow_right), title: new Text("Right")),
        ],
        onTap: _onBottomNavChange,
        currentIndex: _currentPage,
      ),
    );
  }
}

You can take a look at another example here, which uses Stack for BottomNavigationBar actions.

Hope that helped!

Upvotes: 3

Related Questions