技术文章大纲

引言

简要介绍输入主题内容的背景及其重要性，说明文章的目标和结构安排。

技术背景

概述输入主题内容涉及的核心概念、相关技术或理论基础，为后续深入讨论提供背景知识。

核心技术与方法

详细分析输入主题内容的关键技术或方法，包括其工作原理、实现方式及适用场景。

应用案例

列举输入主题内容在实际项目或行业中的典型应用案例，展示其实际效果和价值。

优势与挑战

总结输入主题内容的优势，同时分析其面临的挑战或局限性，提供客观评价。

未来发展趋势

探讨输入主题内容未来的发展方向、潜在改进或新兴技术对其可能产生的影响。

结论

归纳全文要点，强调输入主题内容的意义，并展望其未来发展前景。

参考文献

列出文章中引用的相关文献、资料或资源，确保内容的权威性和可追溯性。

引言

当开发者掌握 Flutter 基础组件和入门级状态管理后，会逐步面临网络数据交互、本地数据存储、调用原生能力等进阶开发需求。这些能力是构建生产级 Flutter 应用的核心支柱，直接决定了应用的功能完整性和用户体验。本文将从实际开发场景出发，通过精简且完整的代码案例，手把手教大家掌握 Flutter 进阶三大核心技术。

一、Flutter 进阶技术的应用场景与价值

在基础阶段，我们能实现静态页面和简单状态管理，但要开发真正能落地的应用，必须攻克以下三大技术难点：

• 网络请求：应用的动态数据（如商品列表、用户信息）都需要从后端接口获取，高效的网络请求封装是数据驱动 UI 的基础；
• 数据持久化：用户的登录状态、本地配置、离线数据等需要保存在设备本地，避免应用重启后数据丢失；
• 原生交互：Flutter 自身无法覆盖所有硬件和系统能力（如蓝牙、NFC、系统通知），必须通过与原生 Android/iOS 通信来拓展功能边界。

这三大技术的掌握程度，直接决定了 Flutter 应用的 “天花板”。下面我们将逐一拆解每个技术的实现流程，搭配可直接复用的代码案例，让大家快速上手。

二、Flutter 网络请求实战（基于 Dio 封装）

1. 依赖引入

2. 封装网络请求工具类

import 'package:dio/dio.dart';

class HttpUtil {
  static final HttpUtil _instance = HttpUtil._internal();
  late Dio _dio;
  factory HttpUtil() => _instance;
  
  HttpUtil._internal() {
    _dio = Dio(BaseOptions(baseUrl: "https://www.wanandroid.com", connectTimeout: const Duration(seconds: 5)));
    _dio.interceptors.add(InterceptorsWrapper(onRequest: (options, handler) => handler.next(options)));
  }
  Future<Response> get(String url) async => await _dio.get(url);
}

3. 定义数据模型

import 'package:json_annotation/json_annotation.dart';
part 'article_model.g.dart';

@JsonSerializable()
class Article {
  String? title;
  String? author;
  Article({this.title, this.author});
  factory Article.fromJson(Map<String, dynamic> json) => _$ArticleFromJson(json);
}

@JsonSerializable()
class ArticleListResponse {
  List<Article>? datas;
  ArticleListResponse({this.datas});
  factory ArticleListResponse.fromJson(Map<String, dynamic> json) => _$ArticleListResponseFromJson(json);
}

4. 业务层调用与 UI 展示

import 'package:flutter/material.dart';
import 'http_util.dart';
import 'article_model.dart';

void main() => runApp(MaterialApp(home: ArticleListPage()));

class ArticleListPage extends StatefulWidget {
  @override
  State<ArticleListPage> createState() => _ArticleListPageState();
}

class _ArticleListPageState extends State<ArticleListPage> {
  List<Article> _list = [];
  
