flutter_skills_test

Flutter Application to test basic flutter understanding

Getting Started

Before you start with the application have a look at what flutter is.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Pre-requisite

Clone and Run

Clone this project in your local directory and do flutter run.

Below are the two existing screens that you will see once you run the app.

Screen 1

Screen 2

Requirements

We are here to test your skills in flutter, so you are required to make your changes to Screen 2.

Screen 2 is a vehicle catalog screen where user can come and see the vehicle pricing and model.

Step 1: Screen Design

  • Navigate from Screen 1 to Screen 2 by clicking the button Show Vehicles

  • Please refer to the Wireframe to get the idea of how the screen should look like

  • Replace the body of scaffold widget of Screen 2 (screens/vehicles.dart) with your implementation.

      `body: Center(
    child: Text('No Vehicles Found!!', style: TextStyle(fontSize: 30.0))
  )`

  • For setting up the vehicle image, you can either make an empty colored box or use any image or icon.

    If you like to use a static image use this reference

Step 2: Static data wireing

  • The model class Vehicle is already created for you in (model/Vehicle.dart).

  • The model class also contains a pre-filled static list with 4 vehicle defined. You can use that as your data.

  • Each field in model class Vehicle corresponds to a field in wireframe of Screen 2

Step 3: Buttons

  • It is mandatory to complete step 1 before moving on with step 3.

  • The Icon Buttons when clicked should show up the next and previous vehicles respectively.

  • On clicking the Edit Button you should give the flexibility to edit the data.

  • On clicking the Delete Button the vehicle should not be shown.

  • If the user deletes all the vehicles he should see ‘No Vehicles Found!!’

Step 4: API wireing (Optional)

  • It is mandatory to complete step 2 before moving on with step 4.

  • In this step the data of the vehicles, we can get it from an API

  • The data can fetched using GET call from endpoing https://myfakeapi.com/api/cars/. This returns 1000 Vehicles details but you are required to show just first 10. For further details on the API refer the link MyFakeAPI

  • Do the implementation of the below function in (services/vehicle_service.dart). And call the function when you want to load the data.

      `static Future<Vehicle> fetchVehicles() async {
    //Your Code to fetch vehicles
  }`

Step 5: Submit

After you have completed the above steps, you can generate the .apk file using this reference

It is not mandatory to sign the apk.

Also while doing the above steps, if you find anything from existing code needs to be changed, Please feel free to do so.

GitHub

View Github