【Flutter入门到进阶】Flutter基础篇---介绍与环境_flutter 入门

1 Flutter介绍

        Flutter是谷歌公司开发的一款开源、免费的UI框架，可以让我们快速的在Android和iOS上构建高质量 App。它最大的特点就是跨平台、以及高性能。   目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux等。

        Flutter基于谷歌的dart语言，如果没有任何Dart语言的基础，不建议直接学习Flutter。建议先学习Dart 语言的基本语法。然后再进入Flutter的学习。

        市面上已经有很多的混合App开发框架了，但是有些混合APP开发框架主要是针对前端开发者的：比如 ReactNative  (基于React)、  Ionic  (基于Angular、Vue、  React)。有些则是针对.Net平台针对.Net开 发者的比如：  Xamarin

        Flutter是谷歌基于Dart语言开发的一款跨平台的App开发框架。它针对的开发者是全部开发者。它的性 能相比RN、  Ionic这样的框架要更好一些。

        Flutter在2019年的时候就拥有了非常高的关注度。  Flutter目前已经非常稳定，并且社区也非常完善了, 应用市场中新发布的新 应用有进一半是Flutter开发的应用。  Flutter3.x以后不仅支持了Android Ios App的跨平台开发，还支持 了Web、Windows、  MacOs、  Linux桌面应用的跨平台开发。全球很多公司都已经在商业项目中使用    Flutter，比如Google、微软、阿里、字节、百度、京东等。  Flutter 在 Github Star 数已经有150万了， 在跨端框架中排名第一。据官方统计截止到2022年6月，已经有超过50万个商业应用程序是用Flutter建 立的。Flutter是一个非常值得学习的框架，Flutter不仅具有跨平台、高性能等特点，还具有稳定性的特点，从2018年12月5日发布的Flutter1.0到后面的所有版本用法都是一样的。

2 资源地址

        Flutter  官网：  https://flutter.dev/

        Flutter Packages官网：  https://pub.dev/

3 环境安装与配置

3.1 Windows上面搭建Flutter Android运行环境

3.1.1 电脑上面安装配置JDK

1、下载安装JDK

        https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2、配置JDK

        1、系统变量 里面新增JAVA_HOME，设置值为java  sdk 根目录：

        2、系统变量 找到Path 在Path环境变量里面增加如下代码

        ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

3.1.2 电脑上下载安装Android Studio

1、安装dart与flutter插件

3.1.3 电脑上面下载配置Flutter Sdk

1、下载Flutter SDK

        https://flutter.dev/docs/development/tools/sdk/releases#windows

2、把下载好的Flutter SDK随便减压到你想安装Sdk的目录

        如减压到  ( F:\flutter_windows\flutter_windows_3.0.4\flutter)

3、把 Flutter安装目录的bin目录配置到环境变量。

        如上图所示需要把F:\flutter_windows\flutter_windows_3.0.4\flutter\bin目录配置到path环境变量里 面

windows7：

windows10、windows11：

3.1.4 电脑上配置Flutter国内镜像

1、搭建环境过程中要下载很多资源文件，当一些资源下载不了的时候，可能会报各种错误。在国内访问 Flutter的时候有可能会受到限制。  Flutter官方为我们提供了国内的镜像

        https://flutter.dev/community/china

        https://flutter-io.cn/

2、拉到Flutter中文网最下面有配置方式，把下面两句配置到环境变量里面

        FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn

        PUB_HOSTED_URL: https://pub.flutter-io.cn

3、Flutter 社区镜像

        FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn

        PUB_HOSTED_URL: https://pub.flutter-io.cn

4、清华大学 TUNA 协会镜像

        FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter 

        PUB_HOSTED_URL: https://mirrors.tuna.tsinghua.edu.cn/dart-pub

3.1.5 运行 flutter doctor命令检测环境是否配置成功，根据提示配置安装对应软件 打开Android Studio 安装Flutter插件

3.1.6 创建运行Flutter项目

3.2 Mac电脑搭建Flutter Ios环境

3.2.1 准备工作

        1、升级Macos系统为最新系统

        2、安装最新的Xcode

        3、电脑上面需要安装brew   https://brew.sh/

        4、安装chrome浏览器(开发web用)

3.2.2 下载Flutter、配置Flutter环境变量、配置Flutter镜像

1、下载Flutter SDK

        https://flutter.dev/docs/development/tools/sdk/releases?tab=macos

2、把下载好的Flutter SDK随便减压到你想安装Sdk的目录如

        /Users/axxxg/flutter_mac/flutte

3、把 Flutter安装目录的bin目录配置到环境变量，然后把Flutter国内镜像也配置到环境变量里面

        vim ~/.bash_profile

        vim ~/.zshrc

        export PATH=/Users/aishengwanwu/flutter_mac/flutter/bin:$PATH

        export PUB_HOSTED_URL=https://pub.flutter-io.cn

        export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

4、让配置环境变量生效

        source ~/.bash_profile

        source ~/.zshrc

        flutter --version  如果能出来版本说明flutter sdk配置成功。

        注意:如果配置完成后输入 flutter --version告诉你flutter不是内置命令之类的错误的话，可能sdk没 有配置成功，也可能sdk下载的时候没有下载全

5、运行flutter doctor 命令检测环境

        第一次运行 flutter doctor的时候会提示下面错误

6、配置Flutter Xcode Ios环境

        如果电脑上面没有安装 brew的话首先第一步需要安装brew

        https://brew.sh/

        终端执行下面命令

        /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

分别执行下面命令

        brew install cocoapods

        pod setup

        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 

        sudo xcodebuild -runFirstLaunch

执行：

        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 

        sudo xcodebuild -runFirstLaunch

        注意：如果运行命令失败请运行  brew doctor并按照说明解决问题。

        执行完成上面命令后然后重新运行：   flutter doctor  如果出来下图表示ios的环境配置完成