Flutter Application to test basic flutter understanding

Related tags

Widgets cars
Overview

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 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.

You might also like...

The color of the widget is different with the counter application

The color of the widget is different with the counter application

GoldenTestのお試しをしてみた https://pub.dev/packages/golden_toolkit このライブラリを使って、検証する ちなみにマスターのスクリーンショットをGoldenというらしい。 カウンターアプリでWidgetのカラーが違う場合をテストしてみた OK想定 NG

Oct 18, 2021

Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Dec 22, 2022

Flutter Carousel Pro - A Flutter Carousel widget

Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

Dec 7, 2020

Flutter-useful-widgets - Flutter Useful Widgets

Flutter-useful-widgets - Flutter Useful Widgets

useful_widgets This package makes it easy to build apps by providing a list of simple and useful widgets. import 'package:useful_widgets/useful_widget

Jun 20, 2022

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Dec 7, 2022

Various Flutter widgets that are developed by Google but not by the core Flutter team

Flutter widgets This repository contains the source code for various Flutter widgets that are developed by Google but not by the core Flutter team. Is

Jan 7, 2023

🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Oct 8, 2022

A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter

A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter. Android only Features Pure Flu

Dec 21, 2022

Flutter UI Widgets Flutter Package

Flutter UI Widgets Flutter Package This package makes different Flutter UI widgets implementation easy for you. Flutter UI Widgets The list of widgets

May 6, 2022
Owner
null
📓 Storyboard your components with Flutterbook. Develop, document, & test any kind of Flutter component.

Flutterbook A storyboarding tool to accelerate the development of Flutter widgets. Inspired by Storybook.js. The package is built to support Windows a

Philip Vu 25 Oct 7, 2022
A Redux version tailored for Flutter, which is easy to learn, to use, to test, and has no boilerplate

A Redux version tailored for Flutter, which is easy to learn, to use, to test, and has no boilerplate. Allows for both sync and async reducers.

Marcelo Glasberg 214 Dec 13, 2022
An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds

An alternative to Overlay which allows you to easily render and hit test a widget outside its parent bounds. Based on the original idea by @shrouxm he

gskinner team 26 Dec 31, 2022
A basic Flutter app that includes some native Widgets like alerts, cards, avatars, animated container, inputs, etc.

Flutter components This project was created with Flutter and some native Widgets like alerts, cards, avatars, animated container, inputs, etc. Getting

Paúl 4 Nov 15, 2021
A basic flutter loading overlay

A basic loading overlay Features Creates a new scope where the user cannot leave until you programmatically pop it. Usage import 'package:flutter/mate

null 0 Nov 8, 2021
Here you will get basic implementation of all useful and top widgets in flutter.

Top Widgets in Flutter This is a common repo where you can get most frequest used widgets in flutter. Samples Getting Started This project is a starti

Sakhawat Hossain 5 Nov 3, 2022
A credit card widget for Flutter application.

A credit card widget for Flutter application.

Simform Solutions 281 Dec 27, 2022
⌚️ A general flutter timeline widget based on real-world application references

framework platform tags title flutter Android, iOS, Web, macOS, Linux, Windows flutter, timeline, flutter timeline, timeline tile flutter timeline flu

Universe 285 Dec 21, 2022
UI Card Designs - A new Flutter application.

UI Card Designs A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

Mohit rao 14 Dec 23, 2022
An advanced flutter package to build responsive application accross all platform with ease and has an handful of different types of extension

Flutter Next Now build flutter apps with ease and responsive. An advanced flutter package to build responsive application accross all platform with ea

Shashi Kumar 10 Dec 29, 2022