Flask Dashboard - Material Design

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. For newcomers, Flask is a lightweight web application framework written in Python. Sometimes classified as a microframework, Flask provides a lightweight codebase that can be easily extended to become an API, a simple web app, or a complex eCommerce platform.

Thanks for reading! - Content provided by App Generator.

• Flask Material Dashboard - product page
• Flask Material Dashboard - LIVE Demo

Material Dashboard - UI Kit

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.

What is Flask

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

• Flask App - IraDesign - MIT License, simple app
• Flask Pixel UI Kit - just another Flask freebie (MIT license)
• Flask Dashboard - Black Design - A simple dashboard, also free

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:

< PROJECT ROOT >
   |
   |-- 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: http://127.0.0.1:5000/

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 - User profile

Thanks for reading! For more resources, feel free to access:

• 👉 More Flask Dashboards crafted in Django, Flask, and React
• 👉 More Flask Apps - free & PAID