Flutter Flow: Get Vehicle Information from the VIN using the NHTSA API
Flutter Flow: Get vehicle information from the VIN using the NHTSA API
Previously I showed you how to use the NHTSA API to get vehicle information by querying make and models. Flutter Flow: Use the NHTSA API to get vehicle information
This time we will explore how to use a VIN to get the vehicle information.
Define VIN API
Click on the API Calls tab to the left. Create a new GET request named Get Vin Info.
For the **API URL **use
https://vpic.nhtsa.dot.gov/api/vehicles/DecodeVinExtended/[vin]?format=json
Add the following header
Content-Type: application/json
Notice vin in square brackets. We need to define a variable for this path parameter.
Click the Variables tab and add a String variable named vin.
Test API Response
We can now test the API to ensure everything works as expected.
You can use the example VIN provided by the documentation:
5UXWX7C5*BA
Notice the response is different from the previous API. We must create a new Data Schema with the same keys as the results array above.
I named my Data Schema vinResults with the following fields
-
Value
-
ValueId
-
Variable
-
VariableId
Create UI
For this example, I kept the UI simple.
-
A TextField widget for entering the VIN
-
A button widget to send the API request to get the vehicle info using the VIN
-
A Text widget to show the vehicle’s name. There is much more info, keeping it simple for this example.
Click the HomePage and create a local page state variable named vinResultz, a list of vinResults. I am reusing the previous variable to show the name, you can rename it if you like.
Click on the Button, click on it’s Actions tab, and open the Action Flow Editor
We will make the API call here and store the results in our page state variable vinResultz.
Choose the Backend Call API for the action and your API name, in my case Get VIN info.
Set the vin variable to your TextField’s value.
I kept the Action Output Variable Name to the default one created
For Action 2, if the request succeeds I update vinResultz by taking the Results array from the JSON response and converting it to a list of vinResults
I also create Action 3, to update makeAndModel page state.
First, choose vinResultz.
Next, it will show the following popup
Set the same options as above. There may be a better approach, but I haven’t explored that far yet.
Test app
In the top right of Flutter Flow, click the button to run your app in Test Mode
When the app successfully loads, enter the same example VIN as mentioned before.
5UXWX7C5*BA
You should have a similar result as below
Congratulations on completing this feature!
I have created a form to better understand everyone’s needs. You can also request custom Flutter Flow development and/or Flutter Flow training.