Flutter dashboard UI tutorial for beginners

abhishek

4 years ago

Categories: Flutter

Flutter dashboard UI tutorial for beginners

Flutter Dashboard :

Flutter Dashboard is a key aspect for any applications which provides the user necessary information regarding the functionality of the app.

Sometimes we provide analytics, images, live video’s and many other components in the dash board as its the very first screen and to provide maximum possible info at the first look.

Home screen is the base screen for every app so we need to provide the access to all screens available in the app we need to make sure there is a proper design too.

Flutter provides a single code base for both Android & iOS here we will be designing a dashboard with four screens.

In this tutorial we will be seeing the below example where we have four buttons which provides navigation to each of screen specified, you can also navigate to web pages or and other functionality outside the app too.

Flutter Dashboard Video Tutorial :

Project Structure :

This image depicts the project structure implementation for flutter dashboard.

main.dart

Main module is loaded with MaterialApp and home class is provided

main() {
  runApp(
      MaterialApp(
    home: MyApp(),
  ));
}

Declaring MyApp extending StatelessWidget and providing title and body

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DashBoard"),
      ),
      body: Center(),
    );
  }
}

Creating a button for the dashboard with height, width, color, textcolor….

Padding(
    padding: EdgeInsets.all(20.0),
    child: new MaterialButton(
      height: 100.0,
      minWidth: 150.0,
      color: Theme.of(context).primaryColor,
      textColor: Colors.white,
      child: new Text("Profile"),
      onPressed: () => {},
      splashColor: Colors.redAccent,
    )),

provide on pressed functionality for the button to move to next screen

onPressed: () => {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Profile()),
)
},

placing two button’s side by side i.e., horizontally

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Padding(
        padding: EdgeInsets.all(20.0),
        child: new MaterialButton(
          height: 100.0,
          minWidth: 150.0,
          color: Theme.of(context).primaryColor,
          textColor: Colors.white,
          child: new Text("Profile"),
          onPressed: () => {
          Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => Profile()),
          )
          },
          splashColor: Colors.redAccent,
        )),
    Padding(
        padding: EdgeInsets.all(20.0),
        child: new MaterialButton(
          height: 100.0,
          minWidth: 150.0,
          color: Theme.of(context).primaryColor,
          textColor: Colors.white,
          child: new Text("Menu"),
          onPressed: () => {
          Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => Menu()),
          )
          },
          splashColor: Colors.redAccent,
        )),
  ],
),

Full Code :

Providing the full source code for flutter dashboard implementation.

import 'package:flutter/material.dart';

import 'package:flutter_app/menu.dart';
import 'package:flutter_app/profile.dart';
import 'package:flutter_app/settings.dart';
import 'package:flutter_app/about.dart';

main() {
  runApp(
      MaterialApp(
    home: MyApp(),

  ));
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DashBoard"),
      ),
      body: Center(
          child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                  padding: EdgeInsets.all(20.0),
                  child: new MaterialButton(
                    height: 100.0,
                    minWidth: 150.0,
                    color: Theme.of(context).primaryColor,
                    textColor: Colors.white,
                    child: new Text("Profile"),
                    onPressed: () => {
                    Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Profile()),
                    )
                    },
                    splashColor: Colors.redAccent,
                  )),
              Padding(
                  padding: EdgeInsets.all(20.0),
                  child: new MaterialButton(
                    height: 100.0,
                    minWidth: 150.0,
                    color: Theme.of(context).primaryColor,
                    textColor: Colors.white,
                    child: new Text("Menu"),
                    onPressed: () => {
                    Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Menu()),
                    )
                    },
                    splashColor: Colors.redAccent,
                  )),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                  padding: EdgeInsets.all(20.0),
                  child: new MaterialButton(
                    height: 100.0,
                    minWidth: 150.0,
                    color: Theme.of(context).primaryColor,
                    textColor: Colors.white,
                    child: new Text("Settings"),
                    onPressed: () => {
                    Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => Settings()),
                    )
                    },
                    splashColor: Colors.redAccent,
                  )),
              Padding(
                  padding: EdgeInsets.all(20.0),
                  child: new MaterialButton(
                    height: 100.0,
                    minWidth: 150.0,
                    color: Theme.of(context).primaryColor,
                    textColor: Colors.white,
                    child: new Text("About"),
                    onPressed: () => {
                    Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => About()),
                    )
                    },
                    splashColor: Colors.redAccent,
                  )),
            ],
          ),

        ],
      )),
    );
  }
}

About.dart

Creating the about screen where we declare information about the app.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class About extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("About"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Dashboard'),
        ),
      ),
    );
  }
}

Menu.dart

This is the first screen of the app where we provide a button for dashboard screen navigation.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Menu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Menu"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Dashboard'),
        ),
      ),
    );
  }
}

Profile.dart

Creating a profile screen where we can provide user details.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Profile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Profile"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Dashboard'),
        ),
      ),
    );
  }
}

Settings.dart

Creating a settings screen for app.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Settings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Settings"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Dashboard'),
        ),
      ),
    );
  }
}

Flutter dashboard output :

The below screen depicts flutter dashboard app flow in android and iOS screens

If you have any query on this tutorial on flutter dashboard do let us know in the comment section below.If you like this tutorial do like and share for more interesting updates.