Flutter – Build a Random Quote Generator App

Flutter is a UI toolkit developed by Google back in 2007. It is the first choice of most beginner cross-platform developers because of its straightforward learning curve and simple syntax. Flutter provides a simple API to generate beautiful UI without a hassle. One can develop apps for many platforms including Android, iOS, Windows, Mac, Linux, etc.

In this app we are going to have the features or modules mentioned below:

• A simple screen with a Text Widget and an ElevatedButton.
• A function to make API calls to the quotable to get a random quote.
• A simple layout using a single column.
• Ability to refresh the quote when the user clicks the button again.

A sample video is given below to get an idea about what we are going to do in this article.

Developing this app will give you a good revision of flutter and dart basics. As we are covering concepts such as:

• Widgets like Text, Button, Container, etc.
• Making API Request.
• Basic state management using setState.
• Adding pub packages to the app.

In this app, we will have the default main.dart file in the lib folder that will contain all the code.

Note: Make sure to add the http package to the project before running the app. Run the below command from the root of your project to add the package.

flutter pub add http

Code:

Create a new flutter application and delete all the boilerplate code and type the below code in the main.dart file.

Dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
    runApp(const RandomQuoteApp());
}

class RandomQuoteApp extends StatelessWidget {
    const RandomQuoteApp({super.key});

    @override
    Widget build(BuildContext context) {
        return const MaterialApp(
            title: 'Random Quote Generator',
            home: RandomQuoteScreen(),
        );
    }
}

class RandomQuoteScreen extends StatefulWidget {
    const RandomQuoteScreen({super.key});

    @override
    State<RandomQuoteScreen> createState() => _RandomQuoteScreenState();
}

class _RandomQuoteScreenState extends State<RandomQuoteScreen> {
    String _quote = 'Tap the button to get a random quote';

    // Function to get a random quote from the quotable API
    Future<void> _getRandomQuote() async {
        final response = await http.get(Uri.parse('https://api.quotable.io/random'));
        if (response.statusCode == 200) {
            final data = jsonDecode(response.body);
            setState(() {
                _quote = data['content'];
            });
        } else {
            setState(() {
                _quote = 'Failed to load a quote';
            });
        }
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('GFG - Flutter Random Quote'),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 20),
                            child: Text(
                                _quote,
                                style: const TextStyle(fontSize: 18),
                                textAlign: TextAlign.center,
                            ),
                        ),
                        const SizedBox(height: 20),
                        ElevatedButton(
                            onPressed: _getRandomQuote,
                            child: const Text('Get Random Quote'),
                        ),
                    ],
                ),
            ),
        );
    }
}

Output:

Finally, the apk for the app can be generated by giving the command ‘flutter build apk’ in the terminal.