Flutter-Dart project || Hotel Management System

1 | P a g e
Course Design Report of Mobile
APP Development
School
/Faculty： School of International Education
Class, grade,
specialty：
Class one, 2019, Computer Science and
Technology
Student No： 2520190011
Name： Nafiz Md Imtiaz Uddin
Course
tutor： Associate professor Dr. Shuxin Yang (杨书新)
Date of
Submission
： 2022/01/31

2 | P a g e
Contents
1 Task information and aim.......................................................................... 1
1.1 Project title: .....................................................................................................1
1.2 Aim of task:.....................................................................................................1
2 System design .............................................................................................. 1
2.1.1 UML use case diagram .................................................................................................1
2.2 Function requirement analysis.....................................................................2
2.2.1 Splash Screen ...............................................................................................................3
2.2.2 Authentication..............................................................................................................3
2.2.3 Home............................................................................................................................7
2.2.4 Navbar..........................................................................................................................8
2.2.5 Booking system ............................................................................................................9
2.2.6 Order method.............................................................................................................10
2.2.7 Scanning system.........................................................................................................12
2.2.8 Profile.........................................................................................................................12
2.3 Detail design.................................................................................................13
2.3.1 Unified Modeling Language (UML) diagram ..............................................................13
2.3.2 Sequence diagram......................................................................................................14
2.3.3 Entity Relationship (E-R) diagram...............................................................................15
3 User Interface section............................................................................... 16
3.1.1 Splash Screen .............................................................................................................16
3.1.2 Authentication............................................................................................................17
3.1.3 Home..........................................................................................................................18
3.1.4 Detail Hotel.................................................................................................................19
3.1.5 Help Center ................................................................................................................20
3.1.6 Scanning .....................................................................................................................21
3.1.7 My Room....................................................................................................................21
3.1.8 Profile.........................................................................................................................23
4 Conclusion................................................................................................. 23

Mobile application task report_2022
1
1 Task information and aim
1.1 Project title:
Hotel Information Management System
1.2 Aim of task:
The most reason for this project is to ensure a consistent convergence of visitors to the hotel all through the
year, showcase the wide assortment of services and how it benefits the going to visitors through promoting
activities. The UI area in this app is exceptionally wonderful.
This is a flutter-based mobile application project. First of all, when building this app, the focus has been on
the design. Because clients are more attracted to the design. This application has more than fifteen screens.
Also, here authentication system has been used in this app. When user authentication is successful then enter
the home page. Here the user can easily find the hotel of his choice. Firebase System has been used in this
app. So, whenever the user uses it, he must have an internet connection on his phone.All the system designing
of this app are easily understood through diagrams. There are some advantages for hotel room, which is
included in this application.
2 System design
This hotel project offers accommodation, additional facilities and other services.
▪ Single bed or double bed
▪ Hotel rank: 3 stars to 5 stars
▪ Get interesting discount
▪ Room cost: (1700 yuan to 5000 yuan) [depends on hotel environment]
▪ Facility: AC, Wi-Fi, TV-LED, Extra bed and others
▪ Get meal
▪ Guest can get help line facility.
2.1.1 UML use case diagram
This Use Case diagram may be a realistic depiction of the intuitive among the components of Hotel Booking
Framework. It speaks to the technique utilized in framework investigation to recognize, clarify, and organize
system prerequisites of Hotel Booking System.

2
The connections between and among the actors and the utilize cases of Hotel Booking System:
• Hotel Authority: Authentication to program, Processing of guest data, Agree and confirm the
system, all type of scanning method, allow guest, Manage/Update DB, forgotten user password,
show the hotel room info, check room facility, show each of common profile.
• Guest: Guest sign up and sign in system, logout system, Forgotten user password, show the hotel
room info, check room facility, show each of common profile, Door scanning system, Help line
center, Room choice, Cancel Booking.
2.2 Function requirement analysis
Here is used dart programming function knowledge. Functions are the building blocks of readable,
maintainable, and reusable code. A function could be a set of explanations to perform a particular
assignment. Functions organize the program into coherent squares of code. Once characterized, capacities
may be called to get to code. This makes the code reusable. Besides, capacities make it simple to study and
keep up the program’s code. A function statement tells the compiler almost a function's title, return sort,
and parameters. A function definition gives the genuine body of the function.

