🍫 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 {
  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 {
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: [
            icon: Icon(FontAwesomeIcons.graduationCap, size: 20),
            title: Text('Topics')),
            icon: Icon(FontAwesomeIcons.bolt, size: 20),
            title: Text('About')),
            icon: Icon(FontAwesomeIcons.userCircle, size: 20),
            title: Text('Profile')),
      fixedColor: Colors.deepPurple[200],
      onTap: (int idx) {
        switch (idx) {
          case 0:
            // do nuttin
          case 1:
            Navigator.pushNamed(context, '/about');
          case 2:
            Navigator.pushNamed(context, '/profile');

Put it to use in a Scaffold.

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

// example usage
    bottomNavigationBar: AppBottomNav(),

Questions? Let's chat

Open Discord