Are you tired of starting your Flutter projects from scratch every time? Do you wish there was a way to jumpstart your app development with a solid foundation? If the answer is yes, then I got you covered! Welcome to the Flutter Boilerplate Repository, your solution to faster and more organized Flutter app development. From a clean and minimalistic starting point to feature-rich templates with login, sign-up, and navigation, I've designed these templates to adapt to your needs.
Table of Contents
So, let's roll up our sleeves and explore how these templates can simplify your Flutter journey.
Project Structure
The project follows a well-organized structure to promote maintainability and scalability:
📦lib
┗ 📂config
┗ 📂routes
┗ 📂themes
┗ 📂core
┣ 📂constants
┣ 📂usecases
┣ 📂utils
┗ 📂widgets
┗ 📂features
┗ 📂feature_example
┣ 📂data
┣ 📂domain
┗ 📂presentation
┣ 📂(state-manager)
┣ 📂pages
┗ 📂widgets
This file structure offers two key benefits: enhanced code reusability and streamlined debugging. The structured organization enables you to reuse essential code components efficiently. Moreover, it simplifies the debugging process by making it significantly easier to identify and address issues within the well-organized codebase.
Getting Started
Before we dive into the exciting details of using these Flutter boilerplate templates, let's get started with the essentials. In this section, I'll guide you through the initial setup process, ensuring that your development environment is ready for action. We'll cover setting up assets for your project and configuring the necessary dependencies to unlock the full potential of these templates.
Assets
This step is the easiest one. Begin by downloading the 'assets' folder from the repository and placing it in the root directory of your Flutter project. Inside this 'assets' folder, you'll find two important subdirectories: 'fonts' and 'images'.
Fonts : In the 'fonts' subdirectory, you can house custom font files that you want to use in your Flutter app. These fonts can be a key element of your app's visual identity, allowing you to create a unique and appealing user interface.
Images : The 'images' subdirectory is where you can store all the image assets required for your application. These images can be anything from icons and graphics to background images. Organizing your images in this folder ensures that they are easily accessible and can be efficiently utilized throughout your app.
Add the required code in your 'pubspec.yaml' file, to make use of your assets folder
assets:
- ./assets/images/
fonts:
- family: Manrope
fonts:
- asset: assets/fonts/Manrope-Regular.ttf
- asset: assets/fonts/Manrope-Medium.ttf
weight: 500
- asset: assets/fonts/Manrope-Bold.ttf
weight: 700
Dependencies
To harness the full potential of the Flutter Boilerplate Templates, we need to ensure that your project is equipped with the necessary dependencies. Don't worry, it's a straightforward process.
Open your project's pubspec.yaml file, which serves as the configuration file for your Flutter app's dependencies. You'll want to add the following essential packages to the list of dependencies:
Required Packages :
- go_router
- if your app needs internet connection, you can download connectivity_plus
Boilerplate Examples
In the Flutter Boilerplate Repository, I provide four distinct boilerplate templates, each designed to cater to various application requirements. These templates provide you with a starting point for your Flutter app, tailored to specific scenarios. Let's explore each one in detail:
No Login-Sign Up or Navbar
Features : This minimalist template provides a clean starting point for your app. It excludes login, sign-up, and bottom navigation bar components, making it ideal for projects that require a simple and uncluttered interface.
Use Case : Choose this template when you need a basic Flutter project structure without the complexity of user authentication or navigation. It's a blank canvas for you to build upon.
Bottom Navbar Only
Features : This template includes a bottom navigation bar for easy app navigation. It excludes login and sign-up components, making it suitable for projects where navigation is a primary focus.
Use Case : If your app requires a bottom navigation bar but doesn't need user authentication, this template provides a starting point for adding various content sections.
Login-Sign Up without Navbar
Features : In this template, I've added comprehensive login and sign-up features, but there's no bottom navigation bar. It's equipped with Bloc-based state management for responsive user input handling.
Use Case : Choose this template when you need user authentication features in your app but prefer a simpler navigation structure without a bottom navbar.
Extra Required Packages :
Login-Sign Up with Navbar
Features : This advanced template combines login and sign-up functionalities with a user-friendly bottom navigation bar. It leverages Bloc state management for responsive UI interactions.
Use Case : When your app requires both user authentication features and a convenient navigation system, this template offers a solid foundation for building complex and engaging applications.
Extra Required Packages :
Each of these boilerplate examples serves as a starting point for your Flutter project, saving you valuable development time and providing a structure that aligns with your specific application needs. Choose the one that best matches your project's requirements, and let's get started building your Flutter app!
Thank you for joining me on this journey through my Flutter Repository. I hope you found these Boilerplates insightful and useful for your own development endeavors.
If you enjoyed this article and want to stay connected, feel free to connect with me on LinkedIn.
If you'd like to dive deeper into the code and contribute to the project, visit the repository on GitHub.
Was this guide helpful? Consider buying me a coffee!☕️ Your contribution goes a long way in fuelling future content and projects. Buy Me a Coffee.
Farewell for now, and until we meet again in the world of Flutter development!
Top comments (2)
Thank you, Thanasis. I will continue to follow you and I hope that someday we can chat about flutter. I am kind of new to flutter only spending about 8 months with it. I have forgotten more than I have learned about it. Your article has helped me understand how to set up a Login with bottom navigation much better. I appreciate your efforts.
Thank you for your thoughtful comment Michael! I'm delighted to hear that my article on Flutter has been beneficial for you. Your encouragement means a lot, and I'm always here to help with any Flutter-related discussions or questions you may have. Happy coding my friend!