This is a skeleton project for Flutter that provides a basic structure and configuration to kickstart your Flutter application development.
This project is a starting point for a Flutter application that follows the simple app state management tutorial.
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
- Boilerplate code and folder structure for a Flutter project.
- Pre-configured dependencies and packages commonly used in Flutter development.
- Example code and comments to help you get started quickly.
- Getting Started
- Project Structure
- Coding Guidelines
- Usage
- Testing
- Contributing
- License
- Acknowledgments
These instructions will help you get a copy of the project up and running on your local machine for development and testing purposes.
Make sure you have Flutter installed on your machine. If you haven't installed Flutter yet, you can follow the official Flutter installation guide: Flutter Installation Guide
- Clone the repository to your local machine using the following command:
git clone https://github.com/sawal-timsina/flutter-skeleton.git
- Change into the project directory using the following command:
cd flutter-skeleton
- Fetch the dependencies using the following command:
flutter clean
flutter pub get
- Run the project using the following command:
flutter run
This will launch the app on your connected device or emulator.
The project structure follows a common Flutter project layout:
├── Android/
├── Assets/
├── Ios/
├── lib/
├── src/
── config/
── core/utils/
── models/
── pages/
── providers/
── widgets/
── atoms/
── molecules/
── organisms/
├── app.dart
├── injector.dart
├── environment
The assets directory houses images, fonts, and any other files you want to include with your application.
The assets/images directory
contains resolution-aware images.
The assets/translations directory contains translation files in json format. File name format : .json
Goto android/build.gradle and add this line inside dependency
classpath "com.google.gms:google-services:4.3.10"
Now, goto android/app/build.gradle and add this line
apply plugin: 'com.google.gms.google-services'
below apply plugin: 'com.android.application'
Goto ios?Runner/AppDelegate.swift and add this line on top
import Firebase
and inside application function of AppDelegate class before return
FirebaseApp.configure()
now goto ios/podfile add this line
pod 'Firebase/Auth'
below
target 'Runner' do
The src directory typically contains the main Dart code for your Flutter application.
The config directory is used to store configuration-related files for your application.
The core directory might contain core functionality or utilities that are used throughout the application. It could include files such as constants.dart, enums.dart, utils.dart, or any other shared code that doesn't fit into other specific categories.
The models directory is where you define the data models for your application. These models represent the structure and behavior of your data objects. For example, you might have files such as user.dart, product.dart, drop_down.dart, etc., representing different entities in your application.
The pages directory typically contains the different screens or pages of your application. Each page is often a separate Dart file and represents a unique UI component or view. For instance, you might have files like home_page.dart, splash_page.dart, profile_page.dart,login_page.dart and register_page.dartetc., defining the UI and behavior of each screen/page in your app.
The providers directory might include files related to state management or dependency injection. It is common to use packages like Provider, Riverpod, or Getx for state management and dependency injection in Flutter. You might have files such as auth_provider.dart, onboarding_provider.dart, router_provider.dart, etc. which provide and manage specific data or services throughout the app.
The widgets directory contains reusable UI components that can be used across multiple screens or views in your application, following the atomic structure pattern.
-
The atoms directory contains the smallest and simplest UI components in the atomic structure pattern. These components are typically reusable and represent basic visual elements, such as
buttons,icons,text_fieldsetc. Atoms are designed to be highly independent and self-contained, usually without any direct dependencies on other components. -
The molecules directory includes more complex UI components that are composed of one or more atoms. These components are considered a step above atoms in terms of complexity and functionality. Molecules represent reusable and relatively independent units of UI, such as a
form field with a label and an input, or acard component with an image and text. -
The organisms directory consists of even more complex UI components that are composed of atoms, molecules, and sometimes other organisms. Organisms represent complete, reusable sections or modules of UI that can function independently within an application. Examples could include a
header section with a logo,navigation and user profile, or asearch results list with filtering options.
This file is not within any specific folder. It likely serves as the entry point of your Flutter application, defining the main App widget and its configuration. It might set up MaterialApp, theme, routes or other app-level settings.
This file is not within any specific folder. It could be responsible for providing dependency injection or service location capabilities to the application. It might define a dependency injection container or a class responsible for registering and retrieving dependencies throughout the app.
Place the env files like config.dart, google-services.json, GoogleService.plist inside respective env/<dev|prod>
folder.
And you can run make set-env-dev | make set-env-prod in terminal to set the required environment files.
Additionally, utilize this article to enhance the quality of your code. This resource encompasses guidelines for naming conventions, code style and formatting, as well as other best practices.
You can start building your Flutter application on top of this skeleton project. Modify or replace the existing code to fit your application's requirements. The skeleton project provides an example structure and initial code to get you started quickly.
The test/ directory contains files and examples to help you write tests for your Flutter application. It is recommended to follow good testing practices and write unit, integration, and widget tests to ensure the stability and correctness of your code.
Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue on the GitHub repository. If you'd like to contribute code, you can fork the repository, create a new branch, make your changes, and submit a pull request.
Please make sure to follow the existing coding style and conventions in the project.
This project is licensed under the MIT License.
- This project was inspired by the need for a starter template for Flutter projects.
- Special thanks to the Flutter community for their valuable contributions and support.