首页手记 Flutter网络编程入门：轻松掌握网络请求

Flutter网络编程入门：轻松掌握网络请求

标签：

移动开发

概述

本文介绍了Flutter网络编程入门的相关知识，包括如何在Flutter项目中引入常用的网络请求库dio和http，以及如何进行基本的GET和POST请求。文章还涵盖了网络请求的最佳实践，包括异步编程、错误处理和状态管理。

引入Flutter网络库

在Flutter项目中进行网络请求时，通常会使用一些第三方库来简化操作。常见的网络请求库有dio和http。

1.1 介绍常用的网络请求库

dio: 是一个强大的HTTP客户端，支持拦截请求和响应，自动处理重复请求，支持请求取消，支持文件上传和下载等。
http: 是一个简单的HTTP客户端，适合进行基本的HTTP请求。

1.2 如何在Flutter项目中引入网络库

在Flutter项目中引入这些库需要在pubspec.yaml文件中添加相应的依赖。具体步骤如下：

打开项目中的pubspec.yaml文件。
在dependencies部分添加相应的依赖项。

例如，引入dio库：

dependencies:
  dio: ^4.0.0

引入http库：

dependencies:
  http: ^0.13.4

保存配置文件，然后运行flutter pub get命令来安装依赖。

发送GET请求

GET请求用于从服务器获取数据。在Flutter中，我们可以使用dio或http库来发送GET请求。

GET请求的基本概念

URL：要访问的服务器地址。
参数：GET请求可以通过URL中的查询参数传递。
返回值：通常返回JSON或XML等格式的数据。

使用dio或http发送GET请求

使用dio发送GET请求：

import 'package:dio/dio.dart';

Future<void> fetchPosts() async {
  final dio = Dio();
  final response = await dio.get('https://jsonplaceholder.typicode.com/posts');
  if (response.statusCode == 200) {
    print(response.data);
  } else {
    print('请求失败');
  }
}

使用http发送GET请求：

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

Future<void> fetchPosts() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
  if (response.statusCode == 200) {
    final json = jsonDecode(response.body);
    print(json);
  } else {
    print('请求失败');
  }
}

示例：从API获取数据并展示

假设我们有一个简单的Flutter应用，用于展示从API获取的数据。应用包含一个ListView，用于显示获取的数据。

使用dio：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Network Demo',
      home: PostsPage(),
    );
  }
}

class PostsPage extends StatefulWidget {
  @override
  _PostsPageState createState() => _PostsPageState();
}

class _PostsPageState extends State<PostsPage> {
  List<Map<String, dynamic>> posts = [];

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

  Future<void> fetchPosts() async {
    final dio = Dio();
    final response = await dio.get('https://jsonplaceholder.typicode.com/posts');
    if (response.statusCode == 200) {
      setState(() {
        posts = List.from(response.data);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Posts')),
      body: ListView.builder(
        itemCount: posts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(posts[index]['title']),
            subtitle: Text(posts[index]['body']),
          );
        },
      ),
    );
  }
}

使用http：

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: 'Flutter Network Demo',
      home: PostsPage(),
    );
  }
}

class PostsPage extends StatefulWidget {
  @override
  _PostsPageState createState() => _PostsPageState();
}

class _PostsPageState extends State<PostsPage> {
  List<Map<String, dynamic>> posts = [];

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

  Future<void> fetchPosts() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    if (response.statusCode == 200) {
      setState(() {
        posts = List.from(jsonDecode(response.body));
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Posts')),
      body: ListView.builder(
        itemCount: posts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(posts[index]['title']),
            subtitle: Text(posts[index]['body']),
          );
        },
      ),
    );
  }
}

发送POST请求

POST请求用于向服务器提交数据。在Flutter中，同样可以使用dio或http库来发送POST请求。

POST请求的基本概念

URL：要访问的服务器地址。
参数：POST请求可以通过请求体传递数据。
返回值：通常返回JSON或XML等格式的数据。

使用dio或http发送POST请求

使用dio发送POST请求：

import 'package:dio/dio.dart';

Future<void> sendPost() async {
  final dio = Dio();
  final response = await dio.post('https://jsonplaceholder.typicode.com/posts', data: {
    'title': 'Flutter POST Example',
    'body': 'This is an example post',
    'userId': 1
  });
  if (response.statusCode == 201) {
    print('POST请求成功');
    print(response.data);
  } else {
    print('POST请求失败');
  }
}

使用http发送POST请求：

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

Future<void> sendPost() async {
  final response = await http.post(Uri.parse('https://jsonplaceholder.typicode.com/posts'), 
    headers: {
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode({
      'title': 'Flutter POST Example',
      'body': 'This is an example post',
      'userId': 1
    })
  );
  if (response.statusCode == 201) {
    print('POST请求成功');
    print(jsonDecode(response.body));
  } else {
    print('POST请求失败');
  }
}

示例：向API提交数据

假设我们有一个简单的Flutter应用，用于向API提交数据。应用包含一个表单，用户可以填写数据并提交。

使用dio：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Network Demo',
      home: PostForm(),
    );
  }
}

class PostForm extends StatefulWidget {
  @override
  _PostFormState createState() => _PostFormState();
}

class _PostFormState extends State<PostForm> {
  final _formKey = GlobalKey<FormState>();
  String title = '';
  String body = '';

  void handleSubmit() {
    if (_formKey.currentState?.validate() == true) {
      _formKey.currentState?.save();
      sendPost();
    }
  }

  Future<void> sendPost() async {
    final dio = Dio();
    final response = await dio.post('https://jsonplaceholder.typicode.com/posts', data: {
      'title': title,
      'body': body,
      'userId': 1
    });
    if (response.statusCode == 201) {
      print('POST请求成功');
      print(response.data);
    } else {
      print('POST请求失败');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Post Form')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: '标题'),
                onSaved: (value) => title = value!,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '标题不能为空';
                  }
                  return null;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: '内容'),
                onSaved: (value) => body = value!,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '内容不能为空';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: handleSubmit,
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

使用http：

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: 'Flutter Network Demo',
      home: PostForm(),
    );
  }
}

class PostForm extends StatefulWidget {
  @override
  _PostFormState createState() => _PostFormState();
}

class _PostFormState extends State<PostForm> {
  final _formKey = GlobalKey<FormState>();
  String title = '';
  String body = '';

  void handleSubmit() {
    if (_formKey.currentState?.validate() == true) {
      _formKey.currentState?.save();
      sendPost();
    }
  }

  Future<void> sendPost() async {
    final response = await http.post(Uri.parse('https://jsonplaceholder.typicode.com/posts'), 
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode({
        'title': title,
        'body': body,
        'userId': 1
      })
    );
    if (response.statusCode == 201) {
      print('POST请求成功');
      print(jsonDecode(response.body));
    } else {
      print('POST请求失败');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Post Form')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: '标题'),
                onSaved: (value) => title = value!,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '标题不能为空';
                  }
                  return null;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: '内容'),
                onSaved: (value) => body = value!,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '内容不能为空';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: handleSubmit,
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

处理网络响应

在发送网络请求后，我们需要解析返回的数据，并处理可能出现的异常。

解析JSON数据

解析JSON数据通常使用dart:convert库中的jsonDecode方法。

import 'dart:convert';

String json = '{"name": "John", "age": 30}';
Map<String, dynamic> data = jsonDecode(json);
print(data['name']);  // 输出 "John"

异步编程基础

在Flutter中，异步操作通常使用Future。Future表示一个异步操作的结果，并且可以在未来某个时间点完成。

Future<void> fetchPosts() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
  if (response.statusCode == 200) {
    final json = jsonDecode(response.body);
    print(json);
  } else {
    print('请求失败');
  }
}

错误处理：捕获和处理网络请求中的异常

在发送网络请求时，可能会遇到各种异常，如网络连接错误、超时等。我们可以使用try-catch语句来捕获和处理这些异常。

Future<void> fetchPosts() async {
  try {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    if (response.statusCode == 200) {
      final json = jsonDecode(response.body);
      print(json);
    } else {
      throw Exception('请求失败');
    }
  } catch (e) {
    print('发生错误: $e');
  }
}

网络请求的最佳实践

在实际开发中，网络请求的最佳实践可以帮助我们构建稳定、高效的Flutter应用。

使用FutureBuilder处理异步请求

FutureBuilder是一个强大的Widget，用于构建异步数据流。它可以根据Future的状态来改变UI。

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: 'Flutter Network Demo',
      home: PostsPage(),
    );
  }
}

class PostsPage extends StatefulWidget {
  @override
  _PostsPageState createState() => _PostsPageState();
}

class _PostsPageState extends State<PostsPage> {
  Future<List<Map<String, dynamic>>> postsFuture;

  @override
  void initState() {
    super.initState();
    postsFuture = fetchPosts();
  }

  Future<List<Map<String, dynamic>>> fetchPosts() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    if (response.statusCode == 200) {
      return List.from(jsonDecode(response.body));
    } else {
      throw Exception('请求失败');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Posts')),
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: postsFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('请求失败: ${snapshot.error}'));
          } else if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data[index]['title']),
                  subtitle: Text(snapshot.data[index]['body']),
                );
              },
            );
          } else {
            return Center(child: Text('没有数据'));
          }
        },
      ),
    );
  }
}

优化网络请求的性能

使用缓存：可以使用dio库的缓存插件来缓存网络请求的数据。
减少请求次数：合并多个请求到一个请求中，或者使用分页加载数据。
使用响应压缩：服务器可以返回压缩的数据，减少传输时间。

管理网络状态：加载中、成功、失败

通过状态管理，可以在不同的网络状态时显示不同的UI。

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: 'Flutter Network Demo',
      home: PostsPage(),
    );
  }
}

class PostsPage extends StatefulWidget {
  @override
  _PostsPageState createState() => _PostsPageState();
}

class _PostsPageState extends State<PostsPage> {
  String status = '加载中';
  List<Map<String, dynamic>> posts = [];

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

  Future<void> fetchPosts() async {
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
      if (response.statusCode == 200) {
        setState(() {
          posts = List.from(jsonDecode(response.body));
          status = '成功';
        });
      } else {
        throw Exception('请求失败');
      }
    } catch (e) {
      setState(() {
        status = '失败';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Posts')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(status),
            if (status == '成功')
              ListView.builder(
                shrinkWrap: true,
                itemCount: posts.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(posts[index]['title']),
                    subtitle: Text(posts[index]['body']),
                  );
                },
              ),
          ],
        ),
      ),
    );
  }
}

实战演练

通过前面的知识点，我们可以完成一个小项目，综合运用网络请求、状态管理等技术。

综合运用前面的知识点，完成一个小项目

假设我们正在构建一个简单的博客应用，用户可以浏览文章列表，并查看文章详情。

首先，我们需要从API获取文章列表：

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

Future<List<Map<String, dynamic>>> fetchPosts() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
  if (response.statusCode == 200) {
    return List.from(jsonDecode(response.body));
  } else {
    throw Exception('请求失败');
  }
}

然后，我们可以在主页面中展示文章列表：

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: 'Flutter Network Demo',
      home: PostsPage(),
    );
  }
}

class PostsPage extends StatefulWidget {
  @override
  _PostsPageState createState() => _PostsPageState();
}

class _PostsPageState extends State<PostsPage> {
  Future<List<Map<String, dynamic>>> postsFuture;

  @override
  void initState() {
    super.initState();
    postsFuture = fetchPosts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Posts')),
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: postsFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('请求失败: ${snapshot.error}'));
          } else if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data[index]['title']),
                  subtitle: Text(snapshot.data[index]['body']),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => PostDetailPage(snapshot.data[index]),
                      ),
                    );
                  },
                );
              },
            );
          } else {
            return Center(child: Text('没有数据'));
          }
        },
      ),
    );
  }
}

class PostDetailPage extends StatelessWidget {
  final Map<String, dynamic> post;

  PostDetailPage(this.post);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(post['title'])),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Text(post['body']),
          ],
        ),
      ),
    );
  }
}

分享常见问题及解决方法

在实际开发中，可能会遇到一些常见问题：

请求失败：检查网络连接和API地址是否正确。
JSON解析错误：确保返回的数据格式正确。
UI刷新问题：使用setState来刷新UI。

通过正确的配置和调试，这些问题都可以得到解决。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕丝7291255

手记
篇

粉丝

15

获赞与收藏

70

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空