3
2.2.1 Splash Screen
//Here is the function I utilize to divert the Splash screen to the Login
page with a delay of 3 seconds.
Future<void> splash() async {
Timer(Duration(seconds: 3), () {
Get.offAllNamed(Routes.SIGNIN);
});
}
//And the function is executed when the application has been run
@override
void onReady() {
super.onReady();
splash();
}
2.2.2 Authentication
Login page:
//Here is the execution code for login with firebase
void signIn(String email, String password) async {
try {
UserCredential userCredential = await auth.signInWithEmailAndPassword(
email: email,
password: password,
);
Get.offAllNamed(Routes.NAVBAR);
Get.snackbar(
"Succesfully Signed in",
"Signed in succesfully as " +
userCredential.user!.displayName.toString(),
snackPosition: SnackPosition.BOTTOM,
colorText: color_white,
backgroundColor: color_black,
margin: EdgeInsets.all(15),
);
} on FirebaseAuthException catch (e) {
if (e.code == 'user-not-found') {
// print('No user found for that email.');
Get.snackbar(
"User not found",

4
"No user found for that email",
backgroundColor: color_red,
);
} else if (e.code == 'wrong-password') {
// print('Invalid password.');
Get.snackbar(
"Wrong Password",
"Wrong password provided for that user",
backgroundColor: color_red,
);
// Get.defaultDialog();
}
} catch (e) {
print(e);
}
}
//Here is the google login execution code with firebase
void signInWithGoogle() async {
final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
// Obtain the auth details from the request
final GoogleSignInAuthentication? googleAuth =
await googleUser?.authentication;
// Create a new credential
final credential = GoogleAuthProvider.credential(
accessToken: googleAuth?.accessToken,
idToken: googleAuth?.idToken,
);
// Once signed in, return the UserCredential
try {
await auth.signInWithCredential(credential);
Get.snackbar(
"Succesfully Signed in",

5
"Signed in succesfully as " + googleUser!.displayName.toString(),
);
if (e.code == 'user-not-found') {
print('No user found for that email.');
} else if (e.code == 'wrong-password') {
print('Wrong password provided for that user.');
}
}
}
//Validation system:
String? validateEmail(String value) {
if (!GetUtils.isEmail(value)) {
return "Provide valid Email";
}
return null;
}
String? validatePassowrd(String value) {
if (value.isEmpty) {
return "Password required";
}
return null;
}
void checkForm() async {
final isValid = loginFormKey.currentState!.validate();
if (!isValid) {
return;
} else {
authController.signIn(emailController.text, passController.text);
}
loginFormKey.currentState!.save();
}
Registration page:
//Here is the execution code for login with firebase
void signUp(String email, String password) async {
try {

6
await auth.createUserWithEmailAndPassword(email: email, password:
password);
if (e.code == 'weak-password') {
print('The password provided is too weak.');
} else if (e.code == 'email-already-in-use') {
print('The account already exists for that email.');
}
} catch (e) {
print(e);
}
}
//Validation system:
String? validateEmail(String value) {
if (!GetUtils.isEmail(value)) {
return "Provide valid Email";
}
return null;
}
String? validatePassword(String value) {
if (value.length <= 8) {
return "Password must be of 8 character";
}
return null;
}
String? comparePassword(String value) {
if (value.isEmpty) {
return "Password must be confirm";
} else if (value != passController.text) {
return "Password confirmation does not match!";
}
return null;
}
void checkForm() async {
final isValid = loginFormKey.currentState!.validate();
if (!isValid) {
return;
} else {
authController.signUp(emailController.text, passController.text);

7
}
loginFormKey.currentState!.save();
}
2.2.3 Home
//Here is the execution code
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
extendBody: true,
backgroundColor: color_white,
body: SafeArea(
child: ListView(
children: <Widget>[
HeaderWithSearchBox(size: size),
SizedBox(
height: 10,
),
Visibility(visible: true, child: ScheduleCarousel()),
SizedBox(
height: 5,
),
Visibility(visible: true, child: Promo_carousel()),
SizedBox(
height: 5,
),
CardsSekitarAnda(),
SizedBox(
height: 25,
),
],
),
bottom: false,
),
);
}

