使用 Flutter 制作一个简单的笑话生成器应用程序

在本教程中，我将向您展示如何使用 Flutter 制作一个简单的笑话生成器应用程序

对于这个项目，我们将从 RESTful API 获取数据

API的链接： 随机笑话

对于这个项目，我不会关注应用程序的 UI，我们只会关注如何从 URL 中获取数据，以及如何显示它们

在我们开始之前，您必须将此包添加到您的 pubspec.yaml 文件中

依赖项：http：^0.12.2

有关 HTTP 包的更多信息，请访问：HTTP 包 Flutter

源代码：

import 'dart:convert';

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: JokeApp(),
    );
  }
}

class JokeApp extends StatefulWidget {
  @override
  _JokeAppState createState() => _JokeAppState();
}

class _JokeAppState extends State<JokeApp> {
  //performing the http request
  String url = "https://official-joke-api.appspot.com/jokes/programming/random";
  String setup = "";
  String punchline = "";
  String type = "";
  Future<String> getData() async {
    Response res = await get(url, headers: {"Accept": "application/json"});
    var data = jsonDecode(res.body);
    print(data[0]['setup']);
    print(data[0]['punchline']);
    setState(() {
      setup = data[0]['setup'];
      punchline = data[0]['punchline'];
      type = data[0]['type'];
    });
    print(res.body);
  }

  @override
  void initState() {
    // TODO: implement initState
    getData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF212121),
      body: Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "${type} Jokes",
              style: TextStyle(
                color: Colors.white,
                fontSize: 26.0,
              ),
            ),
            SizedBox(
              height: 30.0,
            ),
            Card(
              child: Container(
                width: MediaQuery.of(context).size.width * 0.85,
                height: MediaQuery.of(context).size.height * 0.6,
                child: Padding(
                  padding: const EdgeInsets.all(12.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "- ${setup}",
                        style: TextStyle(
                          fontSize: 26.0,
                        ),
                      ),
                      SizedBox(
                        height: 10.0,
                      ),
                      Text(
                        "- ${punchline}",
                        style: TextStyle(
                          fontSize: 26.0,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
            RaisedButton(
              onPressed: () {
                getData();
              },
              color: Color(0xFFFAFAFA),
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8.0),
                child: Text("Another Joke"),
              ),
            )
          ],
        ),
      ),
    );
  }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
  
68
  
69
  
70
  
71
  
72
  
73
  
74
  
75
  
76
  
77
  
78
  
79
  
80
  
81
  
82
  
83
  
84
  
85
  
86
  
87
  
88
  
89
  
90
  
91
  
92
  
93
  
94
  
95
  
96
  
97
  
98
  
99
  
100
  
101
  
102
  
103
  
104
  
105
  
106
  
107
  
108
  
109
  
110
  
111
  
112
  
113
  
114
  
115
  
116
  
117
  
118
  
119
  
120
  
121
  
122
 

文章来源: jianguo.blog.csdn.net，作者：坚果前端の博客，版权归原作者所有，如需转载，请联系作者。

原文链接：jianguo.blog.csdn.net/article/details/119475866