main.dart

import 'package:flutter/material.dart';

  Map<int, Color> color = {
    50: Color.fromRGBO(136, 14, 79, .1),
    100: Color.fromRGBO(136, 14, 79, .2),
    200: Color.fromRGBO(136, 14, 79, .3),
    300: Color.fromRGBO(136, 14, 79, .4),
    400: Color.fromRGBO(136, 14, 79, .5),
    500: Color.fromRGBO(136, 14, 79, .6),
    600: Color.fromRGBO(136, 14, 79, .7),
    700: Color.fromRGBO(136, 14, 79, .8),
    800: Color.fromRGBO(136, 14, 79, .9),
    900: Color.fromRGBO(136, 14, 79, 1),
  };

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Home(),
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: MaterialColor(0xFF21B38B, color),
          backgroundColor: Color(0xFFF3F2EA),
          indicatorColor: Color(0xFFFEBA00),
          dialogBackgroundColor: Color(0xFFF8F7F1),
          textSelectionColor: Color(0xFFC52A47),
          textTheme: TextTheme(
            subtitle: TextStyle(
                fontFamily: 'Myriad Pro', fontWeight: FontWeight.w300),
            display1: TextStyle(fontFamily: 'Myriad Pro'),
            display2: TextStyle(
              fontFamily: 'Soho',
              color: Colors.black,
            ),
            display3: TextStyle(
              fontFamily: 'Soho',
              color: Colors.black,
              fontWeight: FontWeight.bold,
              fontSize: 15,
            ),
          ),
        ),
      );
}
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // Properties & Variables needed

  int currentTab = 0; // to keep track of active tab index
  final List<Widget> screens = [
    Dashboard(),
    Goals(),
    History(),
    Settings(),
  ]; // to store nested tabs
  final PageStorageBucket bucket = PageStorageBucket();
  Widget currentScreen = Dashboard(); // Our first view in viewport

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageStorage(
        child: currentScreen,
        bucket: bucket,
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 80,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              MaterialButton(
                padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0),
                minWidth: 40,
                onPressed: () {
                  setState(() {
                    currentScreen = Dashboard();
                    currentTab = 0;
                  });
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.timeline,
                      color: currentTab == 0
                          ? Theme.of(context).textSelectionColor
                          : Colors.grey,
                    ),
                    Text(
                      'Dashboard',
                      style: TextStyle(
                        fontSize: 12.0,
                        color: currentTab == 0
                            ? Theme.of(context).textSelectionColor
                            : Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              MaterialButton(
                padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0),
                minWidth: 40,
                onPressed: () {
                  setState(() {
                    currentScreen = Goals();
                    currentTab = 1;
                  });
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.backspace,
                      color: currentTab == 1
                          ? Theme.of(context).textSelectionColor
                          : Colors.grey,
                    ),
                    Text(
                      'Goals',
                      style: TextStyle(
                        fontSize: 12.0,
                        color: currentTab == 1
                            ? Theme.of(context).textSelectionColor
                            : Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(
                    vertical: 14.0, horizontal: 12.0),
                child: FloatingActionButton(
                  child: Icon(
                    Icons.add,
                    size: 40.0,
                  ),
                  backgroundColor: Theme.of(context).primaryColor,
                  elevation: 0,
                  onPressed: (){},
                ),
              ),
              MaterialButton(
                padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0),
                minWidth: 40,
                onPressed: () {
                  setState(() {
                    currentScreen = History();
                    currentTab = 2;
                  });
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.equalizer,
                      color: currentTab == 2
                          ? Theme.of(context).textSelectionColor
                          : Colors.grey,
                    ),
                    Text(
                      'History',
                      style: TextStyle(
                        fontSize: 12.0,
                        color: currentTab == 2
                            ? Theme.of(context).textSelectionColor
                            : Colors.grey,
                      ),
                    ),
                  ],
                ),
              ),
              MaterialButton(
                padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 8.0),
                minWidth: 40,
                onPressed: () {
                  setState(() {
                    currentScreen = Settings();
                    currentTab = 3;
                  });
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.ac_unit,
                      color: currentTab == 3
                          ? Theme.of(context).textSelectionColor
                          : Colors.grey,
                    ),
                    Text(
                      'Settings',
                      style: TextStyle(
                        fontSize: 12.0,
                        color: currentTab == 3
                            ? Theme.of(context).textSelectionColor
                            : Colors.grey,
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
  
  class Settings extends StatefulWidget {
  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('History'),
      ),
    );
  }
}

  class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('History'),
      ),
    );
  }
} 

class Goals extends StatefulWidget {
  @override
  _GoalsState createState() => _GoalsState();
}

class _GoalsState extends State<Goals> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('History'),
      ),
    );
  }
}
  
  class History extends StatefulWidget {
  @override
  _HistoryState createState() => _HistoryState();
}

class _HistoryState extends State<History> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('History'),
      ),
    );
  }
}