BCO Flutter Multi Platform Client Application
4.0K
A Flutter application to provide state-of-the-art user interaction with the smarthome system BaseCubeOne.
The boilerplate for this template was provided by zubairehman. See the corresponding boilerplate docs or its wiki for more information about this.
Step 0:
Make sure your flutter development envorinment is up-to-date and is following the official stable release track. Headover to the following flutter docs for more information on how to setup your flutter environment:
https://flutter.dev/docs/get-started/install
Step 1:
Download or clone this repo by using the link below:
https://gitlab.com/opaal.org/bco_flutter.git
Step 2:
Go to project root and execute the following command in console to get the required dependencies:
flutter channel stable
flutter upgrade
flutter pub get
Step 3:
This project uses several libraries that work with code generation. Execute the following command to generate files (and whenever you added or changed relevant files):
./generate-graphql-backend.sh
Optionally: Afterwars, you can use the watch command in order to keep the source code synced automatically:
flutter packages pub run build_runner watch
In-order to hide generated files, navigate to Android Studio -> Preferences -> Editor -> File Types and paste the below lines under ignore files and folders section:
*.inject.summary;*.inject.dart;*.g.dart;
In Visual Studio Code, navigate to Preferences -> Settings and search for Files:Exclude. Add the following patterns:
**/*.inject.summary
**/*.inject.dart
**/*.g.dart
Here is the core folder structure which flutter provides.
flutter-app/
|- android
|- build
|- ios
|- lib
|- test
Here is the folder structure we have been using in this project
lib/
|- constants/
|- data/
|- stores/
|- ui/
|- utils/
|- widgets/
|- main.dart
|- routes.dart
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.
This directory contains all the application level constants. A separate file is created for each type as shown in example below:
constants/
|- app_theme.dart
|- dimens.dart
|- endpoints.dart
|- preferences.dart
|- strings.dart
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 shared_perf, 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.
data/
|- local/
|- constants/
|- datasouces/
|- app_database.dart
|- network/
|- constants/
|- exceptions/
|- rest_client.dart
|- sharedpref
|- constants/
|- shared_preference_helper.dart
|- repository.dart
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:
stores/
|- login/
|- login_store.dart
|- form_validator.dart
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:
ui/
|- login
|- login_screen.dart
|- widgets
|- login_form.dart
|- login_button.dart
Contains the common file(s) and utilities used in a project. The folder structure is as follows:
utils/
|- encryption
|- xxtea.dart
|- date
|- date_time.dart
Contains the common widgets that are shared across multiple screens. For example, Button, TextField etc.
widgets/
|- app_icon_widget.dart
|- empty_app_bar.dart
|- progress_indicator.dart
This file contains all the routes for your application.
import 'package:flutter/material.dart';
import 'ui/home/home.dart';
import 'ui/login/login.dart';
import 'ui/splash/splash.dart';
class Routes {
Routes._();
//static variables
static const String splash = '/splash';
static const String login = '/login';
static const String home = '/home';
static final routes = <String, WidgetBuilder>{
splash: (BuildContext context) => SplashScreen(),
login: (BuildContext context) => LoginScreen(),
home: (BuildContext context) => HomeScreen(),
};
}
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:bco_flutter/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(),
);
}
}
Content type
Image
Digest
sha256:2790099c7…
Size
69.2 MB
Last updated
12 months ago
docker pull opaal/bco-ui-albiorix