Flutter笑话获取插件jokeapi的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter笑话获取插件jokeapi的使用

😂 jokeapi 😂

🚨 注意

由于幽默类型的不同,JokeAPI 包含了各种各样的笑话,其中一些可能非常冒犯。可以使用 blacklistFlagssafe-mode 参数过滤这些笑话,但请自行承担风险!

Dart 客户端用于 JokeAPI

jokeapi Uptime / 7 Days

JokeAPI 获取各种笑话,无需任何 API 令牌、会员资格、注册或支付。

使用方法

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Joke App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: JokePage(),
    );
  }
}

class JokePage extends StatefulWidget {
  @override
  _JokePageState createState() => _JokePageState();
}

class _JokePageState extends State<JokePage> {
  String _singleJoke = '';
  String _twoPartJokeSetup = '';
  String _twoPartJokeDelivery = '';

  final JokeApi _jokeApi = JokeApi();

  Future<void> fetchJokes() async {
    try {
      final singleJoke = await _jokeApi.getJoke(type: JokeType.single);
      final twoPartJoke = await _jokeApi.getJoke(type: JokeType.twoPart);

      setState(() {
        _singleJoke = singleJoke.joke;
        _twoPartJokeSetup = twoPartJoke.setup;
        _twoPartJokeDelivery = twoPartJoke.delivery;
      });
    } catch (e) {
      print('Error fetching jokes: $e');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchJokes();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Joke App'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Single Joke:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(_singleJoke),
            SizedBox(height: 16),
            Text(
              'Two-part Joke:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(_twoPartJokeSetup),
            SizedBox(height: 8),
            Text(_twoPartJokeDelivery),
          ],
        ),
      ),
    );
  }
}

说明

  1. 导入包:首先,确保在 pubspec.yaml 文件中添加 jokeapi 依赖:

    dependencies:
      flutter:
        sdk: flutter
      jokeapi: ^0.1.0
    
  2. 创建主应用:在 main.dart 中创建主应用,并设置初始页面为 JokePage

  3. 创建 JokePageJokePage 是一个 StatefulWidget,用于显示笑话。

  4. 初始化状态:在 initState 方法中调用 fetchJokes 方法来获取笑话。

  5. 获取笑话fetchJokes 方法使用 JokeApi 类的 getJoke 方法来获取单行笑话和两部分笑话,并更新状态。

  6. 构建界面:在 build 方法中,使用 Text 小部件显示获取到的笑话。

计划功能

  • ❌ 错误处理
  • ❌ 自动化 API 生成
  • ✅ 支持的端点
    • v2.jokeapi.dev/joke/[Category/-ies]
    • v2.jokeapi.dev/info
    • v2.jokeapi.dev/categories
    • v2.jokeapi.dev/langcode/[Language]
    • v2.jokeapi.dev/languages
    • v2.jokeapi.dev/flags
    • v2.jokeapi.dev/formats
    • v2.jokeapi.dev/ping
    • v2.jokeapi.dev/endpoints
    • v2.jokeapi.dev/submit

支持

如果您喜欢这个项目,可以通过 Buy Me A Coffee 支持作者。

Buy Me A Coffee


更多关于Flutter笑话获取插件jokeapi的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter笑话获取插件jokeapi的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter中使用jokeapi来获取笑话的示例代码。jokeapi是一个公开的笑话API,你可以通过HTTP请求来获取笑话数据。在Flutter中,我们通常使用http包来发送HTTP请求。

首先,你需要在你的pubspec.yaml文件中添加http包的依赖:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3  # 请注意版本号可能会有更新,使用最新版本即可

然后运行flutter pub get来安装依赖。

接下来,你可以创建一个Flutter应用,并在其中使用http包来从jokeapi获取笑话。以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Joke Fetcher',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: JokeScreen(),
    );
  }
}

class JokeScreen extends StatefulWidget {
  @override
  _JokeScreenState createState() => _JokeScreenState();
}

class _JokeScreenState extends State<JokeScreen> {
  String? joke;

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

  Future<void> fetchJoke() async {
    final response = await http.get(Uri.parse('https://api.jokeapi.dev/v2/joke/Any'));

    if (response.statusCode == 200) {
      Map<String, dynamic> data = jsonDecode(response.body);
      setState(() {
        joke = data['setup'] + ' ' + data['punchline'];
      });
    } else {
      throw Exception('Failed to load joke');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Joke Fetcher'),
      ),
      body: Center(
        child: joke == null
            ? CircularProgressIndicator()
            : Text(
                joke!,
                style: TextStyle(fontSize: 20),
              ),
      ),
    );
  }
}

代码解释:

  1. 依赖添加:在pubspec.yaml文件中添加了http包依赖。
  2. 主应用MyApp是一个无状态小部件,定义了应用的主题和主页。
  3. 笑话屏幕JokeScreen是一个有状态小部件,用于显示笑话。
  4. 状态管理:在_JokeScreenState中,我们定义了一个joke字符串变量来存储获取的笑话,并在initState方法中调用fetchJoke方法来获取笑话。
  5. HTTP请求fetchJoke方法使用http.get方法发送GET请求到jokeapi的API端点。如果请求成功(状态码为200),它将解析JSON响应并更新笑话文本。
  6. UI构建:在build方法中,如果笑话文本为空,则显示一个进度指示器;否则,显示笑话文本。

这个示例展示了如何使用Flutter和http包从jokeapi获取笑话并在UI中显示。你可以根据需要进一步扩展这个示例,比如添加错误处理、刷新按钮等。

回到顶部