Started working on homepage and created assets folder
This commit is contained in:
BIN
assets/icons/shopping_cart.png
Normal file
BIN
assets/icons/shopping_cart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 874 B |
BIN
assets/images/home_bg.png
Normal file
BIN
assets/images/home_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
assets/images/profile_img.png
Normal file
BIN
assets/images/profile_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
BIN
assets/logo/logo_city_cards.png
Normal file
BIN
assets/logo/logo_city_cards.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
250
lib/home/home_page_view.dart
Normal file
250
lib/home/home_page_view.dart
Normal file
@@ -0,0 +1,250 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class HomePage extends StatelessWidget {
|
||||
final List<Map<String, String>> featuredCities = [
|
||||
{
|
||||
"name": "Melbourne",
|
||||
"description": "Australia's cultural capital famous for vibrant...",
|
||||
"individualTicket": "\$350+",
|
||||
"cityCard": "\$199",
|
||||
"image":
|
||||
"https://images.unsplash.com/photo-1536053299937-9b4d6a4a07d1?fit=crop&w=800&q=80"
|
||||
},
|
||||
{
|
||||
"name": "Sydney",
|
||||
"description": "Australia's cultural capital famous for vibrant...",
|
||||
"individualTicket": "\$400+",
|
||||
"cityCard": "\$249",
|
||||
"image":
|
||||
"https://images.unsplash.com/photo-1505575967452-2e9b0a1c0f59?fit=crop&w=800&q=80"
|
||||
},
|
||||
];
|
||||
|
||||
final List<String> upcomingCities = [
|
||||
"Turkey",
|
||||
"Germany",
|
||||
"Switzerland",
|
||||
"Maldives",
|
||||
"Turkey",
|
||||
];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
child: Stack(
|
||||
children: [
|
||||
Image.asset(
|
||||
"assets/images/home_bg.png",
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Image.asset(
|
||||
"assets/logo/logo_city_cards.png",
|
||||
height: 50,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Container(
|
||||
padding: EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Image.asset(
|
||||
"assets/icons/shopping_cart.png",
|
||||
height: 20,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 8),
|
||||
CircleAvatar(
|
||||
backgroundColor: Color(0xffFFDFDF),
|
||||
backgroundImage: AssetImage("assets/images/profile_img.png"),
|
||||
)
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 140),
|
||||
Text(
|
||||
"CityCards.\nSee More,\nSpend Less.",
|
||||
style: TextStyle(
|
||||
fontSize: 44,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
"Instant QR access to 40+ attractions, exclusive perks, and savings up to 30%",
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.red,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(8)),
|
||||
),
|
||||
onPressed: () {},
|
||||
child: Text("Get Your CityCard"),
|
||||
),
|
||||
SizedBox(height: 32),
|
||||
|
||||
// Featured Cities
|
||||
Text(
|
||||
"Explore Cities",
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
"Explore your dream destination and experience various attractions.",
|
||||
style: TextStyle(color: Colors.grey[600]),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
SizedBox(
|
||||
height: 220,
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: featuredCities.length,
|
||||
separatorBuilder: (_, __) => SizedBox(width: 16),
|
||||
itemBuilder: (context, index) {
|
||||
final city = featuredCities[index];
|
||||
return Container(
|
||||
width: 180,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
image: DecorationImage(
|
||||
image: NetworkImage(city['image']!),
|
||||
fit: BoxFit.cover),
|
||||
),
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.bottomCenter,
|
||||
end: Alignment.topCenter,
|
||||
colors: [
|
||||
Colors.black.withOpacity(0.7),
|
||||
Colors.transparent
|
||||
],
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: 2, horizontal: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.green,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
),
|
||||
child: Text(
|
||||
"Save \$151+",
|
||||
style: TextStyle(
|
||||
color: Colors.white, fontSize: 12),
|
||||
),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
city['name']!,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold),
|
||||
),
|
||||
SizedBox(height: 4),
|
||||
Text(
|
||||
city['description']!,
|
||||
style: TextStyle(
|
||||
color: Colors.white70, fontSize: 12),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
SizedBox(height: 4),
|
||||
Text(
|
||||
"Individual tickets: ${city['individualTicket']}\nCity Card: ${city['cityCard']}",
|
||||
style: TextStyle(
|
||||
color: Colors.white, fontSize: 12),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: 32),
|
||||
// Upcoming Cities
|
||||
Text(
|
||||
"Upcoming Cities",
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black),
|
||||
),
|
||||
SizedBox(height: 8),
|
||||
Text(
|
||||
"Explore your dream destination and experience various attractions.",
|
||||
style: TextStyle(color: Colors.grey[600]),
|
||||
),
|
||||
SizedBox(height: 16),
|
||||
SizedBox(
|
||||
height: 80,
|
||||
child: ListView.separated(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: upcomingCities.length,
|
||||
separatorBuilder: (_, __) => SizedBox(width: 16),
|
||||
itemBuilder: (context, index) {
|
||||
return Column(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 28,
|
||||
backgroundImage: NetworkImage(
|
||||
"https://source.unsplash.com/80x80/?${upcomingCities[index]}"),
|
||||
),
|
||||
SizedBox(height: 4),
|
||||
Text(upcomingCities[index],
|
||||
style: TextStyle(fontSize: 12)),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
bottomNavigationBar: BottomNavigationBar(
|
||||
currentIndex: 0,
|
||||
selectedItemColor: Colors.red,
|
||||
unselectedItemColor: Colors.grey,
|
||||
items: [
|
||||
BottomNavigationBarItem(icon: Icon(Icons.explore), label: "Explore"),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(Icons.auto_fix_high), label: "Magic Itinerary"),
|
||||
BottomNavigationBarItem(icon: Icon(Icons.card_giftcard), label: "My Passes"),
|
||||
BottomNavigationBarItem(icon: Icon(Icons.post_add), label: "Postcard"),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
|
||||
import 'home/home_page_view.dart';
|
||||
|
||||
void main() {
|
||||
WidgetsFlutterBinding.ensureInitialized();
|
||||
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
|
||||
@@ -18,49 +20,14 @@ class MyApp extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
title: 'City Cards',
|
||||
theme: ThemeData(
|
||||
textTheme: GoogleFonts.poppinsTextTheme(
|
||||
Theme.of(context).textTheme,
|
||||
)
|
||||
),
|
||||
home: const MyHomePage(title: 'City Cards'),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class MyHomePage extends StatefulWidget {
|
||||
const MyHomePage({super.key, required this.title});
|
||||
|
||||
|
||||
final String title;
|
||||
|
||||
@override
|
||||
State<MyHomePage> createState() => _MyHomePageState();
|
||||
}
|
||||
|
||||
class _MyHomePageState extends State<MyHomePage> {
|
||||
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
|
||||
title: Text(widget.title),
|
||||
),
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
const Text('You have pushed the button this many times:'),
|
||||
Text(
|
||||
'',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
home: HomePage(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -59,9 +59,10 @@ flutter:
|
||||
uses-material-design: true
|
||||
|
||||
# To add assets to your application, add an assets section, like this:
|
||||
# assets:
|
||||
# - images/a_dot_burr.jpeg
|
||||
# - images/a_dot_ham.jpeg
|
||||
assets:
|
||||
- assets/logo/
|
||||
- assets/images/
|
||||
- assets/icons/
|
||||
|
||||
# An image asset can refer to one or more resolution-specific "variants", see
|
||||
# https://flutter.dev/to/resolution-aware-images
|
||||
|
||||
Reference in New Issue
Block a user