Started working on homepage and created assets folder

This commit is contained in:
2025-10-14 11:20:25 +05:30
parent 77db7a547d
commit a9447fc869
7 changed files with 258 additions and 40 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 874 B

BIN
assets/images/home_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 532 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

View 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"),
],
),
);
}
}

View File

@@ -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(),
);
}
}

View File

@@ -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