Dart & Flutter系列教程【4】——Flutter配置及初运行

254 阅读2分钟

概述

开源、免费的UI框架

目前已经支持IOS、Android、Web、Windows、macOS、Linux等跨平台开发。

基础知识点为Dart语言,建议查看前述文章或自己查看教学视频后学习。

Flutter官网:Flutter - Build apps for any screen

Flutter Packages官网:Dart packages (pub.dev)

搭建Flutter Android运行环境

  1. 电脑安装配置JDK
  2. 下载安装android studio
  3. 下载配置Flutter Sdk
  4. 配置Flutter国内镜像
  5. 运行flutter doctor命令检测环境是否配置成功,根据提示配置安装对应软件
  6. 打开Android Studio 安装Flutter插件
  7. 创建运行Flutter项目

注意:以上步骤按所需跳步

电脑安装配置JDK

  1. 下载安装JDK www.oracle.com/technetwork…

image.png

  1. 安装配置

环境变量增加 “到bin目录下的地址”

下载安装Android Studio

切记官方下载,安装路径选择除系统盘(C:盘)外的其他盘

安装好后的初始页面的第一个框

打开Android Studio 安装Flutter插件

点击“Plugins”后搜索Dart和Flutter,对其进行下载并安装

如果有提示的弹框,就Accept即可。 image.png

安装好后对Android Studio进行重启,即可看见第一个位置是New Flutter Project。

image.png

下载配置Flutter Sdk

  1. 下载Flutter SDK flutter.dev/docs/develo… 点击最新的即可,就会进行下载 image.png
  2. 将下载好的Flutter SDK解压到你想要安装Sdk的目录

配置Flutter国内镜像

运行flutter doctor命令检测环境是否配置成功,根据提示配置安装对应软件

在控制台输入 flutter doctor,查看提示语句

  1. 出错原因1:确定四个都有配置上 image.png
  2. 出错原因2:解决HTTP host https://maven.google.com/ is not reachable - 体验盒子 - 不再关注网络安全 (uedbox.com)
  3. 出错原因3:Chrome - develop for the web_阿大豆的博客-CSDN博客
  4. 出错原因4:Android toolchain - develop for Android devices (Android SDK version 32.0.0)_阿大豆的博客-CSDN博客_android toolchain

待补,仍然存在错误找不到解决办法

image.png

创建运行Flutter项目

  1. 首先新建一个Flutter项目

进入之前下好的flutter

image.png 在当前目录下复制好路径 image.png 2. next下一步后。注意名字和location最后一致。

在许可的情况下Organization可以改变com后的名字,修改为公司名字。

image.png

image.png

自身查看程序需要的平台,进行对应的勾选

image.png

  1. 点击完成后程序会对应建成副本程序。但需要注意的是,当前界面无法编写并显示。需要重新点开刚刚新建项目下的AndroidStudio项目。

image.png

  1. 打开

image.png