Flutter Basics: Making a Quote app and fetching data from a quote api

3 min readMay 8, 2021

Flutter is fascinating for rapid development, I am writing this story to motivate flutter noobies around the globe. Let’s start, we are gonna build a quote app using flutter.

so in this app we will be making one screen only. as its just a simple app to understand several widgets and data flow using flutter framework.

When you create a new Flutter project you already have the main .dart file.

create a directory name as ui and create home.dart.
create a directory name as util and create utility.dart.
create a directory name as data and create quote_model.dart.

Dependencies

In pubspec.yaml dependency section should look line and do pubget

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.1
  share: ^2.0.1

UI Making

lets begin with home.dart, create a statefull widget like I have created.

In the following code you can see that I didn’t used scaffold appbar as we won’t be having appbar in out app. so in scaffold body we have written the code. I have commented out use of several widgets in the following code. Do read it carefully.

so in main.dart delete all the default code and start by importing Flutter material package and adding main method, and running app etc.

import 'package:flutter/material.dart';
import 'package:Quotify/ui/home.dart';

void main() {
  runApp(MyApp()); //this code runs MyApp class
}

class MyApp extends StatelessWidget { //This class runs our home class which is in ui dir.  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

Data Model Making

so we are all setup for ui part, now we are gonna create data model of out quote. so at first we are gonna use https://zenquotes.io/api/random api to fetch a random quote. this response is in JSONformat so we are gonna map this JSON response.

[
   {
      "q":"You are the average of the five people you spend the most time with.",
      "a":"Jim Rohn",
      "h":"<blockquote>&ldquo;You are the average of the five people you spend the most time with.&rdquo; &mdash; <footer>Jim Rohn</footer></blockquote>"
   }
]

so we have to parse JSON responses using data model.

tip : well making this is too easy you can use any json to dart converted online availiable like Instantly parse JSON in any language | quicktype

overview of converting JSON to Dart using quicktype

Utility Making

well this is the utility which will be getting our response in to a variable(response) using api url. So we will be needing a class we are gonna name it ApiClient this method should run on async as its fetching data and we are gonna use http/http.dart package to parse url. you can look at the code below.

Finishing up

we have made all of the things which are required in the app. If you have doubt feel free to contact me.

Source Code of this app is availiable on Github

saquibansari0101/Quotify (github.com)

You can always take a peak at the code if you get stuck somwhere.

Thanks for reading this article. Be sure to clap/recommend as much as you can and also share with your friends. It means a lot to me.

Lets become friends on GitHub.