欢迎加入开源鸿蒙PC社区（https://harmonypc.csdn.net/）

教程简介

本教程专为零基础开发者打造，全程包含可落地的详细步骤，无需额外查阅资料即可完成所有实践：从Flutter环境搭建、基础项目创建，到高频实用三方库集成使用，再到鸿蒙（HarmonyOS）原生开发入门、项目实操，最终实现跨平台与鸿蒙开发双掌握。所有步骤适配最新稳定版环境，复制粘贴即可运行。

目录

1. 教程核心亮点与环境准备

2. Flutter基础入门：项目创建+核心组件实操

3. Flutter必备三方库集成：从安装到实战使用

4. 鸿蒙（HarmonyOS）原生开发入门：环境+项目+基础功能

5. 综合实践：Flutter项目联动鸿蒙开发思路

6. 常见问题排查

---

一、教程核心亮点与环境准备

核心亮点

• 纯入门级：无编程基础也能跟着做

• 全步骤实操：每一步带命令/截图提示，无跳步

• 技术全覆盖：Flutter基础 + 高频三方库 + 鸿蒙原生开发

• 可直接复用：代码可移植到个人/企业项目

通用环境准备（所有实践前置要求）

1. 电脑系统：Windows 10+/macOS 12+/Linux（推荐Windows/macOS）

2. 内存要求：8GB及以上（推荐16GB）

3. 必备软件：

   • Git（版本控制）

   • VS Code（代码编辑器，免费轻量）

   • 安卓模拟器/真机（Flutter调试用）

---

二、Flutter基础入门：项目创建+核心组件实操

步骤1：Flutter环境安装（详细步骤）

1. 下载Flutter SDK

官网下载：https://flutter.dev/docs/get-started/install

解压到非中文路径（如D:\Flutter、/Users/xxx/Flutter）

2. 配置系统环境变量

   • Windows：此电脑→属性→高级系统设置→环境变量→Path→添加Flutter的bin目录

   • macOS：终端执行 open ~/.zshrc，添加 export PATH=$PATH:/xxx/flutter/bin

3. 验证安装

终端输入命令，出现版本号即成功：
flutter --version

4. 检查依赖完整性
   flutter doctor
   按照提示安装缺失的组件（如Android Studio、Chrome等）

步骤2：创建第一个Flutter项目

1. 终端进入项目存放目录，执行创建命令：
   flutter create flutter_demo

2. 进入项目目录：
   cd flutter_demo

3. 启动项目（自动打开模拟器/连接真机）：
   flutter run

4. 效果：看到默认的计数器页面，说明项目创建成功

步骤3：Flutter核心基础组件实操

修改项目lib/main.dart文件，替换为以下代码，实现文本、按钮、图片、布局基础功能：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter基础入门',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

// 主页核心组件
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter基础组件实战')), // 顶部导航栏
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 1. 文本组件
            const Text(
              'Hello Flutter',
              style: TextStyle(fontSize: 24, color: Colors.blue),
            ),
            const SizedBox(height: 20), // 间距组件
            
            // 2. 图片组件（网络图片）
            Image.network(
              'https://picsum.photos/200',
              width: 200,
              height: 200,
            ),
            const SizedBox(height: 20),
            
            // 3. 按钮组件
            ElevatedButton(
              onPressed: () {
                print('按钮被点击了');
              },
              child: const Text('点击我'),
            ),
          ],
        ),
      ),
    );
  }
}

实操效果：重启项目后，页面展示文本、网络图片、可点击按钮，控制台打印点击日志。

---

三、Flutter必备三方库集成：从安装到实战使用

三方库是Flutter开发的核心效率工具，本教程选取4个高频必备库，带详细集成步骤：

1. shared_preferences（本地轻量存储）

2. dio（网络请求）

3. fluttertoast（轻量提示框）

4. cached_network_image（缓存网络图片）

通用三方库集成步骤（所有库通用）

1. 打开项目pubspec.yaml文件

2. 在dependencies节点下添加库依赖

3. 终端执行安装命令：
   flutter pub get

4. 导入库使用：import '包名';

实战1：shared_preferences（本地存储）

步骤1：添加依赖

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2  # 添加这行

步骤2：实战代码（存储/读取数据）

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

class StoragePage extends StatefulWidget {
  const StoragePage({super.key});

  @override
  State<StoragePage> createState() => _StoragePageState();
}

class _StoragePageState extends State<StoragePage> {
  String _savedData = '无存储数据';

  // 存储数据
  _saveData() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('userName', 'Flutter开发者');
    setState(() {
      _savedData = '存储成功！';
    });
  }

  // 读取数据
  _getData() async {
    final prefs = await SharedPreferences.getInstance();
    setState(() {
      _savedData = prefs.getString('userName') ?? '未找到数据';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('本地存储三方库')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_savedData, style: const TextStyle(fontSize: 20)),
            const SizedBox(height: 20),
            ElevatedButton(onPressed: _saveData, child: const Text('存储数据')),
            ElevatedButton(onPressed: _getData, child: const Text('读取数据')),
          ],
        ),
      ),
    );
  }
}

