diff --git a/assets/icons/shopping_cart.png b/assets/icons/shopping_cart.png new file mode 100644 index 0000000..89753ac Binary files /dev/null and b/assets/icons/shopping_cart.png differ diff --git a/assets/images/home_bg.png b/assets/images/home_bg.png new file mode 100644 index 0000000..aea7236 Binary files /dev/null and b/assets/images/home_bg.png differ diff --git a/assets/images/profile_img.png b/assets/images/profile_img.png new file mode 100644 index 0000000..f717723 Binary files /dev/null and b/assets/images/profile_img.png differ diff --git a/assets/logo/logo_city_cards.png b/assets/logo/logo_city_cards.png new file mode 100644 index 0000000..f1159ab Binary files /dev/null and b/assets/logo/logo_city_cards.png differ diff --git a/lib/home/home_page_view.dart b/lib/home/home_page_view.dart new file mode 100644 index 0000000..c2139c7 --- /dev/null +++ b/lib/home/home_page_view.dart @@ -0,0 +1,250 @@ +import 'package:flutter/material.dart'; + +import 'package:flutter/material.dart'; + +class HomePage extends StatelessWidget { + final List> 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 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"), + ], + ), + ); + } +} diff --git a/lib/main.dart b/lib/main.dart index 845dc0d..2ed2fba 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -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 createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - - - @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: [ - const Text('You have pushed the button this many times:'), - Text( - '', - style: Theme.of(context).textTheme.headlineMedium, - ), - ], - ), - ), + home: HomePage(), ); } } diff --git a/pubspec.yaml b/pubspec.yaml index f440fe5..80a6bcf 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -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