安装Flutter + Android sdk + vs code运行Flutter项目(史上最详解)

2023-11-09

前言: Flutter开发app是基于Dart语言开发的,就好比html网页开发基于JavaScript一样,而浏览器内核都可以编译JavaScript代码,所有开发html网页不需要下载啥SDK,直接在浏览器就能运行。首先我们安装Dart语言的SDK,便于运行Flutter开发的app

步骤如下:

  1. 安装Dart
  2. 安装java的JDK (需配置环境变量)
  3. 下载Flutter SDK (需配置环境变量)
  4. 安装Android Studio (为了下载Android sdk,官方提供的方法)
  5. 创建第一个Flutter项目 并运行

下面是我安装Flutter的全套安装包:
链接: https://pan.baidu.com/s/1M35A9_qdjVVEZ8RrtlMwyg
提取码:75v4

1.Dart安装:

下载地址:https://gekorm.com/dart-windows/
在这里插入图片描述
找到下载好的exe文件 双击安装:
在这里插入图片描述
等待它下载SDK:
在这里插入图片描述
安装完成后点击next→Finish
此时Dart就已经安装完成了

mac电脑安装Dart:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew tap dart-lang/dart
brew install dart

检测Dart是否安装成功
命令行cmd输入:dart --version 下图所示即为安装成功!
在这里插入图片描述

2.安装java的JDK:

JDK下载地址:https://www.oracle.com/java/technologies/javase-jdk8-downloads.html
没有账号的同学,注册登入后就可以下载啦!
在这里插入图片描述
下载好后无脑下一步安装:(安装路径建议不用修改)
在这里插入图片描述
JDK安装成功后配置环境变量:
右击此电脑属性高级系统设置环境变量系统变量-新建

变量名: JAVA_HOME
变量值:C:\Program Files\Java\jdk1.8.0_241 (jdk安装目录)

在这里插入图片描述
下面在系统变量Path内新建变量:

%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin
在这里插入图片描述在这里插入图片描述
填写后一路点击确定,这样java JDK就安装配置成功啦!

检测java JDK是否安装并配置成功 cmd输入javac 如下图则配置成功
在这里插入图片描述

3.下载Flutter SDK:

下载地址:https://flutter.dev/docs/development/tools/sdk/releases
在这里插入图片描述
下载好后解压到:自定义路径文件夹内
在这里插入图片描述
解压完成后,获取bin文件夹的路径并配置好环境变量
在这里插入图片描述

4.安装Android Studio (为了配置Android sdk)

官网下载地址:https://developer.android.google.cn/studio
下载好后就开始安装啦:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面就是下载Android sdk啦!

下载在C:\Users\用户名\AppData\Local\Android\Sdk

在这里插入图片描述
等待它下载成功:
在这里插入图片描述
下载成功: 保存在C:\Users\用户名\AppData\Local\Android\Sdk文件夹内
后点击Finsh 完成
在这里插入图片描述
下面我们来说这里存在的一个问题Sdk内没有tloos文件夹:
有的同学可以跳过:
在这里插入图片描述
我们去Android Studio 下载tloos:
在这里插入图片描述
此时Sdk文件夹内有tloos文件夹后我们打开cmd命令行:
执行:flutter doctor --android-licenses
在这里插入图片描述
此时运行flutter doctor检测环境是否配置成功:
在这里插入图片描述
此时就说明我们所有的环境都配置成功了!

5.创建Flutter项目

我们在任意文件夹cmd创建第一个Flutter项目: flutter create 项目名
在这里插入图片描述
第一次创建项目要下载一些包需要等一段时间,
创建成功后,如下图
在这里插入图片描述
接下面使用vs code打开此项目,并数据线连接好手机
运行项目前vs code需要安装如下插件:

Dart
在这里插入图片描述
Flutter 与 Flutter Widget Snippcts
在这里插入图片描述
在这里插入图片描述
手机一定要开启开发者模式,并勾选USB调试
在这里插入图片描述
终端内flutter run运行该项目
第一次运行需要等待一些时间,耐心等待哦!~
下面是运行的第一个报错:
在这里插入图片描述
解决办法如下:
在android\build.gradle文件内添加两个 mavenCentral() 即可

在这里插入图片描述
下面我们再次运行一下:
在这里插入图片描述
终于成功啦!
我们来看看手机上的效果:
在这里插入图片描述
有问题的同学可以在下面留言哦!
小编将第一时间为你解答!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

安装Flutter + Android sdk + vs code运行Flutter项目(史上最详解) 的相关文章

