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/
https://i-blog.csdnimg.cn/direct/26a1662c94b04c61abc1e9fc677a75bd.png
2、配置JDK
**提示： 安装完成后输入java、javac就有提示信息，但是也需要配置环境变量
1、体系变量 里面新增JAVA_HOME，设置值为java sdk 根目次：https://i-blog.csdnimg.cn/direct/e7b6a76f7eb14f7a9aa4e9172974f864.png
2、体系变量 找到Path 在Path环境变量里面增加如下代码(提示jdk19无需配置jre)
;%JAVA_HOME%\bin;
win10、win11中的配置
https://i-blog.csdnimg.cn/direct/bad3906b4da644d0bcef660710ee7c89.png
2.2 、电脑上下载安装Android Studio
https://developer.android.google.cn/studio
https://i-blog.csdnimg.cn/direct/b304b699a8ee4dd382e69b2fb3227c42.png
https://i-blog.csdnimg.cn/direct/2195afe259ee47869513abbf6e29a4ac.png
https://i-blog.csdnimg.cn/direct/5c3cb652ad004e3aa398cc75a03a6df8.png
https://i-blog.csdnimg.cn/direct/d091b2d15cae45aeb3517b503599d605.png
https://i-blog.csdnimg.cn/direct/8da882c50f24493cb21269a6826f0d4f.png
https://i-blog.csdnimg.cn/direct/34fd6f3fb1164dc4b9a3b9fd8653a928.png
https://i-blog.csdnimg.cn/direct/c9dc22aec14f43c1b8faea8919add8df.png
https://i-blog.csdnimg.cn/direct/975711da19704b9d9d374883b444eb1d.png
https://i-blog.csdnimg.cn/direct/bac0376f975e4fb68b1933e4a04b3449.png
https://i-blog.csdnimg.cn/direct/77ffa881d3ba48e8be536bebf7b3be90.png
https://i-blog.csdnimg.cn/direct/73778df7ee6647d6b90e54a739c042fd.png
https://i-blog.csdnimg.cn/direct/26a861e69211473ca4b4592481eaace0.png
https://i-blog.csdnimg.cn/direct/946d6166880047758efd8b04e33b877f.png
https://i-blog.csdnimg.cn/direct/fd6921820e9a491aa9adef85a5537375.png
https://i-blog.csdnimg.cn/direct/f9ff8d88d8724f80871c4ac5bac245da.png
https://i-blog.csdnimg.cn/direct/38c903ef84424edebe318041ff39068e.png
https://i-blog.csdnimg.cn/direct/22f6d6bae51d42f3b4cad9f38a49f281.png
https://i-blog.csdnimg.cn/direct/3bcec2e533ae4da79ed6cd6d40914dac.png
https://i-blog.csdnimg.cn/direct/ba1043113d974500a51f63627d2c8014.png
https://i-blog.csdnimg.cn/direct/6f0ba178b350479f9ddaf0034c13afdc.png
https://i-blog.csdnimg.cn/direct/baace92fefb24981ada452e66b454fc4.png
https://i-blog.csdnimg.cn/direct/05f0ce5dce304be5b785fe1be0a642b7.png
https://i-blog.csdnimg.cn/direct/81b9286c3be84b2da2c8cfccee42fd02.png
https://i-blog.csdnimg.cn/direct/a44fea120d5c4caa8154f3208eb51368.png
https://i-blog.csdnimg.cn/direct/1c1b3599290a425ab06ed542ac480472.png
https://i-blog.csdnimg.cn/direct/508adf580233442ea54c0fb6e96aace7.png
2.3、电脑上面下载配置Flutter Sdk（所有版本方法一样）
1、下载Flutter SDK
https://flutter.dev/docs/development/tools/sdk/releases#windows
2、把下载好的Flutter SDK任意减压到你想安装Sdk的目次
如减压到（F:\flutter_windows\flutter）
https://i-blog.csdnimg.cn/direct/c0cf743b15f543dca3bd3e86d458f309.png
3、把 Flutter安装目次的bin目次配置到环境变量。
如上图所示需要把F:\flutter_windows\flutter\bin目次配置到path环境变量里面
windows10、windows11：
https://i-blog.csdnimg.cn/direct/ef3f85c349fb466aab054e6727ef3419.png
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 https://i-blog.csdnimg.cn/direct/4376aaf35a884ec19e6385b81a4cdb2b.png
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命令检测环境是否配置乐成
https://i-blog.csdnimg.cn/direct/17ca313efb0149aeaccf17f300485f82.png
第一次执行可能会提示下面错误：
1、错误一：cmdline-tools component is missing
https://i-blog.csdnimg.cn/direct/159700e18aed4f75bc02a3c2449fca19.png
2、错误二：Visual Studio not installed 假如只是开发Flutter APP可以忽略此错误信息
https://i-blog.csdnimg.cn/direct/3e8ec3445116466f9c5e54cf4f016f58.png
3、错误三： Android Studio Unable to find bundled Java version.
https://i-blog.csdnimg.cn/direct/b79da04f847a4a7bbb0059af77bcc292.png
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
https://i-blog.csdnimg.cn/direct/4beb830db0204f1b83204810439d7172.png
https://i-blog.csdnimg.cn/direct/07d0c92bc5834746ac008d04e865290b.png
4.2 配置android-licenses
https://i-blog.csdnimg.cn/direct/1425c2e5346f4ecd95001842df8eb3ee.png
这个时候复制上面赤色框框内的命令
flutter doctor --android-licenses 留意：提示输入Y/N的地方全部输入Y
https://i-blog.csdnimg.cn/direct/6aeb1827bd314e15bcd2759ef358617d.png
5、错误二的解决方法安装Visual Studio ：
Visual Studio重要用于flutter 桌面软件开发，假如您只是开发flutter app可以不消安装Visual Studio
https://visualstudio.microsoft.com/zh-hans/downloads/
https://i-blog.csdnimg.cn/direct/e6ceabcaab3b40ad8bf604d1f11f0c28.png
假如安装失败可以修改DNS尝试
https://i-blog.csdnimg.cn/direct/52d7c0e8ef4b463999e3914a6e4336db.png
https://i-blog.csdnimg.cn/direct/360cecae87a94dec81d6996c7b71ad38.png
6、错误三的解决方法
Android Studio Unable to find bundled Java version 解决方法：
假如是macOS体系，在jbr同目次下创建一个jre目次，然后将jbr目次内的全部文件复制一份到jre目次下即可。
假如是Windows体系，jre目次是存在的，不过里面险些没东西，可以直接将jbr目次内的全部文件复制一份到jre目次下即可。https://i-blog.csdnimg.cn/direct/24f9446921fb41d699683236a4b64af3.png
详情参考：http://bbs.itying.com/topic/63eafd840d0a6c0aecbe5436
2.6、打开Android Studio 安装Flutter插件
因时间有限，就不一 一发出来了，新版Android Studio配置等更多Flutter入门知识点可以下方视频学习 （注：视频评论区置顶里面有全套的课件源码及视频的网盘下载地址） Dart Flutter教程
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]