Project Overview
As per [3] research, diabetes is considered a worldwide pandemic, and one third of patients are from
developing countries, Sri Lanka also one of them. However, many researches proved that majority of
death caused by diabetes is due to lack of knowledge of the disease and lack of helping hands. To
overcome this barrier MyDiabetes application was created. MyDiabetes is a medical care mobile
application which is developed for Android OS using Flutter framework. The primary objective of
MyDiabeties is to spread awareness of diabetes and consult with specialists when patient needs any
consultation. In addition, MyDiabetes emphasize ways and methods to control the sugar level in blood,
such as providing information of foods should take and foods should avoid in the diet plan, along with
sugar level calculator.
Featuress
1. Splash Screen
2. Patient Sign In
3. Patient Sign up
4. Forget Password
5. Read Article (Diabetes related article and tips)
- Web View
6. Channelling
- Doctor Channelling
- Consulter Channelling
7. View Food Sugar amount
8. User Setting
- Channelling History
- Setting (change user details)
- Help
- About Us
- Signing Out
Mobile Application Overview Architecture
1
Figure 3 – Overview Mobile Application Architecture
As per [1] statistic, more than 75% of Sri Lankan mobile users are Android and time constraint, hence
author has decided to develop MyDiabetes application for Android OS. However, upon level of demand
and request MyDiabetes application will be available for iOS users too in future.
Figure 4 - Mobile OS Markets Shares [1]
The author has Flutter framework for develop MyDiabetes application. The author used online and
offline data flows for develop for Mydiabeties application. Hence user can easy to use some features
application with and without internet connection
Why using Flutter
Flutter is an Open source high-quality new technology, which contains elements for both platforms
(Android and IOS) acquired by Google, known as hybrid framework. Flutter is using a single language
known as Dart programming language for developing frontend and backend.
Pros of Flutter
• High Flexibility
• Can generate two of the platforms (Android and IOS) using one code.
• Supporting for material design.
• Bootstrap implementation.
• Common animations paten
Application data flow
MyDiabeties application has used Flutter BLoC Pattern (business logic components) for manage
states.
2
Figure 5 - BloC Patten Data Flow [2]
MyDiabeties application data layer consisting of local and remote(server) data set.
Repository are interfaces to data are stored in the directory. The BloC models are stored here
as pure dart libraries containing the business logic.[2]
Figure 6 - BloC Patten Folder Structure in Application
Source Organized
MyDiabetes application source code organized by BloC Patten. And local database organizes under
the local folder.
Figure 7 – Application Source Structure
3
Fonts - all fonts are including fonts folder
[Link] - all common words are including
Images - include all images
Figure 8 – Application Image Structure
MyDiabteis application used two types of density quality pixel ratio folders. 2.0x included xhdpi
images and 3.0x included xxhdpi images.
Third part Library
MyDiabetes third party libraries include under [Link].
Figure 9 – Third part Library in Application
http - using consume HTTP resources
flutter_svg - view svg images
connectivity - check internet connection
sqflite - using for store data to local database
Toast - view toast massage
Path_provider - view host images
RxDart - RxDart is a reactive functional programming library for Google Dart, based on
[Link] Dart comes with a very decent Streams API out-of-the-box; rather than attempting
to provide an alternative to this API, RxDart adds functionality on top of it.
Offline Access
MyDiabeties application has offline feature for read Article list and Foods’s sugar amount. In addition,
the author has used SQLite database for storing data in local database. Thus, the application first check
4
for the internet connection (wi-fi and/or mobile data) and if the internet connection is unavailable then
the application uses local data flow (local database).
Figure 10 – Code of the Internet Connection
Figure 11 – code of Load local and Remote Data
UI/UX
1. Application Launcher Icon
Figure 12 – MyDiabetes Application Icon
Figure 13 – Application Icon
5
2. Application Logo
Figure 14 – Application Logo
3. Application Them colours
Primary Swatch pink
Button Colour Green
Status bar and Bottom navigation bar colour Red
Table 1 – Application Themes Colours
4. Fonts Family - OpenSans
Figure 15 – Fonts Family of the Application
6
5. Splash screen
Figure 16 – Application Splash Screen
6. Sign in
Figure 17 – Application Sign in Screen
7
7. Forget Password
Figure 18 – Application Forget Password Screen
8. Sing up
Figure 19 – Application Sign Up Screen
8
9. Read Article
Figure 20 – Application Read Article Screen
10. Read Article - Web View
Figure 17 – Application Article Web View Screen
9
11. Doctor
Figure 18 – Application Article Doctor Screen
10
12. Channelling - Select hospital
Figure 19 – Application Hospital Screen Figure 20 – Application Canaling screen
Figure 21 – Application Article View Canaling Details Screen
11
13. Sugar Amount
Figure 22 – Application Foods Sugrue Amount View Screen
14. Setting
Figure 22 – Application Setting Screen 22 – Application Edit Screen
12
Custom Components
MyDibates application used custom application for flat button and text fields.
Figure 23 – Custom Component Folder
This application button and text fields are using the same design the developer use
custom_flat_button.dart for flat button and custom_text_feild.dart for text field design.
Properties Widget type Event
title custom_flat_button Username and password send
textColor (sign in screen) backend
fontSize Navigator read article screen
fontWeight
onPressed
color
splashColor
borderColor
borderWidth
hint custom_text_field.dart get username
controller
baseColor usernameFail
hintColor
borderColor
errorColor getPassword
inputType passwordFail
obscureText
Validator (sign in screen)
onChanged
Table 2 – Custom Components Properties and Events
13
Native Development
● Add Internet permission.
● Set up Application launcher icon.
Reference
[1] “Mobile OS market share 2018 | Statista", Statista, 2019. [Online]. Available:
[Link]
operating-systems/.[Accessed: 25- Sep- 2019].
[2] "How to Leverage BLoC for Code Sharing in Flutter and AngularDart", Toptal Engineering
Blog, 2019. [Online]. Available: [Link]
dart-flutter-bloc. [Accessed: 25- Sep- 2019].
[3] D. A. V. R. ,. R. S. ,. D. R. M. P Katulanda, "Province and ethnic specific prevalence of
diabetes among Sri Lankan adults," Sri Lanka Journal of Diabetes Endocrinology and
Metabolism 2011, 2011. [Accessed: 25- Sep- 2019].
14