random_joke.dart

import 'dart:async';
import 'dart:convert';

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

Future<Joke> fetchJoke() async {
  final response =
      await http.get('https://official-joke-api.appspot.com/random_joke');

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response,
    // then parse the JSON.
    return Joke.fromJson(json.decode(response.body));
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load Joke');
  }
}

class Joke {
  final int id;
  final String title;
  final String pun;

  Joke({this.id, this.title, this.pun});

  factory Joke.fromJson(Map<String, dynamic> json) {
    return Joke(
      id: json['id'],
      title: json['setup'],
      pun: json['punchline']
    );
  }
}

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<Joke> futureJoke;

  @override
  void initState() {
    super.initState();
    futureJoke = fetchJoke();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        // appBar: AppBar(
        //   title: Text('Random Joke Generator'),
        //   centerTitle: true,
        //   backgroundColor: Colors.amber,
        // ),
        body: Center(
          child: FutureBuilder<Joke>(
            future: futureJoke,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView(
                      padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 8),
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                          margin: EdgeInsets.all(10),
                          color: Colors.amber[600],
                          child: Center(child: Text(snapshot.data.title,
                          style: GoogleFonts.lora(
                               textStyle: TextStyle(
                                   color: Colors.black,
                                   fontSize: 32.0,
                                   letterSpacing: 1.5),
                              ),)),
                        ),
                        Container(
                          padding: EdgeInsets.all(10),
                              child: Center(child: Text('. . . . .',
                          style: GoogleFonts.lora(
                               textStyle: TextStyle(
                                   color: Colors.black,
                                   fontSize: 32.0,
                                   letterSpacing: 5),
                              ),)),
                        ),
                        Container(
                            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                          margin: EdgeInsets.all(10),
                          color: Colors.amber[500],
                          child: Center(child: Text(snapshot.data.pun,
                          style: GoogleFonts.lora(
                               textStyle: TextStyle(
                                   color: Colors.black,
                                   fontSize: 32.0,
                                   letterSpacing: 1.5),
                              ),)),
                        ),
                        Container(
                            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
                            child: RaisedButton.icon(
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(30.0),
                                ),
                                padding: EdgeInsets.all(10),
                                icon: Icon(Icons.sync, color: Colors.white),
                                label: Text('Next Joke',
                          style: GoogleFonts.comfortaa(
                               textStyle: TextStyle(
                                   color: Colors.white,
                                   fontSize: 28.0,
                                   letterSpacing: 1),
                              ),),
                                color: Colors.pink,
                                onPressed: () {
                                      setState((){
                                        futureJoke = fetchJoke();
                                      });
                                    },
                                ),
                            )
                      ],
                    );
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              // By default, show a loading spinner.
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}