How to use or set "on Tap" for Bottomnavigationbar

0

I am really new at flutter. I need a tap on bottomnavigationBar which will open a new page. But where should I use onTap? On Top (body) I have an other Navigation(Tabbarview). Why I dont have an "onTap" inside the BottomnavigationBar

bottomNavigationBar: SnakeNavigationBar(
          style: SnakeBarStyle.floating,
          backgroundColor: Color(0xffFFFFFF),
          snakeColor: Color(0xff3f51b5),
          currentIndex: _selectedItemPosition,
          onPositionChanged: (index) =>
              setState(() => _selectedItemPosition = index),
          padding: EdgeInsets.all(4),
          items: [
            new BottomNavigationBarItem(icon: Icon(Icons.home)),
            new BottomNavigationBarItem(icon: Icon(Icons.description)),
            new BottomNavigationBarItem(icon: Icon(Icons.people)),
            new BottomNavigationBarItem(icon: Icon(Icons.settings)),
            new BottomNavigationBarItem(icon: Icon(Icons.battery_unknown)),
          ],
        )));
flutter
dart
asked on Stack Overflow May 9, 2020 by Marc Lemieux • edited May 9, 2020 by Fathma Siddique

1 Answer

0

There's many ways to use a BottomNavigationBar, in your case, that's a library an uses "onPositionChanged" as "onTap" there, not only you can update your variable, but open change the current widget display on screen.

Here a full example to switch between widgets using a BottomNavigationBar:

import 'package:flutter/material.dart';

void main() => runApp(Demo());

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: DemoApp());
  }
}

class DemoApp extends StatefulWidget {
  @override
  _DemoAppState createState() => _DemoAppState();
}

class _DemoAppState extends State<DemoApp> {
  Widget _currentWidget = Container();
  var _currentIndex = 0;

  Widget _homeScreen() {
    return Container(
      color: Colors.green,
    );
  }

  Widget _settingsScreen() {
    return Container(
      color: Colors.red,
    );
  }

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

  void _loadScreen() {
    switch(_currentIndex) {
      case 0: return setState(() => _currentWidget = _homeScreen());
      case 1: return setState(() => _currentWidget = _settingsScreen());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _currentWidget,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() => _currentIndex = index);
          _loadScreen();
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text('Settings')),
        ],
      ),
    );
  }
}

The result of this is the following app:

answered on Stack Overflow May 9, 2020 by Mariano Zorrilla

User contributions licensed under CC BY-SA 3.0