MANVIA BLOGUI Car Rental
-
Screen 1
UI
Files
1. main.dart
import 'package:flutter/material.dart'; import 'screens/Home/car_home_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: CarHomeScreen(), ); } } </smp></pre> <h3>2. screens/Home/car_home_screen.dart</h3> <summary> <p>1. ListView.builder</p> <p>2. stack and position</p> </summary> <pre><xmp> import 'package:b/Common/card_list.dart'; import 'package:b/constants.dart'; import 'package:b/model/car.dart'; import 'package:b/screens/Detail/car_detail_screen.dart'; import 'package:flutter/material.dart'; class CarHomeScreen extends StatelessWidget { const CarHomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: backgroundColor, appBar: AppBar( centerTitle: true, backgroundColor: backgroundColor, title: const Text( "Available Car", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 25, color: Colors.white, ), ), actions: const [ Icon( Icons.menu, color: Colors.white, ), SizedBox( width: 20, ) ], ), body: ListView.builder( shrinkWrap: true, itemCount: carList.length, itemBuilder: (context, index) { final car = carList[index]; return GestureDetector( onTap: () { // for navigating Navigator.push(context, MaterialPageRoute(builder: (context) => CarDetailScreen(car))); }, child: Container( margin: const EdgeInsets.only(bottom: 20), child: Stack( children: [ Container( width: double.infinity, margin: const EdgeInsets.only(left: 24, right: 24, top: 50), padding: const EdgeInsets.only( left: 25, bottom: 15, right: 20, top: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: cardColor, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "\$${car.price.toString()}", style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 25, color: Colors.white, ), ), const Text( "price/hr", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold), ), const SizedBox( height: 15, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ CarItems(name: "Brand", value: car.brand), CarItems(name: "Model No", value: car.model), CarItems(name: "CO2", value: car.co2), CarItems(name: "Fule Cons", value: car.fuelCons), ], ), ], ), ), Positioned( right: 30, child: Hero( tag: car.image, child: Image.asset( car.image,height: 115, ), ), ) ], ), ), ); }, ), ); } } 3. screens/Detail/car_detail_screen.dart
Stack inside another stack
import 'package:b/constants.dart'; import 'package:b/model/car.dart'; import 'package:flutter/material.dart'; import '../../Common/card_list.dart'; class CarDetailScreen extends StatelessWidget { const CarDetailScreen(this.car, {super.key}); final Car car; @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [ // for image Image.asset( "Images/map.png", height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, fit: BoxFit.cover, ), // for back button ,name and menu icon carDetailAppbar(context), Positioned( left: 10, right: 10, bottom: 25, child: Stack( children: [ Container( padding: const EdgeInsets.all( 15, ), margin: const EdgeInsets.only(top: 45), decoration: BoxDecoration( color: backgroundColor, borderRadius: BorderRadius.circular(20), ), // child: Column( children: [ cardInformation(), // for whtite line, const Divider( height: 15, color: Colors.white70, ), Row( children: [ // for driver image Image.asset( "Images/driver.png", height: 150, ), const SizedBox( width: 15, ), Expanded( child: Column( children: [ // for driver name address and more const Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Jesica Smith", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 18), ), Text( "LIcense: NWR 369852", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 12), ), ], ), Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( "369", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 20, color: Colors.white), ), Text( "Ride", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 14), ), ], ), ], ), const SizedBox( height: 12, ), const Row( children: [ Text( "5.0", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 16), ), SizedBox( width: 6, ), Icon(Icons.star, color: Colors.white, size: 16), Icon(Icons.star, color: Colors.white, size: 16), Icon(Icons.star, color: Colors.white, size: 16), Icon(Icons.star, color: Colors.white, size: 16), Icon(Icons.star, color: Colors.white, size: 16) ], ), const SizedBox( height: 12, ), // for call and book now button, Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( padding: const EdgeInsets.symmetric( vertical: 10, horizontal: 20), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: cardColor, ), child: const Text( "Call", style: TextStyle( fontWeight: FontWeight.bold, color: Colors.white), ), ), Container( padding: const EdgeInsets.symmetric( vertical: 10, horizontal: 20), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: cardColor, ), child: const Text( "Book Now", style: TextStyle( fontWeight: FontWeight.bold, color: Colors.white), ), ) ], ) ], )) ], ) ], ), ), // for car image Positioned( right: 60, child: Hero( tag: car.image, child: Image.asset( car.image, height: 115, ), ), ), ], ), ) ], ), ); } Column cardInformation() { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "\$${car.price.toString()}", style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 25, color: Colors.white, ), ), const Text( "price/hr", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), ), const SizedBox( height: 15, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ CarItems(name: "Brand", value: car.brand, textColor: Colors.black), CarItems( name: "Model No", value: car.model, textColor: Colors.black), CarItems(name: "CO2", value: car.co2, textColor: Colors.black), CarItems( name: "Fule Cons", value: car.fuelCons, textColor: Colors.black), ], ), ], ); } SafeArea carDetailAppbar(BuildContext context) { return SafeArea( child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( onPressed: () { Navigator.pop(context); }, icon: const Icon( Icons.arrow_back_ios, color: Colors.white, ), ), const Text( "Car Detail", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 25, color: Colors.white, ), ), IconButton( onPressed: () { Navigator.pop(context); }, icon: const Icon( Icons.menu, color: Colors.white, ), ), ], )); } } 3. constants.dart
import 'package:flutter/material.dart'; Color backgroundColor = const Color(0xFF40ac9c); Color cardColor = const Color(0xFF203e5a); 4. model/car.dart
class Car { String image; int price; String brand; String model; String co2; String fuelCons; Car( this.image, this.price, this.brand, this.model, this.co2, this.fuelCons, ); } List<Car> carList = [ Car( 'Images/bentley.png', 120, 'Bentley', '3A 9200', '77/km', '5,5 L', ), Car( 'Images/rolls_royce.png', 185, 'RR', '3A 9200', '77/km', '5,5 L', ), Car( 'Images/maserati.png', 100, 'Maserati', '3A 9200', '77/km', '5,5 L', ), Car( 'Images/cadillac.png', 90, 'Cadillac', '3A 9200', '77/km', '5,5 L', ), ]; 6. Common/card_list.dart
import 'package:flutter/material.dart'; class CarItems extends StatelessWidget { const CarItems({ required this.name, required this.value, this.textColor = Colors.white, super.key, }); final String name, value; final Color textColor; @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( value, style: TextStyle( fontSize: 16, fontWeight: FontWeight.bold, color: textColor, ), ), Text( name, style: TextStyle( fontSize: 12, fontWeight: FontWeight.bold, color: textColor, ), ) ], ); } }