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  中文网最下面有配置方式，把下面两句配置到环境变量里面   

1. FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
2. PUB_HOSTED_URL: https://pub.flutter-io.cn

复制代码

 
Flutter 社区镜像 

1. FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
2. PUB_HOSTED_URL: https://pub.flutter-io.cn

复制代码

清华大学 TUNA 协会镜像 

1. FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter
2. 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 

 
这个时候复制上面赤色框框内的命令 

1. 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教程
   
   
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 








免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。