Flutter入门(完整教程)

发布于:2025-04-03 ⋅ 阅读:(17) ⋅ 点赞:(0)

 一、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、下载安装JDKjdk-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教程

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


网站公告

今日签到

点亮在社区的每一天
去签到