首页 > 编程语言 >使用 Flutter 制作一个简单的笑话生成器应用程序

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

时间:2023-10-20 10:00:49浏览次数:40  
标签:setup 生成器 应用程序 Dart child height data Flutter


使用 Flutter 制作一个简单的笑话生成器应用程序_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"),
              ),
            )
          ],
        ),
      ),
    );
  }
}

最后

这里也为想要学习Flutter的朋友们准备了两份学习资料《Flutter Dart语言编程入门到精通》《Flutter实战》,从编程语言到项目实战,一条龙服务!!

《Flutter Dart 语言编程入门到精通》

  • 第一章 Dart语言基础
  • 第二章 Dart 异步编程
  • 使用 Flutter 制作一个简单的笑话生成器应用程序_面试_02

  • 第三章 异步之 Stream 详解
  • 第四章 Dart标准输入输出流
  • 使用 Flutter 制作一个简单的笑话生成器应用程序_flutter_03

  • 第五章 Dart 网络编程
  • 第六章 Flutter 爬虫与服务端
  • 使用 Flutter 制作一个简单的笑话生成器应用程序_android_04

  • 第七章 Dart 的服务端开发
  • 第八章 Dart 调用C语言混合编程
  • 第九章 LuaDardo中Dart与Lua的相互调用
  • 使用 Flutter 制作一个简单的笑话生成器应用程序_android_05

《Flutter实战:第二版》

  • 第一章:起步
  • 第二章:第一个Flutter应用
  • 第三章:基础组件
  • 第四章:布局类组件
  • 第五章:容器类组件

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

  • 第六章:可滚动组件
  • 第七章:功能型组件
  • 第八章:事件处理与通知
  • 第九章:动画
  • 第十章:自定义组件
  • 使用 Flutter 制作一个简单的笑话生成器应用程序_网络协议_07

  • 第十一章:文件操作与网络请求
  • 第十二章:Flutter扩展
  • 第十三章:国际化
  • 第十四章:Flutter核心原理
  • 第十五章:一个完整的Flutter应用
  • 使用 Flutter 制作一个简单的笑话生成器应用程序_职场和发展_08


标签:setup,生成器,应用程序,Dart,child,height,data,Flutter
From: https://blog.51cto.com/u_16163480/7946938

相关文章

  • Java资源文件获取方法详解:从 Classpath 到 Web 应用程序
    在Java开发中,访问和读取资源文件是一个常见的需求。这些资源可以是配置文件、图像、音频、视频、文本文件等。在Java中,获取资源文件有多种方式,包括直接通过类路径(Classpath)访问,或者通过Web应用程序的上下文路径(ContextPath)访问。以下我们将详细探讨这些方法。通过类路径(Classpath)......
  • 如何学习 Flutter?这篇文章帮你搞定
    先来看看全球开发者的一个使用情况91%的开发者认为Flutter缩短了构建和发布应用程序的时间85%的开发者认为Flutter使他们的应用程序比以前更漂亮85%的人认为Flutter使他们的应用比以前能在更多的平台上发布再来看看Flutter的定义Flutter是谷歌的移动UI框架,它可以快速......
  • 如何使用Spring Boot监听器来优化应用程序性能?
    ......
  • 【小白必看】Python词云生成器详细解析及代码实现
    前言本文介绍了如何使用Python编写代码来生成词云图。在生成词云图之前,我们需要导入一些必需的库,包括numpy、wordcloud、PIL、matplotlib.pyplot和openpyxl。其中,numpy用于数据处理,wordcloud用于生成词云,PIL用于图像处理,matplotlib.pyplot用于在笔记本中显示图片,openpyxl用于读......
  • app应用程序该如何封装,能提升产品价值和用户体验感
    哈喽各位同学们好,我是咕噜铁蛋,咱们又见面了。之前我和大家聊了好多苹果文件签名的小知识,今天咱们换个口味讲讲别的内容---封装。随着移动应用市场的蓬勃发展,用户对应用的期望也变得更高。一个成功的应用不仅仅要具备功能完善和界面美观的特点,还需要在用户体验和产品价值方面提供差......
  • CentOS 在无网络环境安装应用程序(RPM方式)
    总体思路:找一台可以联网的linux,下载docker的RPM依赖包而不进行安装(yumlocalinstall),将所有依赖的rpm环境打包好,再在无网环境中解压逐一安装(rpm:--force--nodeps)。当前示例的操作系统是:CentOS7.9.2009(Core)1.在联网的系统中,下载RPM包更新Yum缓存yummakecachefast......
  • 前端打怪之旅=>Es6入门(迭代器、生成器)
    迭代器迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口!就可以完成遍历操作。ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for.of消费原生具备iterator接口的数据(可用forof遍历)ArrayArgumentsSetMapStringTyped......
  • 在Android Studio上使用flutter Intl插件快速实现国际化和多国语言
    Flutter实现国际化和多语言支持在Flutter中实现国际化和多语言支持通常涉及以下步骤:添加依赖库:首先,你需要添加flutter_localizations依赖库到你的pubspec.yaml文件中。这个库包含了Flutter国际化所需的核心功能。dependencies:flutter:sdk:flutterflutter_localiza......
  • React学习笔记03-编写第一个react应用程序
    react开发需要引入多个依赖文件:react.js,react-dom.js,分别又有开发版本和生成版本,creat-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录情况,然后在里面重新创建一个index.js写入以下代码。//从react的包当中引入了React。只要你要写React.j......
  • flutter 使用webView
    第一步:安装webView#webviewwebview_flutter:^3.0.2第二步:写入页面SizedBox(width:Get.width,height:Get.height,child:Padding(padding:EdgeInsets.only(top:264.w),child:WebView(initialUrl:controller.url,......