Cover image for Flask Dashboard - Material Design

Flask Dashboard - Material Design

sm0ke profile image Sm0ke ・4 min read

Hello coders,

This article presents a simple Flask Dashboard starter coded on top of a beautiful Material Dashboard design released under the MIT license by Creative-Tim.

The project is actively versioned and supported via Github and Discord and being a tested starter it might help you to start fast a new dashboard project.
Thanks for reading!

Project Links

Flask Dashboard Material - Maps page

Material Dashboard - UI Kit

Vendor Notes (Creative-Tim) - Material Dashboard is a free Material Bootstrap 4 Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap 4 framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.

Material Dashboard makes use of light, surface, and movement. The general layout resembles sheets of paper following multiple different layers so that the depth and order are obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

Design Links

What is Flask

Intro for newcomers - Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. Classified as a microframework, Flask is written in Python and it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

Flask can be used for a wide range of apps, from super simple one-page websites to complex eCommerce solutions or API servers. Here are some nice Flask freebies

Dashboard Features

The starter uses a simple, standardized codebase that aims to be simple and easy to extend by many developers, despite their skills level - Features:

  • UI-ready, Jinja2 templating
  • Modular design with Blueprints
  • SQLite/PostgreSQL databases, ORM, Alembic for migrations
  • Session-based authentication via Flask-Login
  • Deployment scripts: Docker, Gunicorn / Nginx, Heroku

Being a super simple starter, anyone with basic programming and Flask knowledge can add more features with ease. Let's say a few words about the codebase:

App Codebase

Starter uses a simple codebase with two Blueprints, with a structure presented below:

   |-- app/               # Implements app logic
   |    |-- base/         # Base Blueprint - handles Login
   |    |-- home/         # Home Blueprint - serve UI pages
   |    |
   |   __init__.py        # Initialize the app
   |-- requirements.txt   # Development modules 
   |-- .env               # Inject Configuration
   |-- config.py          # Set up the app
   |-- run.py             # Start the app - WSGI gateway

How to build the app

The first step is to download the code locally. We can use the GIT command tool (recommended way) or just download the ZIP archive from Github. After we get the code, the next step is to install the modules using PIP, the package installer.

For full instructions, please follow the information saved in the README file or access the reference documentation - Flask Boilerplate Dashboard Docs

$ # Get the code
$ git clone https://github.com/app-generator/flask-material-dashboard.git
$ cd flask-material-dashboard
$ # Virtualenv modules installation
$ virtualenv --no-site-packages env
$ source env/bin/activate
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
$ # Set the FLASK_APP environment variable
$ export FLASK_APP=run.py
$ # Start the application (development mode)
$ flask run
$ # Access the dashboard in browser:

By default, the app is not provided with default users, and to unlock the private pages we need to register a new user first.

Flask Dashboard Material - Login screen.

Flask Dashboard Material - User profile

Flask Dashboard Material - User profile page.

App Support

As mentioned, the starter is actively supported and versioned by the AppSeed core team. The app will be updated if the UI kit provider (Creative-Tim) pushes a release or the reference codebase is updated (bug-fixes or improvements).

  • Support via Github - in case someone finds a bug
  • Support via Discord - 24/7 LIVE service

Thanks for reading! Let me know your thoughts in the comments.

Posted on by:

sm0ke profile



#Automation, my favorite programming language


markdown guide