Car Booking App Available Cars Screen

car_booking/lib/constants.dart

@@ -0,0 +1,16 @@
+
+import 'package:flutter/material.dart';
+
+import 'model/car.dart';
+
+
+Color mPrimaryColor = Color(0xFF40ac9c);
+
+Color mCardColor = Color(0xFF203e5a);
+
+List<Car> carList = [
+  Car('assets/images/bentley.png', 120, 'Bentley', '3A 9200', '77/km', '5,5 L'),
+  Car('assets/images/rolls_royce.png', 185, 'RR', '3A 9200', '77/km', '5,5 L'),
+  Car('assets/images/maserati.png', 100, 'Maserati', '3A 9200', '77/km', '5,5 L'),
+  Car('assets/images/cadillac.png', 90, 'Cadillac', '3A 9200', '77/km', '5,5 L'),
+];

car_booking/lib/main.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
+import 'screens/available/available_car_screen.dart';
+import 'screens/detail/car_detail_screen.dart';
 import 'screens/login/login_screen.dart';
 import 'screens/signup/singup_screen.dart';
 
@@ -28,7 +30,7 @@ class MyApp extends StatelessWidget {
       routes: {
         '/': (context) => LoginScreen(),
         'CreateNewAccount': (context) => CreateNewAccount(),
-
+        'AvailableCarScreen': (context) => AvailableCarScreen(),
       },
     );
   }

car_booking/lib/model/car.dart

@@ -0,0 +1,17 @@
+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,
+  );
+}

car_booking/lib/screens/available/available_car_screen.dart

@@ -0,0 +1,49 @@
+
+import 'package:car_booking/screens/login/login_screen.dart';
+import 'package:flutter/material.dart';
+
+import '../../constants.dart';
+import 'widget/car_list_item.dart';
+
+class AvailableCarScreen extends StatelessWidget {
+
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: mPrimaryColor,
+      appBar: buildAppBar(),
+      body: ListView.builder(
+        itemCount: carList.length,
+        itemBuilder: (context, index) => CarListItem(index),
+      ),
+    );
+  }
+
+  AppBar buildAppBar() {
+    return AppBar(
+      backgroundColor: mPrimaryColor,
+      elevation: 0,
+      leading: IconButton(
+          icon: Icon(
+            Icons.menu,
+            color: Colors.white,
+          ),
+          onPressed: () {},
+        ) ,
+      title: Text('Dzenix Available Cars'),
+      actions: [
+        IconButton(
+          icon: Icon(
+            Icons.logout,
+            color: Colors.white,
+          ),
+          onPressed: () {
+
+          },
+        )
+      ],
+    );
+  }
+}
+

car_booking/lib/screens/available/widget/car_infomation.dart

@@ -0,0 +1,72 @@
+
+import 'package:flutter/material.dart';
+
+import '../../../constants.dart';
+import '../../../model/car.dart';
+import '../../../widget/attribute.dart';
+
+class CarInfomation extends StatelessWidget {
+  const CarInfomation({
+
+    required this.car,
+  }) ;
+
+  final Car car;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      margin: EdgeInsets.only(left: 24, right: 24,top: 50),
+      padding: EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: mCardColor,
+        borderRadius: BorderRadius.circular(16),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            '\$${car.price}',
+            style: TextStyle(
+              color: Colors.white,
+              fontSize: 24,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          Text(
+            'price/hr',
+            style: TextStyle(
+              color: Colors.white,
+            ),
+          ),
+          SizedBox(
+            height: 16,
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Attribute(
+                value: car.brand,
+                name: 'Brand',
+              ),
+              Attribute(
+                value: car.model,
+                name: 'Model No',
+              ),
+              Attribute(
+                value: car.co2,
+                name: 'CO2',
+              ),
+              Attribute(
+                value: car.fuelCons,
+                name: 'Fule Cons.',
+              ),
+            ],
+          )
+        ],
+      ),
+    );
+  }
+}
+

car_booking/lib/screens/available/widget/car_list_item.dart

@@ -0,0 +1,48 @@
+
+import 'package:flutter/material.dart';
+
+import '../../../constants.dart';
+import '../../../model/car.dart';
+
+import 'car_infomation.dart';
+
+class CarListItem extends StatelessWidget {
+  const CarListItem(
+    this.index, 
+
+  ) ;
+
+  final int index;
+
+  @override
+  Widget build(BuildContext context) {
+    Car car = carList[index];
+    return GestureDetector(
+      onTap: () {
+        Navigator.push(
+          context,
+          MaterialPageRoute(
+            builder: (context) {
+              return CarDetailScreen();
+            },
+          ),
+        );
+      },
+      child: Container(
+        margin: EdgeInsets.only(bottom: 20),
+        child: Stack(
+          children: [
+            CarInfomation(car: car),
+            Positioned(
+              right: 40,
+              child: Image.asset(
+                car.image,
+                height: 100,
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

car_booking/lib/widget/attribute.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class Attribute extends StatelessWidget {
+  const Attribute({
+
+    required this.name,
+    required this.value,
+    this.textColor = Colors.white,
+  });
+
+  final String name, value;
+  final Color textColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          value,
+          style: TextStyle(
+            color: textColor,
+            fontSize: 16,
+            fontWeight: FontWeight.w500,
+          ),
+        ),
+        Text(
+          name,
+          style: TextStyle(
+            color: textColor,
+            fontSize: 12,
+          ),
+        )
+      ],
+    );
+  }
+}