8
2.2.4 Navbar
//Here is the function we utilize to recover the esteem when we tap on the
navbar menu
body: Obx(
() => controller.myWidgets.elementAt(controller.indexWidget.value),
),
//Here is the work we utilize to control page relocation on the navbar
RxInt indexWidget = 0.obs;
void changeIndexBottomNav(int index) {
indexWidget.value = index;}
List<Widget> myWidgets = [
HomeView(),
Center(
child: Text(
'History',),),
MyRoomView(),
ProfileView(),
];
2.2.4.1 Hotel details
@override
return Scaffold(
backgroundColor: color_main,
appBar: AppBar(
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {
Navigator.pop(context);
},
),
title: Padding(
padding: const EdgeInsets.only(left: 35.0),
child: Text(
"Order Confirmation",
style: TextStyle(
fontSize: 18,

9
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
2.2.5 Booking system
DateTime bookingFrom = DateTime.now();
String getDateText() {
if (bookingFrom == null || bookingFrom == DateTime.now()) {
return DateTime.now().toString();
} else {
return '${bookingFrom.day}, ${bookingFrom.day} ${bookingFrom.month}
${bookingFrom.year}';
}
}
@override
return SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(left: 16.0, right: 16, top: 16, bottom: 24),
child: Column(
children: [
Container(
padding:
EdgeInsets.only(top: 24, right: 16, bottom: 24, left: 16),
width: double.infinity,
decoration: new BoxDecoration(
color: color_white,
borderRadius: BorderRadius.circular(9),
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0.0, 2.0),
blurRadius: 6.0,
),
], ),

10
2.2.6 Order method
@override
return Scaffold(
body: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: detail_succes_content.length,
itemBuilder: (BuildContext context, int index) {
DetailSuccesContent detailsuccescontents =
detail_succes_content[index];
return Container(
margin:
EdgeInsets.symmetric(vertical: KPadding, horizontal:
KPadding),
height: 515,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: color_white,
borderRadius: BorderRadius.circular(10),),
child: Stack(
children: <Widget>[
Positioned(top: 16,left: 16,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(height: 131,width: 123,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black45,offset: Offset(0.0, 2.0),blurRadius: 4.0, ),
],
),
child: Stack(
children: <Widget>[
ClipRRect(
child: Image(width: 131,height: 131,
image:
AssetImage(detailsuccescontents.imageAsset),

11
fit: BoxFit.cover, ), ), ], ), ),
Padding(
padding: EdgeInsets.symmetric(horizontal: KPadding),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(detailsuccescontents.name,
style: TextStyle( color: color_black,
fontFamily: 'Poppins', fontSize: 24,
fontWeight: FontWeight.w600,
height: 1.3,letterSpacing: 1,), ),
SizedBox( height: 5, ),
Row(
children: [
SvgPicture.asset(
detailsuccescontents.SvgAssets, width:
11, ),
Padding(
padding: EdgeInsets.only(left: 8.0),
child: Text(
detailsuccescontents.location,
style: TextStyle(
color: color_abu,
fontFamily: 'Poppins',
fontSize: 11,
fontWeight: FontWeight.w400,),
),),],),],),)],),),
Positioned( top: 171, left: 16,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Order ID',
style: TextStyle(
color: color_purple,
fontFamily: 'Poppins',fontSize: 12,
fontWeight: FontWeight.w400,),),
SizedBox(height: 5, ),
Text(
detailsuccescontents.IdPemesanan,
style: TextStyle(
color: color_purple,

12
fontFamily: 'Poppins', fontSize: 16,
fontWeight: FontWeight.w700, ),
),],), ),
2.2.7 Scanning system
//Here is the work I utilize to coordinate the QR to a dialog
floatingActionButtonLocation: const FixedCenterDockedFabLocation(),
floatingActionButton: FloatingActionButton(
onPressed: () {
Get.dialog(QrDialog());},
tooltip: 'Scan',
child: Icon(MyFlutterApp.ic_qrcode, size: 32),
elevation: 0,),
2.2.7.1 Room facility
class BodyMyRoom extends StatelessWidget {
const BodyMyRoom({Key? key}) : super(key: key);
@override
return Scaffold(
backgroundColor: color_grey_bg,
body: SafeArea(
child: HeaderMyRoom(),),);}}
2.2.8 Profile
//also here is the function we use for Logout
void signOut() async {
await FirebaseAuth.instance.signOut();
Get.offAllNamed(Routes.SIGNIN);
Get.snackbar(
"Succesfully Signed out",
"Signed out succesfully",
);}

13
2.3 Detail design
2.3.1 Unified Modeling Language (UML) diagram
Usually, the UML graph of Hotel Booking System which appears the streams between the movement of Hotels,
Rooms, Administrations, Clients, Booking etc.

14
2.3.2 Sequence diagram
The Verification arrangement chart of Hotel Booking System, where admin will be able to login in their account
utilizing their accreditations. After login client can oversee all the operations on Booking, Lodging, administration,
Clients, Rooms. All the pages such as Administrations, Clients, Rooms are secure and clients can get to this page after
login. The diagram underneath makes a difference illustrate how the login page works in a Hotel Booking System.
The different objects within the Clients, Booking, Administrations, and Rooms page—interact over the course of the
grouping, and clients will not be able to get to this page without confirming their identity. This is the grouping chart
of the Hotel Booking System which appears the interaction between the objects of, Administrations, Booking, Rooms,
Clients etc.

15
2.3.3 Entity Relationship (E-R) diagram
This ER (Entity Relationship) diagram represents the demonstration of the Hotel Booking System Substance. The
entity-relationship chart of Inn Booking Framework appears all the visual instruments of database tables and the
relations between Booking, Lodging, Installments, Administrations etc. It utilized structure information and
characterized the connections between organized information bunches of Inn Booking Framework functionalities.
Most substances of the Hotel Booking System are Facility, Booking, Clients, Rooms and Administrations etc.

