🎉Made by us🎉. Product StudentHub is a university market place to connect high-skilled student and company on a real-world project. ✅ CH PLAY: https://play.google.com/store/apps/details?id=com.bebaoboyjonnathan.studenthub&hl=en-US&ah=uCvA9Cv96TqOEe48EEt4sB3U3fk
Now, lets dive into the lib folder which has the main code for the application.
1- constants - All the application level constants are defined in this directory with-in their respective files. This directory contains the constants for `theme`, `dimentions`, `api endpoints`, `preferences` and `strings`.
2- data - Contains the data layer of your project, includes directories for local, network and shared pref/cache.
3- stores - Contains store(s) for state-management of your application, to connect the reactive data of your application with the UI.
4- ui — Contains all the ui of your project, contains sub directory for each screen.
5- util — Contains the utilities/common functions of your application.
6- widgets — Contains the common widgets for your applications. For example, Button, TextField etc.
7- routes.dart — This file contains all the routes for your application.
8- main.dart - This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.
Constants
This directory contains all the application level constants. A separate file is created for each type as shown in example below:
All the business logic of your application will go into this directory, it represents the data layer of your application. It is sub-divided into three directories local, network and sharedperf, each containing the domain specific logic. Since each layer exists independently, that makes it easier to unit test. The communication between UI and data layer is handled by using central repository.
The store is where all your application state lives in flutter. The Store is basically a widget that stands at the top of the widget tree and passes it's data down using special methods. In-case of multiple stores, a separate folder for each store is created as shown in the example below:
This directory contains all the ui of your application. Each screen is located in a separate folder making it easy to combine group of files related to that particular screen. All the screen specific widgets will be placed in widgets directory as shown in the example below:
This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.
import 'package:boilerplate/routes.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'constants/app_theme.dart';
import 'constants/strings.dart';
import 'ui/splash/splash.dart';
void main() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]).then((_) {
runApp(MyApp());
});
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: Strings.appName,
theme: themeData,
routes: Routes.routes,
home: SplashScreen(),
);
}
}
I will be happy to answer any questions that you may have on this approach, and if you want to lend a hand with the boilerplate then please feel free to submit an issue and/or pull request 🙂
Again to note, this is example can appear as over-architectured for what it is - but it is an example only. If you liked my work, don’t forget to ⭐ star the repo to show your support.
This branch is still under development
Thông tin nhóm:
Lưu Tuấn Quân - 20127600
Huỳnh Minh Bảo- 20127004
Vũ Huy Hoàng - 20127171
Link Youtube Demo:
Youtube
Link File đánh giá:
GoogleDocs
How to Use
Step 1: Go to project root and execute the following command in console to get the required dependencies:
Step 2: Execute the following command to generate files
Hide Generated Files
In Visual Studio Code, navigate to Preferences -> Settings and search for Files:Exclude. Add the following patterns:
End of readme.
###########################################################################################################################
.
Boilerplate Features:
Up-Coming Features:
Libraries & Tools Used
Folder Structure
Here is the core folder structure which flutter provides.
Here is the folder structure we have been using in this project
Now, lets dive into the lib folder which has the main code for the application.
Constants
This directory contains all the application level constants. A separate file is created for each type as shown in example below:
Data
All the business logic of your application will go into this directory, it represents the data layer of your application. It is sub-divided into three directories
local
,network
andsharedperf
, each containing the domain specific logic. Since each layer exists independently, that makes it easier to unit test. The communication between UI and data layer is handled by using central repository.Stores
The store is where all your application state lives in flutter. The Store is basically a widget that stands at the top of the widget tree and passes it's data down using special methods. In-case of multiple stores, a separate folder for each store is created as shown in the example below:
UI
This directory contains all the ui of your application. Each screen is located in a separate folder making it easy to combine group of files related to that particular screen. All the screen specific widgets will be placed in
widgets
directory as shown in the example below:Utils
Contains the common file(s) and utilities used in a project. The folder structure is as follows:
Widgets
Contains the common widgets that are shared across multiple screens. For example, Button, TextField etc.
Routes
This file contains all the routes for your application.
Main
This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.
Wiki
Checkout wiki for more info
Conclusion
I will be happy to answer any questions that you may have on this approach, and if you want to lend a hand with the boilerplate then please feel free to submit an issue and/or pull request 🙂
Again to note, this is example can appear as over-architectured for what it is - but it is an example only. If you liked my work, don’t forget to ⭐ star the repo to show your support.