This tool is a collection of Flutter boilerplate codes, including custom widgets and pages. You can use the layout for idea of a page or use component for a small feature in a page in your Flutter project.
UI Boilerplates and Snippets
- Snippets are divided into topics and groups such as Social Network, Button, AppBar.
- Tap a title to list all snippets within a topic or group.
Note: This is an ongoing project, more templates will be added over time.
- See also: Best Resources to Learn Flutter & Dart
Flutter Boilerplates and Starter Kits
Following are my recommended boilerplate or starter kit to kick-start a new Flutter project:
This is a Flutter boilerplate project with MobX and Provider, it contains the minimal implementation required to create a new library or project. The boilerplate supports both web and mobile. you need to clone the appropriate branches.
- MobX (to connect the reactive data of your application with the UI)
- Provider (State Management)
- Code Generation
- User Notifications
- Dependency Injection
- Dark Theme Support
- Multilingual Support
- Provider example
This starter kit uses BLoC Pattern.
- Centralized place to manage your application’s colors/branding (
lib > utils > styles)
- Centralized place to manage your application’s constants/url/keys (
lib > utils > constants)
- BLoC Pattern when fetching and posting data over the internet.
- Logically & Naturally organized files & folders.
- api – hold all your common api concerns (ApiBaseHelper, ApiResponse, AppException)
- blocs – hold all your blocs (Streams – provide data to the views. relate to controllers in Laravel)
- models – hold all your models (relate to models in Laravel)
- repositories – hold all your repositories (CRUD operations)
- responses – hold all your responses
- utils – hold all your utility files
- views – hold all your views/ui (relate to views in Laravel)
- partials – hold all your commonly used widgets (ApiError, Loading)
- Google AdMob ready
- Firebase FCM ready
This boilerplate was made with the purpose of easy API integration and using clean architecture (MVVM) in mind. It has a Base Response Model which can be modified to suit different API structures. The networking layer consists of following features: Network connection check, Common loader, Common Error and Success Message, and Prettyfied Logs for easy debugging.
- Ready to use
- MVVM based
- Network services
- Using Providers
- Assets and custom Fonts
- Embedded custom URL screen
Flutter Snippets Extensions
If you are using Visual Studio or Android Studio to make Flutter applications, you need to install these extensions to effortlessly create blocks of codes.
Awesome Flutter Snippets
Awesome Flutter Snippets is a Visual Studio Code extension which can be download here. It is a collection of commonly used Flutter classes and methods. It increases your speed of development by eliminating most of the boilerplate code associated with creating a widget. Widgets such as
SingleChildScrollView can be created by typing the shortcut
This is an Intellij & Android Studio plugin that adds Live Templates to your IDE saving time writing the boilerplate in Flutter. The official plugin page list all available shortcuts to create respective widgets.