Taxi Booking in Flutter - vehicle.dart

 import 'package:cached_network_image/cached_network_image.dart';

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:myfirstproject/Dashboard.dart';
import 'package:myfirstproject/ViewModels/vehicleviewmodel.dart';
import 'package:myfirstproject/cards/areaspot_card.dart';
import 'package:myfirstproject/cards/location_card.dart';
import 'package:myfirstproject/common/bottomnavigationbar.dart';
import 'package:myfirstproject/common/constants.dart';
import 'package:myfirstproject/ViewModels/locationviewmodel.dart';
import 'package:provider/provider.dart';

class Vehicle extends StatefulWidget {
  const Vehicle({Key? key}) : super(key: key);
  @override
  VehicleState createState() => VehicleState();
}

class VehicleState extends State<Vehicle> {
  final VehicleViewModel  vehicleViewModel = VehicleViewModel();
  @override
  void initState()
  {
    vehicleViewModel.GetData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(create: (context) => VehicleViewModel(),
        child: Container(color: Colors.white,
          child: Column(
            children: [
              Container( decoration: BoxDecoration(color: Colors.white),
                    child: Padding(
                      padding: const EdgeInsets.all(20.0),
                      child: Column(
                        children: [
                              Row(
                                children: [
                                  IconButton(
                                    onPressed: () { Navigator.pop(context); },
                                    icon: Icon(FontAwesomeIcons.arrowLeftLong),
                                    color: Navy,
                                  ),
                                  Expanded(child: Align(alignment: Alignment.center, child: Text("Vehicle", style: TextStyle(color: Navy, fontWeight: FontWeight.bold, fontSize: 15) )))
                                ],
                              ),
                              SizedBox(height: 20,),
                              Container( decoration: BoxDecoration(border: Border.all(color: Color(0XffF0F4F7)), color: SecondaryColor, borderRadius: BorderRadius.circular(10.0)),
                                child: Padding(
                                  padding: const EdgeInsets.all(10.0),
                                  child: Column(
                                    children: [Material(child: Container(child: TextField(decoration: InputDecoration(hintText: 'Pick up', labelText: 'Mall living world, Exit Gate',filled: true, fillColor: SecondaryColor),))),
                                     Material(child: Container(child: TextField(decoration:  InputDecoration(hintText: 'Drop off', labelText: 'Pasar Bush, Meat Spot',filled: true, fillColor: SecondaryColor),))),
                                    ],
                                  ),
                                )
                                ,
                              ),
                              SizedBox(height: 20,),
                          Container(height: 200, decoration: BoxDecoration(border: Border.all(color: Color(0XffF0F4F7)), color: SecondaryColor, borderRadius: BorderRadius.circular(10.0)),
                          child: GoogleMap(initialCameraPosition: CameraPosition(target: LatLng(37.7749, -122.4194),zoom: 12,),
                          )
                            ,),
                          SizedBox(height: 20,),
                          Row(children: [
                            Expanded(child: Text('Select Vehicle', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black,fontSize: 15),)),
                            Align(alignment: Alignment.centerRight, child: Text('See all', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black,fontSize: 10),))
                          ],),

                          SizedBox(height: 20,),
                          Container(height: 70, decoration: BoxDecoration(border: Border.all(color: Color(0XffF0F4F7)), color: SecondaryColor, borderRadius: BorderRadius.circular(10.0)),
                            child: Row(children: [
                              CircleAvatar( backgroundImage: CachedNetworkImageProvider( 'https://www.creativefabrica.com/wp-content/uploads/2021/02/08/icon-car-blue-color-Graphics-8432709-1.jpg'),),
                              SizedBox(width: 10,),
                              Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: [
                                Text('Standard Car',style: TextStyle(color: Colors.black,fontSize: 12),),
                                Text('2-4 People',style: TextStyle(color: Colors.black,fontSize: 12),)
                              ],),

                              Expanded(
                                child: Align(alignment: Alignment.centerRight,
                                  child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center, children: [
                                    Text('\$5.50',style: TextStyle(color: Colors.black,fontSize: 12),),
                                    Text('\$7.99',style: TextStyle(decoration: TextDecoration.lineThrough,color: Colors.black,fontSize: 12),)
                                  ],),
                                ),
                              )

                            ]),
                            ),

                          SizedBox(height: 20,),
                          Container(height: 70, decoration: BoxDecoration(border: Border.all(color: Color(0XffF0F4F7)), color: SecondaryColor, borderRadius: BorderRadius.circular(10.0)),
                            child: Row(children: [
                              CircleAvatar( backgroundImage: CachedNetworkImageProvider( 'https://www.creativefabrica.com/wp-content/uploads/2021/02/08/icon-car-blue-color-Graphics-8432709-1.jpg'),),
                              SizedBox(width: 10,),
                              Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: [
                                Text('Big Car',style: TextStyle(color: Colors.black,fontSize: 12),),
                                Text('4-6 People',style: TextStyle(color: Colors.black,fontSize: 12),)
                              ],),

                              Expanded(
                                child: Align(alignment: Alignment.centerRight,
                                  child: Column(crossAxisAlignment: CrossAxisAlignment.center,mainAxisAlignment: MainAxisAlignment.center, children: [
                                    Text('\$7.50',style: TextStyle(color: Colors.black,fontSize: 12),),
                                    Text('\$9.99',style: TextStyle(decoration: TextDecoration.lineThrough, color: Colors.black, fontSize: 12),)
                                  ],),
                                ),
                              )

                            ]),
                          ),
                          SizedBox(height: 20,),
                          Container( height: 60, decoration: BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(20)),
                          child:Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: ( Row(children: [
                              Expanded(child: Text('Go to Payment',style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold, color: Colors.white),)),
                              Align(alignment: Alignment.centerRight, child: Text('\$5.50', style: TextStyle(fontSize: 15, color: Colors.white),)),
                                IconButton(onPressed: () {}, icon: Icon(FontAwesomeIcons.angleRight),color: PrimaryColor, iconSize: 20,)
                            ],)
                            ),
                          )
                          )
                        ],
                      ),
                    ),
                  ),


            ],
          ),
        ));
  }
}

Go to Main project