🍫 Bottom Navigation Bar

Create a shared bottom navigation bar

About Screen

Create a basic screen.

file_type_dartlang about.dart 
import 'package:flutter/material.dart';

class AboutScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('about'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Text('About this app...'),
      ),
    );
  }
}

Export the Widgets

You can export all your screens together using the following pattern:

file_type_dartlang screens.dart 
export 'login.dart';
export 'topics.dart';
export 'quiz.dart';
export 'profile.dart';
export 'about.dart';

You can then use them in other project files like so: import 'screens/screens.dart';

Bottom Navigation

Use a BottomNavigationBar to move between screens.

file_type_dartlang bottom_nav.dart 
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class AppBottomNav extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
            icon: Icon(FontAwesomeIcons.graduationCap, size: 20),
            title: Text('Topics')),
        BottomNavigationBarItem(
            icon: Icon(FontAwesomeIcons.bolt, size: 20),
            title: Text('About')),
        BottomNavigationBarItem(
            icon: Icon(FontAwesomeIcons.userCircle, size: 20),
            title: Text('Profile')),
      ].toList(),
      fixedColor: Colors.deepPurple[200],
      onTap: (int idx) {
        switch (idx) {
          case 0:
            // do nuttin
            break;
          case 1:
            Navigator.pushNamed(context, '/about');
            break;
          case 2:
            Navigator.pushNamed(context, '/profile');
            break;
        }
      },
    );
  }
}

Put it to use in a Scaffold.

import 'package:quizapp/shared/bottom_nav.dart';

// example usage
Scaffold(
    bottomNavigationBar: AppBottomNav(),
)

Questions? Let's chat

Open Discord