Skip to content

Instantly share code, notes, and snippets.

@agusibrahim

agusibrahim/main.dart

Created January 20, 2024 06:47
Show Gist options
  • Save agusibrahim/4c8ae94e4dee373a7cafb63b6c748f63 to your computer and use it in GitHub Desktop.
Save agusibrahim/4c8ae94e4dee373a7cafb63b6c748f63 to your computer and use it in GitHub Desktop.
Download ZIP
hotel-detail-view
Raw
readme.md
Raw
main.dart
// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: false,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
super.key,
required this.title,
}) : super();
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
backgroundColor: Color(0xfff0f2f5),
extendBodyBehindAppBar: true,
appBar: AppBar(
title: const Text(''),
centerTitle: true,
actions: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.favorite_outline,
color: Colors.white,
))
],
leading: IconButton(
onPressed: () {},
icon: CircleAvatar(
backgroundColor: Colors.white30,
child: Icon(
Icons.arrow_back,
color: Colors.white,
))),
backgroundColor: Colors.transparent,
elevation: 0,
),
body: ScrollConfiguration(
behavior:
ScrollConfiguration.of(context).copyWith(scrollbars: false),
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
height: 350,
child: Stack(
alignment: Alignment.bottomLeft,
children: [
Image.network(
"https://ik.imagekit.io/menggokucingku/hotelroomsample__Nbx03vjk.jpeg?updatedAt=1705732722270",
height: 350,
fit: BoxFit.cover,
),
Container(
height: 70,
foregroundDecoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.transparent,
Colors.white,
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.1, 0.8],
),
),
),
Transform.translate(
offset: Offset(0, -60),
child: Container(
margin: EdgeInsets.only(left: 20),
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7),
color: Colors.black45,
border: Border.all(color: Colors.white12)),
child: Text(
"1/67",
style: TextStyle(
color: Colors.white, fontSize: 12),
),
),
)
],
),
),
Transform.translate(
offset: Offset(0, -50),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 2,
offset: Offset(
0, 1), // changes position of shadow
),
],
),
margin: EdgeInsets.symmetric(horizontal: 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.only(
left: 16, top: 12, right: 16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"The Alana Hotel and Convention Center - Solo by Aston",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 5),
Text(
"The Alana Hotel & Convention Center Solo",
style: TextStyle(
color: Colors.black45,
fontSize: 13),
),
SizedBox(height: 5),
Row(
children: [
Icon(Icons.star,
color: Colors.amber, size: 17),
Icon(Icons.star,
color: Colors.amber, size: 17),
Icon(Icons.star,
color: Colors.amber, size: 17),
Icon(Icons.star,
color: Colors.amber, size: 17),
Icon(Icons.star,
color: Colors.grey.shade300,
size: 17),
],
),
],
),
),
SizedBox(height: 5),
Container(
margin: EdgeInsets.all(1),
decoration: BoxDecoration(
color:
Color(0xfff0f7fe).withOpacity(0.6),
borderRadius: BorderRadius.circular(
12)), //BorderRadius.only(bottomLeft: Radius.circular(12), bottomRight: Radius.circular(12))),
child: Stack(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
end: Alignment.centerLeft,
begin:
Alignment.centerRight,
colors: [
Colors.black,
Colors.transparent
],
).createShader(Rect.fromLTRB(
0,
0,
rect.width,
rect.height));
},
blendMode: BlendMode.dstIn,
child: Image.network(
"https://ik.imagekit.io/menggokucingku/mapssample_I_IfNO4qy.png?updatedAt=1705732722191",
height: 80,
)),
],
),
Padding(
padding: EdgeInsets.all(12),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: [
Icon(
Icons.pin_drop,
color:
Color(0xff0f294d),
size: 15,
),
SizedBox(width: 5),
Expanded(
child: Text(
"Jalan Adi Sucipto, Solo, Blulukan, Jawa Tengah, 57174, Indonesia",
maxLines: 2,
overflow:
TextOverflow
.ellipsis,
style: TextStyle(
fontSize: 12,
color: Colors
.black87),
),
),
],
),
SizedBox(height: 8),
Row(
crossAxisAlignment:
CrossAxisAlignment
.start,
children: [
Icon(
Icons.flight,
color:
Color(0xff0f294d),
size: 15,
),
SizedBox(width: 5),
Expanded(
child: Text(
"6,9 km dari Bandara Internasional Adi Soemarmo",
maxLines: 2,
overflow:
TextOverflow
.ellipsis,
style: TextStyle(
fontSize: 12,
color: Colors
.black87),
),
),
],
),
],
),
),
RotationTransition(
turns: AlwaysStoppedAnimation(
30 / 360),
child: CircleAvatar(
radius: 16,
backgroundColor:
Color(0xff3264ff),
child: Icon(
Icons.navigation,
color: Colors.white,
size: 17,
),
),
)
],
),
),
],
),
)
],
),
),
SizedBox(height: 15),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 2,
offset: Offset(
0, 1), // changes position of shadow
),
],
),
margin: EdgeInsets.symmetric(horizontal: 12),
padding: EdgeInsets.symmetric(
horizontal: 16, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 5),
Container(
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Color(0xfffff1e6)),
child: Row(
children: [
Icon(
Icons.info,
color: Colors.orange,
size: 17,
),
SizedBox(width: 5),
Text(
"Mohon konfirmasi tanggal",
style: TextStyle(fontSize: 13),
),
],
),
),
SizedBox(height: 5),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Check-in & Check-out",
style: TextStyle(
color: Color(0xff8592a6)),
),
SizedBox(height: 10),
Text(
"28 Feb-1 Mar",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(width: 10),
Text(
"2 malam",
style:
TextStyle(color: Color(0xff8592a6)),
),
Container(
height: 40,
width: 1,
margin:
EdgeInsets.symmetric(horizontal: 5),
color: Color(0xffdadfe6),
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(
"Kamar & Tamu",
style: TextStyle(
color: Color(0xff8592a6)),
),
SizedBox(height: 10),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Row(
children: [
Icon(
Icons.door_back_door,
color: Color(0xff8592a6),
size: 20,
),
Text(
"1",
style: TextStyle(
fontWeight:
FontWeight.bold),
)
],
),
Row(
children: [
Icon(
Icons.person,
color: Color(0xff8592a6),
size: 20,
),
Text(
"1",
style: TextStyle(
fontWeight:
FontWeight.bold),
)
],
),
],
)
],
),
)
],
),
SizedBox(height: 10),
Container(
height: 1,
color: Colors.grey.shade200,
),
SizedBox(height: 10),
Row(
children: [
Container(
decoration: BoxDecoration(
color: Color(0xfff5f7fa),
borderRadius:
BorderRadius.circular(5)),
padding: EdgeInsets.symmetric(
horizontal: 8, vertical: 5),
child: Text(
"Termasuk Sarapan",
style: TextStyle(fontSize: 12),
),
),
SizedBox(width: 5),
Container(
decoration: BoxDecoration(
color: Color(0xfff5f7fa),
borderRadius:
BorderRadius.circular(5)),
padding: EdgeInsets.symmetric(
horizontal: 8, vertical: 5),
child: Text(
"Kasur Queen",
style: TextStyle(fontSize: 12),
),
)
],
)
],
),
),
SizedBox(height: 15),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 2,
offset: Offset(
0, 1), // changes position of shadow
),
],
),
margin: EdgeInsets.symmetric(horizontal: 12),
padding: EdgeInsets.symmetric(
horizontal: 16, vertical: 10),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
SizedBox(height: 5),
Text(
"Deskripsi Hotel",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Container(
height: 1,
color: Colors.grey.shade200,
margin:
EdgeInsets.symmetric(vertical: 10),
),
Text(
"Dengan menginap di The Alana Hotel and Convention Center - Solo by Aston di kota Colomadu, Anda akan berada hanya 5 menit dengan berkendara dari De' Tjolong menggunakan delman istimewa ku duduk dimuka.",
maxLines: 4,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.black87),
),
SizedBox(height: 10),
Container(
margin:
EdgeInsets.symmetric(horizontal: 20),
child: OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(
color: Colors.blue)),
onPressed: () {},
child:
Text("Lihat deskripsi lengkap")),
)
],
)),
SizedBox(height: 15),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 2,
offset: Offset(
0, 1), // changes position of shadow
),
],
),
margin: EdgeInsets.symmetric(horizontal: 12),
padding: EdgeInsets.symmetric(
horizontal: 16, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(height: 5),
Text(
"Faselitas",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Container(
height: 1,
color: Colors.grey.shade200,
margin: EdgeInsets.symmetric(vertical: 10),
),
Text(
"Dengan menginap di The Alana Hotel and Convention Center - Solo by Aston di kota Colomadu, Anda akan berada hanya 5 menit dengan berkendara dari De' Tjolong menggunakan delman istimewa ku duduk dimuka.",
maxLines: 4,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: Colors.black87),
),
SizedBox(height: 10),
Container(
margin:
EdgeInsets.symmetric(horizontal: 40),
child: OutlinedButton(
style: OutlinedButton.styleFrom(
side:
BorderSide(color: Colors.blue)),
onPressed: () {},
child: Text("Selengkapnya")),
)
],
),
)
],
),
),
],
)
],
),
)));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment