声明

本文源自21天开源鸿蒙跨平台训练营活动-第十篇博客

文章导读-源自官网文档

俗话说“没有人是孤岛”， 一款没有任何网络功能的Flutter应用 感觉有点断开感。 本页介绍如何添加网络功能 到你的Flutter应用。你的应用会检索数据， 将JSON解析为可用于内存表示的对象， 然后再发送数据。

一、网络数据概念介绍

1.1原文导读

(官网图1)

(官网图2)

(官网图3)

1.2为什么需要这篇实战指南？

        通过本篇官网的内容不难发现，教程内容体验不佳给的过于极简以及部分链接无法观看，那么下面由我通过案例实战和个人认知对本篇内容做个学习笔记，供大家参考学习！

        简单来说，给Flutter项目联网是构建现代应用的基础，而HTTP GET操作是网络请求的入门关键。本文将带你从零开始，构建一个功能完整的跨平台CSDN浏览器应用。

1.3学习成果预览

我们即将开发一个名为"皎月浏览器"的跨平台应用，主要功能包括：

• ✅ 支持所有Flutter平台：Web、移动端、桌面端
• ✅ 快速访问CSDN各大板块
• ✅ 自定义网址输入
• ✅ 在系统浏览器中打开网页
• ✅ 简洁美观的用户界面
  
  

二、案例实战解析

2.1配置依赖文件（pubspec.yaml）

name: jiaoyue_browser
description: 皎月浏览器 - 跨平台CSDN浏览器
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0      # 移动端网页浏览
  url_launcher: ^6.2.0         # 跨平台URL打开
  device_info_plus: ^10.0.0    # 平台检测
  http: ^1.1.0                 # HTTP网络请求（重要！）

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

关键依赖说明：

http包：Flutter官方推荐的HTTP客户端，是我们进行网络请求的基础

url_launcher包：跨平台URL启动器，支持在不同平台打开链接

webview_flutter包：在应用内嵌入网页浏览器

device_info_plus包：检测当前运行平台，实现平台特定逻辑

2.2安装依赖

flutter pub get

2.3代码解析部分

        2.3.1主应用入口（main.dart）

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:device_info_plus/device_info_plus.dart';

void main() {
  runApp(const CSDNBrowserApp());
}

class CSDNBrowserApp extends StatelessWidget {
  const CSDNBrowserApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '皎月浏览器',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomeScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

• MaterialApp是Flutter应用的根组件

• theme定义了应用的主题样式

• debugShowCheckedModeBanner: false移除了调试条幅
  其他代码部分都在我的个人仓库master分支，大家点击这段话进行下载获取！https://gitcode.com/xj654/new_f_h.git

 2.4为什么需要HTTP包？

虽然我们的浏览器应用主要使用url_launcher和webview_flutter，但理解HTTP请求是Flutter网络开发的基础。让我们通过一个简单的示例来学习：

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

class NetworkService {
  // 基础GET请求
  Future<String> fetchCSDNHomePage() async {
    try {
      final response = await http.get(
        Uri.parse('https://www.csdn.net/'),
        headers: {
          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
        },
      );
      
      if (response.statusCode == 200) {
        return response.body;
      } else {
        throw Exception('HTTP请求失败: ${response.statusCode}');
      }
    } catch (e) {
      throw Exception('网络请求异常: $e');
    }
  }
  
  // 带参数的GET请求
  Future<Map<String, dynamic>> searchArticles(String keyword) async {
    final response = await http.get(
      Uri.https('api.csdn.net', '/search', {'q': keyword, 'page': '1'}),
    );
    
    return jsonDecode(response.body);
  }
}

2.5 HTTP请求的关键要素

1. 状态码处理

   • 200：请求成功

   • 404：资源未找到

   • 500：服务器内部错误

2. 请求头设置

   • User-Agent：模拟浏览器

   • Content-Type：指定数据类型

   • Authorization：认证信息

3. 异常处理

   • 网络连接异常

   • 超时处理

   • JSON解析错误

2.6查看运行效果

终端运行下面命令，chrome 可换成 edge！

flutter run -d chrome

三、总结与寄语

3.1总结

通过上面演示效果来看，已经成功的演示了在浏览器跑通的 flutter 项目，完成学习成果预览部分！

而且我们掌握了

1. Flutter基础架构：Widget树、状态管理、生命周期

2. 网络请求：HTTP基础、URL处理、异常捕获

3. 跨平台开发：平台检测、适配策略、响应式设计

4. 用户界面：Material Design、交互设计、用户体验

Flutter网络开发并不复杂，关键在于理解核心概念并多实践。这个"皎月浏览器"项目涵盖了Flutter网络开发的主要方面，希望通过这个实战案例，能帮助你更好地掌握Flutter网络编程。

记住： 最好的学习方式是动手实践。尝试修改代码、添加新功能、解决遇到的问题，这样你会进步得更快。

3.2寄语

下篇内容则是在 DevEco 模拟器上完成应用，请大家持续跟着我一起学习吧！