Installation Flutter + Android sdk + vs code running Flutter project

Preface: Flutter app development is based on Dartlanguage development, like html web development based on JavaScriptthe same, and the browser kernel can be compiled JavaScriptcode, all html pages do not need to download the development of what SDK, you can run directly in the browser. First, we install Dartthe language SDK, easy to run Flutter app development

Proceed as follows:

  1. Installation Dart
  2. Installation of the JDK java (need to configure the environment variables)
  3. Download Flutter SDK (need to configure the environment variables)
  4. Install Android Studio (To download the Android sdk, official methods)
  5. The first project to create and run a Flutter

1.Dart Installation: Download: https://gekorm.com/dart-windows/
Here Insert Picture Description
find the downloaded exe file, double-click the installation:
Here Insert Picture Description
wait for it to download the SDK:
Here Insert Picture Description
Click after the installation is complete next→Finish
at this time Dart has completed the installation

mac computer to install Dart:

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

Detecting whether the installation is successful Dart
command cmd input: dart --versionthe figure is the successful installation!
Here Insert Picture Description

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

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

Here Insert Picture Description
下面在系统变量Path内新建变量:

%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin
Here Insert Picture DescriptionHere Insert Picture Description
填写后一路点击确定,这样java JDK就安装配置成功啦!

检测java JDK是否安装并配置成功 cmd输入javac 如下图则配置成功
Here Insert Picture Description

3.下载Flutter SDK:
下载地址:https://flutter.dev/docs/development/tools/sdk/releases
Here Insert Picture Description
下载好后解压到:自定义路径文件夹内
Here Insert Picture Description
解压完成后,获取bin文件夹的路径并配置好环境变量
Here Insert Picture Description
4.安装Android Studio 为了配置Android sdk
官网下载地址:https://developer.android.google.cn/studio
下载好后就开始安装啦:
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
下面就是下载Android sdk啦!

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

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

5. Create Flutter project
we first create a folder cmd Flutter project in any file: flutter create project name
Here Insert Picture Description
first create a project you want to download some packages need to wait for some time,
after successfully created, as shown below
Here Insert Picture Description
ground below using vs code open this item and data lines connected mobile phone
before running the project vs codeneed to install the following plug-ins:

DART
Here Insert Picture Description
Flutter and Flutter Widget Snippcts
Here Insert Picture Description
phone must be open to developer mode and check the USB debugging
Here Insert Picture Description
flutter run inside the terminal to run the project
first run need to wait for some time, be patient Oh! -
Here is the first error running:
Here Insert Picture Description
solution is as follows:
\ add two mavenCentral within build.gradle file in android () can

Here Insert Picture Description
Let's run it again:
Here Insert Picture Description
finally succeeded it!
Let's look at the effect on the phone:
Here Insert Picture Description
problematic students can leave a message below Oh!
Xiao Bian will be the first time for you to answer!

Published 218 original articles · won praise 35 · views 130 000 +

Guess you like

Origin blog.csdn.net/qq_41614928/article/details/104497596