Flutter开发之——环境配置

时间:2023-02-03 04:44:47

前言

Flutter是Google的一款跨平台开发语言,你可能知道另外一种跨平台开发语言React Native,作为两款跨平台开发语言,他们有什么区别,哪个更好一些呢,这里暂时不做评价,知乎上有人做了对比:如何评价 Google 的 Fuchsia、Android、iOS 跨平台应用框架 Flutter? ,Flutter 作为Google极力推荐的跨平台开发工具,天生具备MD(材料设计)特性,目前尚未成熟,但前景是远大的。值得我们学习。

环境配置

下载并配置Git

下载Git

打开Git官网,下载对应的软件
Flutter开发之——环境配置

安装并配置

运行软件,下一步,并按下图所示添加到path中
Flutter开发之——环境配置

验证配置

打开CMD,输入git –version
Flutter开发之——环境配置

下载并配置Flutter

下载Flutter

官网下载SDK

Flutter开发之——环境配置

Github上搜索Flutter,在GitBash中执行git clone

Flutter开发之——环境配置
Flutter开发之——环境配置

配置环境变量

Flutter开发之——环境配置

运行 flutter_console.bat,输入flutter doctor 命令

说明:

  1. 其中带X的表示需要安装的东西
  2. 其中带v的表示已经安装的东西

Flutter开发之——环境配置

电脑中已安装了开发工具:

  1. android Studio
  2. Vs Code
  3. IntelliJ

下面将分情况讲述

开发工具配置

android licenses

再做工具配置之前,我们先解决第一个提示:

! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

输入“flutter doctor –android-licenses”并回车,如果需要确认,请输入“y”
Flutter开发之——环境配置

android studio 开发配置

异常

解决完上面的licenses之后,重新输入flutter doctor检测,结果如下:
Flutter开发之——环境配置

解决

原因是android studio开发工具未安装flutter插件,依次打开 File——>Setting——>Plguins——>安装flutter(默认安装Dart插件),安装后重启生效
Flutter开发之——环境配置
Flutter开发之——环境配置

android studio开发flutter

File——>New Flutter Project

Flutter开发之——环境配置

选择类型(本次选择Application)

Flutter开发之——环境配置

设置应用信息

Flutter开发之——环境配置

设置应用包名

Flutter开发之——环境配置

VS 开发配置

异常

再次运行 flutter doctor 检测, android studio开发工具的错误已经消失,VS Code的错误仍然存在
Flutter开发之——环境配置

解决

安装VS Code 插件 flutter和Dart

Flutter开发之——环境配置

使用VS 开发Flutter

新建 Flutter 项目

依次点击:查看——>命令面板——>输入Flutter——>选择Flutter:New Project

Flutter开发之——环境配置

输入应用名称

Flutter开发之——环境配置

选择存放位置

Flutter开发之——环境配置

项目初始化完毕

Flutter开发之——环境配置

按F5项目调试

Flutter开发之——环境配置

运行效果图

Flutter开发之——环境配置