  @override
  void initState() {
    super.initState();
    HttpUtil().get("/article/list/0/json").then((res) {
      setState(() => _list = ArticleListResponse.fromJson(res.data).datas ?? []);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("文章列表")),
      body: ListView.builder(itemCount: _list.length, itemBuilder: (_, i) => ListTile(title: Text(_list[i].title ?? ""))),
    );
  }
}

代码说明：精简后保留核心逻辑，通过 Dio 获取玩 Android 文章列表，解析后展示在 ListView 中，可直接运行

三、Flutter 数据持久化实战

1. 轻量级存储（SharedPreferences）

封装工具类

import 'package:shared_preferences/shared_preferences.dart';

class SpUtil {
  static late SharedPreferences _sp;
  static Future<void> init() async => _sp = await SharedPreferences.getInstance();
  static Future<bool> setString(String k, String v) async => await _sp.setString(k, v);
  static String getString(String k) => _sp.getString(k) ?? "";
}

实战调用

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SpUtil.init();
  runApp(MaterialApp(home: Scaffold(
    body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
      ElevatedButton(onPressed: () => SpUtil.setString("token", "abc123"), child: const Text("存Token")),
      ElevatedButton(onPressed: () => print(SpUtil.getString("token")), child: const Text("读Token")),
    ])),
  )));
}

2. 结构化存储（sqflite）

数据库帮助类

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class DbHelper {
  static final DbHelper _instance = DbHelper._internal();
  factory DbHelper() => _instance;
  DbHelper._internal();
  Future<Database> get db async => await openDatabase(join(await getDatabasesPath(), "collect.db"),
    version: 1, onCreate: (db, _) => db.execute("CREATE TABLE collect (id INTEGER PRIMARY KEY, title TEXT)"));
  
  Future<int> insert(String title) async => await (await db).insert("collect", {"title": title});
  Future<List<Map>> query() async => await (await db).query("collect");
}

页面调用

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

void main() => runApp(MaterialApp(home: CollectPage()));

class CollectPage extends StatefulWidget {
  @override
  State<CollectPage> createState() => _CollectPageState();
}

class _CollectPageState extends State<CollectPage> {
  List<Map> _list = [];
  
  void _add() async {
    await DbHelper().insert("Flutter进阶");
    setState(() async => _list = await DbHelper().query());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("我的收藏")),
      body: ListView.builder(itemCount: _list.length, itemBuilder: (_, i) => ListTile(title: Text(_list[i]["title"]))),
      floatingActionButton: FloatingActionButton(onPressed: _add, child: const Icon(Icons.add)),
    );
  }
}

代码说明：精简后保留数据库创建、插入、查询核心逻辑，实现收藏文章的本地存储与展示。

四、Flutter 与原生交互实战（MethodChannel）

1. Flutter 端代码

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

void main() => runApp(MaterialApp(home: NativePage()));

class NativePage extends StatefulWidget {
  @override
  State<NativePage> createState() => _NativePageState();
}

class _NativePageState extends State<NativePage> {
  static const _channel = MethodChannel("com.flutter.native/version");
  String _version = "未获取";

  void _getVersion() async {
    setState(() async => _version = await _channel.invokeMethod("getAndroidVersion") ?? "获取失败");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Text("Android版本：$_version"),
        ElevatedButton(onPressed: _getVersion, child: const Text("获取版本号")),
      ])),
    );
  }
}

2. Android 原生端代码（MainActivity.kt）

代码说明：通过 MethodChannel 实现 Flutter 调用 Android 原生 API 获取系统版本号，代码精简且通信逻辑完整。

五、全文总结

本文通过精简且可直接运行的代码案例，讲解了 Flutter 进阶开发的三大核心能力：基于 Dio 的网络请求封装、SharedPreferences/sqflite 的数据持久化、MethodChannel 的原生交互。这些技术是构建生产级 Flutter 应用的必备能力，建议开发者在此基础上拓展更多场景（如文件上传下载、原生相机调用、数据库复杂查询），进一步提升实战能力。

https://openharmonycrossplatform.csdn.net/content