16
3 User Interface section
Recruitment:
To accomplish a programming or software project we require hardware and software units. The hardware
and software requirements of our project is as follows:
Hardware Requirements:
Processor: Pentium 4 or above
HDD: 20 GB hard disk or above
RAM: 4 GB
PC OS: Windows 10
IDE Version: Android Studio 4.0.1 or above
Android Emulator: Pixel 3a API 28
Resolution – 1080 x 2220: 440dip
Target: Android 9.0
CPU- x86
Design is a layout, outline, or arrange, as of the frame and structure of a work of craftsmanship, a structure,
or a machine to be executed or built. Design is the creation of an arrangement or tradition for the development
of an object or a system. The design has distinctive intentions totally different areas.
Android Studio is the official integrated development environment (IDE) for Android platform advancement,
Android app improvement, based on IntelliJ IDEA. On best of IntelliJ's capable code editor and designer
devices, Android Studio offers indeed more highlights that upgrade efficiency when building Android apps,
such as A adaptable Gradle-based construct framework, Construct variations and different APK record era,
code layouts to assist you to construct common app highlights, a wealthy format editor with back for drag
and drop topic altering build up instruments to capture execution, ease of use, adaptation compatibility, and
other issues, code contracting with Professional Protect and asset contracting with Gradle, built-in bolster for
Google Cloud Stage.
Testing is the method of assessing a system or its components with the aim to find whether it fulfils the
required necessities or not. Testing is executing a framework in arrange to recognize any holes, blunders, or
lost necessities in opposite to the genuine necessities.
Execution is the realization of an application, or execution of an arrangement, though, show, plan,
determination, standard, calculation, or approach. In computer science, the execution could be a realization
of a specialized detail or calculation as a program, computer program component, or another computer
framework through computer programming and sending. Numerous usages may exist for a given detail or
standard.

17
3.1.1 Splash Screen
Here is the function I utilize to divert the Sprinkle screen to the Login page with a delay of 3 seconds.
3.1.2 Authentication
3.1.2.1 Sign in page
The login page of app executes Firebase Verification, which makes it simple to form a partitioned prepare.

18
3.1.2.2 Sign up page
The register page in app executes Firebase Authentication, which makes it simple to make a separate prepare.
3.1.3 Home
This Screen within the app itself is executed with GetX state management where a see that capacities as a
Home Screen show is as of now bound with a controller, the controller capacities as a control for how this
splash see will be shown.

19
3.1.4 Detail Hotel
3.1.4.1 Booking
Booking at this app which could be a see that serves to show a form which points to determine the plan
3.1.4.2 Confirmation order page
On this page, the guest can ensure his schedule before submitting.

20
3.1.4.3 Order or cancel order page
Order Details on app which could be a see that serves to show arrange details that have been created by the
framework, and shows a shortcut to show a QR code for check-in.
3.1.5 Help Center
Here user can check some point. We can add some help line number or something. The user can easily benefit
from this app.

21
3.1.6 Scanning
This one itself is utilized to issue a QR code that's utilized to check-in at hotel.
3.1.7 My Room
This page within the app is utilized to create it simpler for users to arrange hotels, whether it's showing Check
In status, Setting Lights and AC.

22
3.1.7.1 Light Control
Light control s utilized to form it less demanding for clients to arrange lights.
3.1.7.2 AC Control
AC control is utilized to form it simpler for clients to design AC.

23
3.1.8 Profile
The profile within the app is utilized to create it simpler for clients to alter account information. Also, this
page is included log out icon.
4 Conclusion
This project nowadays has the advantage of modernization. I have gained valuable knowledge and
experience from this project. Here I choose Flutter based Program. Because it is good in terms of design.
Diagram has helped me in many ways while creating this app. I had to sketch before building this app, which
helped me a lot in terms of designing part. When designing and planning a process, flowcharts can help me
identify its essential steps. Diagrams help me understand complex logic and communicate what the logic is
to my system. The convenience of the client has been taken into consideration while building this app.
Guests can get some benefits if they use this application. With this mobile app, the user can control the
lights and AC of his room. Customer can view information about extra hotel facilities. Also, they can even
scan their doors through this mobile app. Due to this, they will not need to use any additional access card.
There is some defect in this application. Here authentication system should more secure. Here the guest
cannot draft the hotel of his choice. Also, guest cannot make advance booking using this system.

Flutter-Dart project || Hotel Management System

More Related Content

What's hot (20)

Similar to Flutter-Dart project || Hotel Management System (20)

More from Jiangxi University of Science and Technology (江西理工大学) (6)

Recently uploaded (20)

Flutter-Dart project || Hotel Management System