实战2：dio（网络请求）+ fluttertoast（提示框）

步骤1：添加依赖

dependencies:
  dio: ^5.4.0
  fluttertoast: ^8.2.2

步骤2：实战代码（请求接口+提示结果）

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

class NetworkPage extends StatefulWidget {
  const NetworkPage({super.key});

  @override
  State<NetworkPage> createState() => _NetworkPageState();
}

class _NetworkPageState extends State<NetworkPage> {
  String _responseData = '点击按钮请求数据';

  // 发起网络请求
  _requestData() async {
    try {
      var response = await Dio().get('https://api.github.com');
      setState(() {
        _responseData = response.toString();
      });
      Fluttertoast.showToast(msg: '请求成功'); // 提示框
    } catch (e) {
      Fluttertoast.showToast(msg: '请求失败');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('网络请求三方库')),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              ElevatedButton(onPressed: _requestData, child: const Text('发起请求')),
              const SizedBox(height: 20),
              Text(_responseData),
            ],
          ),
        ),
      ),
    );
  }
}

实战3：cached_network_image（缓存图片）

步骤1：添加依赖

dependencies:
  cached_network_image: ^3.3.0

步骤2：实战代码（带缓存+占位图的图片）

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('图片缓存三方库')),
      body: Center(
        // 缓存图片：无网络显示占位图，加载过自动缓存
        child: CachedNetworkImage(
          imageUrl: 'https://picsum.photos/300',
          placeholder: (context, url) => const CircularProgressIndicator(), // 加载中占位
          errorWidget: (context, url, error) => const Icon(Icons.error), // 加载失败占位
          width: 300,
          height: 300,
        ),
      ),
    );
  }
}

---

四、鸿蒙（HarmonyOS）原生开发入门：环境+项目+基础功能

步骤1：鸿蒙开发环境安装

1. 下载DevEco Studio（鸿蒙官方IDE）：

https://developer.harmonyos.com/zh-cn/develop/deveco-studio

2. 安装时默认配置，自动安装鸿蒙SDK、模拟器

3. 启动IDE，等待依赖下载完成

步骤2：创建第一个鸿蒙原生项目

1. 打开DevEco Studio → Create Project

2. 选择「Empty Ability」→ Next

3. 配置项目：

   • Project name：harmony_demo

   • Save location：非中文路径

   • Language：ArkTS（鸿蒙主推语言）

   • Device type：Phone（手机）

4. 点击Finish，等待项目构建完成

步骤3：鸿蒙项目启动与调试

1. 右上角点击「Device Manager」→ 启动内置手机模拟器

2. 点击右上角「运行」按钮（绿色三角）

3. 效果：模拟器显示默认页面，项目启动成功

步骤4：鸿蒙基础功能实操

修改src/main/ets/pages/Index.ets文件，实现文本、按钮、点击事件：

@Entry
@Component
struct Index {
  @State message: string = 'Hello HarmonyOS'
  @State count: number = 0

  build() {
    Column() {
      // 文本组件
      Text(this.message)
        .fontSize(30)
        .fontColor('#0077FF')
        .margin({ bottom: 20 })

      // 计数展示
      Text(`点击次数：${this.count}`)
        .fontSize(24)
        .margin({ bottom: 20 })

      // 按钮组件 + 点击事件
      Button('点击增加计数')
        .width(200)
        .height(50)
        .onClick(() => {
          this.count++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

实操效果：点击按钮，计数实时增加，纯鸿蒙原生功能实现。

---

五、综合实践：Flutter项目联动鸿蒙开发思路

本教程进阶实践，实现Flutter跨平台项目适配鸿蒙设备核心思路：

1. Flutter项目完成核心功能（文本、网络、存储、图片）

2. 使用Flutter的flutter_ohos插件适配鸿蒙平台

3. 打包Flutter项目为鸿蒙支持的格式

4. 导入DevEco Studio中运行，实现一套代码多端运行

---

六、常见问题排查

1. Flutter三方库安装失败

解决：执行flutter clean → flutter pub get，检查依赖版本兼容性

2. Flutter项目无法启动

解决：检查模拟器是否开启，执行flutter doctor修复缺失依赖

3. 鸿蒙项目构建失败

解决：重启DevEco Studio，重新下载SDK，检查项目路径无中文

4. 网络请求三方库dio报错

解决：检查网络权限，安卓项目添加android/app/src/main/AndroidManifest.xml网络权限

---

总结

1. 本教程全程可实操，从Flutter环境、基础组件，到4大高频三方库实战，再到鸿蒙原生开发，零基础可直接跟着做

2. 所有代码可直接复制运行，无需额外修改，适配最新稳定版环境

3. 掌握后可独立完成Flutter跨平台项目、鸿蒙原生项目，以及三方库高效集成开发