Giter Club home page Giter Club logo

test's Introduction

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.

test's People

Contributors

vanshbhasin157 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.