Flutter入门（完整教程）
一、Flutter简介：
Flutter是谷歌公司开发的一款开源、免费的UI框架，用于构建跨平台的应用程序，可以让我们快速的在Android和iOS上构建高质量App。Flutter的特点包括丰富的预设组件、热重载技术加快开发速度以及高度自定义的美观界面设计，其中它最大的特点就是跨平台以及高性能，目前Flutter已经支持 iOS、Android、Web、Windows、macOS、Linux 的跨平台开发。
Flutter
基于谷歌的
dart
语言，如果没有任何
Dart
语言的基础，不建议直接学习
Flutter
。建议先学习
Dart语言的基本语法。然后再进入Flutter
的学习。
Dart基础教程学习：
Dart Flutter教程
市面上已经有很多的混合
App
开发框架了，但是有些混合
APP
开发框架主要是针对前端开发者的：比如 ReactNative（基于
React
）、
Ionic
（基于
Angular
、
Vue
、
React
）。有些则是针对
.Net
平台针对
.Net
开发者的比如：Xamarin
Flutter
是谷歌基于
Dart
语言开发的一款跨平台的
App
开发框架。它针对的开发者是全部开发者。它的性能相比RN
、
Ionic这样的框架要更好一些。
Flutter
在
2019
年的时候就拥有了非常高的关注度， IT营大地老师的《
Flutter
仿京东商城项目实战第一版》在当时已经有100
多万的学习者了。
Flutter
目前已经非常稳定，并且社区也非常完善了
,
应用市场中新发布的新应用有进一半是Flutter
开发的应用。
Flutter3.x
以后不仅支持了
Android Ios App
的跨平台开发，还支持了Web
、
Windows
、
MacOs
、
Linux
桌面应用的跨平台开发。全球很多公司都已经在商业项目中使用Flutter，比如
Google
、微软、阿里、字节、百度、京东等。
Flutter
在
Github Star
数已经有
150
万了， 在跨端框架中排名第一。据官方统计截止到2024
年
9
月，已经有
超过
100
万款
商业应用程序是用Flutter建立的 。
Flutter
是一个非常值得学习的框架，
Flutter
不仅具有跨平台、高性能等特点，还具有稳定性的特点，从2018
年
12
月
5
日发布的
Flutter1.0
到后面的所有版本用法都是一样的。
Flutter
官网：
https://flutter.dev/
Flutter Packages
官网：
https://pub.dev/
二、Windows上面搭建Flutter Android运行环境
对应软件可以留言或者在上面视频的下方置顶评论区的网盘里面下载。
Flutter Android
环境搭建：
电脑上面安装配置
JDK
（
版本
jdk-22
）
电脑上下载安装
Android Studio
（
版本
android-studio-2024.2.1.11
）
电脑上面下载配置
Flutter Sdk
（
版本
网盘提供的是的
Flutter 3.24.5
，适用于
Flutter3.7.3
之后的
所有版本）
电脑上配置
Flutter
国内镜像
运行
flutter doctor
命令检测环境是否配置成功，根据提示配置安装对应软件
打开
Android Studio
安装
Flutter
插件
创建运行
Flutter
项目
2.1、 电脑上面安装配置JDK
1、下载安装JDK（jdk-22或者最新版本）
https://www.oracle.com/java/technologies/downloads/
2
、配置
JDK
**
提示： 安装完成后输入
java
、
javac
就有提示信息，但是也需要配置环境变量
1
、
系统变量
里面新增
JAVA_HOME
，设置值为
java sdk
根目录：
2
、
系统变量
找到
Path
在
Path
环境变量里面增加如下代码
(
提示
jdk19
无需配置
jre
)
;
%JAVA_HOME%\bin
;
win10
、
win11
中的配置
2.2 、电脑上下载安装Android Studio
https://developer.android.google.cn/studio
2.3
、电脑上面下载配置
Flutter Sdk
（所有版本方法一样）
1
、下载
Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases#windows
2
、把下载好的
Flutter SDK
随便减压到你想安装
Sdk
的目录
如减压到
（
F:\flutter_windows\flutter
）
3
、把
Flutter
安装目录的
bin
目录配置到环境变量。
如上图所示需要把
F:\flutter_windows\flutter\bin
目录配置到
path
环境变量里面
windows10
、
windows11
：
2.4
、电脑上配置
Flutter
国内镜像
搭建环境过程中要下载很多资源文件，当一些资源下载不了的时候，可能会报各种错误。在国内访问Flutter的时候有可能会受到限制。
Flutter
官方为我们提供了国内的镜像
https://flutter.dev/community/china
https://flutter-io.cn/
拉到
Flutter
中文网最下面有配置方式，把下面两句配置到环境变量里面
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn
Flutter 社区镜像
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn清华大学 TUNA 协会镜像
FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter
PUB_HOSTED_URL: https://mirrors.tuna.tsinghua.edu.cn/dart-pub
2.5、运行 flutter doctor命令检测环境是否配置成功
第一次执行可能会提示下面错误：
1、错误一：cmdline-tools component is missing
2
、错误二：
Visual Studio not installed
如果只是开发
Flutter APP
可以忽略此错误信息
3
、错误三：
Android Studio Unable to find bundled Java
version.
Android Studio Unable to find bundled Java version
解决方法：
如果是
macOS
系统，在
jbr
同目录下创建一个
jre
目录，然后将
jbr
目录内的全部文件复制一份到
jre
目录下即可。
如果是
Windows
系统，
jre
目录是存在的，不过里面几乎没东西，可以直接将
jbr
目录内的全部文件复制一份到jre
目录下即可。
详情参考：
http://bbs.itying.com/topic/63eafd840d0a6c0aecbe5436
4
、错误一的解决方法安装
cmdline-tools
以及配置
android-
licenses
：
4.1
安装
cmdline-tools
4.2 配置android-licenses
这个时候复制上面红色框框内的命令
flutter doctor --android-licenses注意：提示输入Y/N的地方全部输入Y
5
、错误二的解决方法安装
Visual Studio
：
Visual Studio
主要用于
flutter
桌面软件开发，如果您只是开发
flutter app
可以不用安装
Visual Studio
https://visualstudio.microsoft.com/zh-hans/downloads/
如果安装失败可以修改DNS尝试
6
、错误三的解决方法
Android Studio Unable to find bundled Java version
解决方法：
如果是
macOS
系统，在
jbr
同目录下创建一个
jre
目录，然后将
jbr
目录内的全部文件复制一份到
jre
目录下即可。
如果是
Windows
系统，
jre
目录是存在的，不过里面几乎没东西，可以直接将
jbr
目录内的全部文件复制一份到jre
目录下即可。
详情参考：http://bbs.itying.com/topic/63eafd840d0a6c0aecbe5436
2.6、打开Android Studio 安装Flutter插件
因时间有限，就不一 一发出来了，新版
Android Studio
配置等更多Flutter入门知识点可以下方视频学习 （注：视频评论区置顶里面有全套的课件源码及视频的网盘下载地址）
Dart Flutter教程