随机推荐

  • 快递运输【Java】

    快递运输 Java 题目描述 一辆运送快递的货车 运送的快递均放在大小不等的长方体快递盒中 为了能够装载更多的快递 同时不能让货车超载 需要计算最多能装多少个快递 快递的体积不受限制 快递数最多1000个 货车载重最大50000 输入描述
  • 白山头讲PV:calibre中如何extract net

    在进行lvs分析的时候 能够对net进行trace 具有非常重要的意义 本文详细介绍如何在calibre中对一条net进行trace并highlight 如何trace trace的操作非常简单 右击你要trace的net的一部分 shap
  • opencv_python答题卡自动判卷

    opencv python答题卡自动判卷 设定答题卡模板 该图像为答题卡的答题区域 黑色边框是为了能够在各种环境中轻易的检测 左部分和上部分的黑色矩形 是为能够定位到答题选项的坐标而设置 同时题目数量为20 3共60道选择题 在进行批改试卷
  • 解释一下https://so.csdn.net/so/chat/这个网站的源码

    很抱歉 我不能直接访问网站的源代码 然而我可以告诉你一般情况下 网站的源代码是构建网站的基础 它包含了网页的 HTML CSS 和 JavaScript 代码 这些代码指导浏览器如何呈现网页的内容和样式 如果您对网站的源代码感兴趣 可以使用
  • 【Vue】中 $attrs 中的使用方法

    https www cnblogs com wuxianqiang p 10452662 html
  • p标签在div中垂直居中且文本左对齐

    父元素div设置 text align center p元素设置 display inline block vertical align middle text align left
  • 【转】C++中的返回值优化

    C 中的返回值优化 在这边文章里用到了以下编译器和操作系统 大家请自行安装 uname ar Linux debian 4 9 0 3 amd64 1 SMP Debian 4 9 30 2 deb9u3 2017 08 06 x86 64
  • ABAP range 用法

    转自http www sapjx com abap range table html1 Range Table 概述 Range Table 为 SAP R 3系统标准内表的一种 结构与 Selection Table 一致 由 SIGN
  • RLE 多线程算法 c实现

    include
  • "/usr/lib/python2.7/subprocess.py", line 1343, in _execute_child raise child_exception OSError:

    在用KITTI数据时出错
  • Docker 高级篇

    文章目录 第一章 Docker复杂安装详说 1 1 安装mysql主从复制 1 2 安装redis集群 哈希槽分区进行亿级数据存储 1 2 1 相关面试题 1 2 2 集群搭建步骤 第二章 Dockerfile解析 2 1 是什么 2 2
  • 浅谈斜率优化

    DP模型 形如 f i max f j w i j quad 1 le j
  • PHP的弱类型比较

    php弱类型比较 php中其中两种比较符号 先将字符串类型转化成相同 再比较 先判断两种字符串的类型是否相等 再比较 前者为弱比较 后者为弱比较 若在某种情况下不注意利用会导致漏洞的出现 例子 攻防世界lottery 进入页面 浏览后查看
  • android studio常用快捷键设置

    android开发工具androidstudio的熟练使用是提高我们开发效率的必备条件 现对android studio使用过程中的一些小技巧进行总结 1 命名规范 android开发过程中使用java语言 对变量的命名遵循驼峰命名法 一般
  • Tracy JS 小笔记 - 数据类型, typeof,类型转换

    数据类型 原始值 引用值 原始值 不可改变的原始值 是存储在栈里面 stack 是个有底儿的箱子结构先进后出 原始值 分为五大类 Number Boolean String undefined null var a 1 我们数据的类型天生就
  • Apache Pig的一些基础概念及用法总结4(转)

    26 错误 ERROR org apache pig tools grunt Grunt ERROR 2042 Error in new logical plan Try Dpig usenewlogicalplan false 的可能原因
  • decltype和declval的用法

    1 decltype是c 11以后出现的一个新的关键字 是用来萃取表达式或者变量或者函数返回值的类型的 具体用法可以参考官网 https en cppreference com w cpp language decltype 2 declv
  • 华为-人民币转换

    java实现 题目描述 考试题目和要点 1 中文大写金额数字前应标明 人民币 字样 中文大写金额数字应用壹 贰 叁 肆 伍 陆 柒 捌 玖 拾 佰 仟 万 亿 元 角 分 零 整等字样填写 2 中文大写金额数字到 元 为止的 在 元 之后
  • xss基础知识点

    xss 1 概念 跨站脚本攻击 英文全称Cross Site Script xss攻击 通常指黑客通过 HTML注入 篡改了网页 插入了恶意的脚本 从而在用户浏览网页时 控制用户浏览器的一种攻击 常见场景 标签内的xss Xss 属性里面的
  • 安装Flutter + Android sdk + vs code运行Flutter项目(史上最详解)

    前言 Flutter开发app是基于Dart语言开发的 就好比html网页开发基于JavaScript一样 而浏览器内核都可以编译JavaScript代码 所有开发html网页不需要下载啥SDK 直接在浏览器就能运行 首先我们安装Dart语