Preface: Flutter app development is based on Dart
language development, like html web development based on JavaScript
the same, and the browser kernel can be compiled JavaScript
code, all html pages do not need to download the development of what SDK, you can run directly in the browser. First, we install Dart
the language SDK, easy to run Flutter app development
Proceed as follows:
- Installation Dart
- Installation of the JDK java (need to configure the environment variables)
- Download Flutter SDK (need to configure the environment variables)
- Install Android Studio (To download the Android sdk, official methods)
- The first project to create and run a Flutter
1.Dart Installation: Download: https://gekorm.com/dart-windows/
find the downloaded exe file, double-click the installation:
wait for it to download the SDK:
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 --version
the figure is the successful installation!
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. Create Flutter project
we first create a folder cmd Flutter project in any file: flutter create project name
first create a project you want to download some packages need to wait for some time,
after successfully created, as shown below
ground below using vs code open this item and data lines connected mobile phone
before running the project vs code
need to install the following plug-ins:
DART
Flutter and Flutter Widget Snippcts
phone must be open to developer mode and check the USB debugging
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:
solution is as follows:
\ add two mavenCentral within build.gradle file in android () can
Let's run it again:
finally succeeded it!
Let's look at the effect on the phone:
problematic students can leave a message below Oh!
Xiao Bian will be the first time for you to answer!