在本教程中，我將向您展示如何使用 Flutter 制作一個簡單的笑話生成器應(yīng)用程序

對于這個項(xiàng)目，我們將從 RESTful API 獲取數(shù)據(jù)

API的鏈接： 隨機(jī)笑話

對于這個項(xiàng)目，我不會關(guān)注應(yīng)用程序的 UI，我們只會關(guān)注如何從 URL 中獲取數(shù)據(jù)，以及如何顯示它們

在我們開始之前，您必須將此包添加到您的 pubspec.yaml 文件中

依賴項(xiàng)：http：^0.12.2

有關(guān) HTTP 包的更多信息，請?jiān)L問：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.@overrideWidget 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 requestString 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);}@overridevoid initState() {// TODO: implement initStategetData();super.initState();}@overrideWidget 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"),),)],),),);} }

總結(jié)

以上是生活随笔為你收集整理的使用 Flutter 制作一个简单的笑话生成器应用程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。