搞搞flutter，首先是环境配置，此前提是已经安装Android studio和对应的Android SDK。废话不多说，看具体步骤：
配置依赖环境
java环境配置自行百度,Python环境配置自行百度node环境自行百度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kBo3AuV5-1604457219364)(https://oss.wangmiaozero.cn//images/media/flutter3.png)]
SDK下载
https://flutter.dev/docs/get-started/install/windows
- 解压文件 复制
C:\flutter\bin - 去系统环境变量path中配置
- 我是放到了
G:\flutter\bin
必须配置以下
配置国内镜像。桌面找到 此电脑–>右击选择属性–>高级系统设置–>环境变量–>找到用户变量–>点击新建
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
重启电脑
-
打开cmd 输入
flutter doctor检查缺少配置文件 -
继续配置SDK
配置到用户环境变量中(这个可以不配置)
ANDROID_HOME=D:\AndroidSDK //该sdk地址是你安装Android studio的时候配置的sdk的地址
必须配置以下
出现感叹号! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses按照他说的 输入
flutter doctor --android-licenses，一路y下去即可。
Android studio里面要安装flutter插件
- 安装完,重启电脑即可
错误信息:Flutter extension not installed; install from
去vscode把flutter插件安装了,就好了
警告信息:Connected device
- 没有安装虚拟机
坑一
- 当你输入
flutter doctor检查环境全部绿了,打上勾了,除了虚拟机哪个警告问题时 - 然后你这个地方卡住一天,两天.或者一个星期.甚至想放弃不想学习了.抱怨当初就应该学习react-native
- 其实问题也很简单,你点击右边的
install下载SDK时他走的国外地址,你只能慢慢等待.可能会失败一个星期左右.请慢慢等待,不要放弃 - 上面安装到了
G:\flutter\bin那么你的SDK就放到G:\flutter\flutter - 建议你下载到
G:\flutter\flutter目录中
坑二
- 依然卡住,可能是你的
SDK没有下载好,或者你网速不行.一般这个地方几秒就好了
Android studio新建Flutter项目
- 打开Andorid Studio ，会出现下面的界面，我们选择第二项，新建Flutter项目。
（如果你第一次新建项目，可能会有些慢，这个可能跟技术胖700元的电脑有关，土豪请无视这句话。）
打开第二个窗口后，选择第一个选项Flutter Application(flutter应用)。
这步完成后，系统就会自动为我们创建一个Flutter项目（新建项目的过程也是很慢的，它要去谷歌下载gradle，这个东西很容下载失败，如果失败，可以多反复试几次）。
# 安装AVD虚拟机
1. 现在需要一个虚拟机来运行我们的程序，可以点击`Android Studio`中的上方菜单`tool -AVD Manager`选项。
2. 出现新建菜单，选择`Create Virtual Device.....`如果你一个虚拟机也没建过，这个选项在对话框的中间
3. 选择虚拟机类型，这个你随意选就好，我选择的是`Nexus 5x`。（如果你屏幕小，就选择一个小屏幕的虚拟机）
4. 选择系统，这里尽量选择最新的，我选择了`Android 9.0`系统，选择好后，又是一个漫长的等待过程。
5. 安装好后，点击开始按钮，运行虚拟机了（第一次运行，需要安装系统，会慢一些），运行起来后
# Flutter项目启动
> 虚拟机运行以后，可以点击`debug`按钮，让Flutter程序跑起来。如果你幸运的话，你的Flutter程序经过编译后，就会跑起来了。（这种幸运的机会很小，总会碰到一些小错误，我在这里介绍两个常见的错误）。
坑三
在Debug项目的时候，应该最常见的错误就是类似下面这样的错误了。
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.
FAILURE: Build failed with an exception.
* Where:
Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25
* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'.
> Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
Searched in the following locations:
https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 0s
Command: /Users/rabbit/develop/android/flutter_app/android/gradlew app:properties
Finished with error: Please review your Gradle project setup in the android/ folder.
这个问题的产生的原因，还是中国特有的问题，解决方案是改位阿里的链接(1.0已经修复了这个问题，不用再重新设置了)。
第一步：修改掉项目下的android目录下的build.gradle文件，把google() 和jcenter()这两行去掉。改为阿里的链接。
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
如下:
buildscript {
repositories {
// google()
// jcenter()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public'}
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.2'
}
}
allprojects {
repositories {
// google()
// jcenter()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
}
}
rootProject.buildDir = '../build'
subprojects {
project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
project.evaluationDependsOn(':app')
}
task clean(type: Delete) {
delete rootProject.buildDir
}
注意是有两个部分进行了修改，不要只修改一处。
第二步：修改Flutter SDK包下的flutter.gradle文件,这个目录要根据你的SDK存放的位置有所变化。比如我放在了G盘Flutter目录下，那路径就是这个。
G:\flutter\flutter\packages\flutter_tools\gradle
打开文件进行修改，修改代码如下（其实也是换成阿里的路径就可以了）。
buildscript {
repositories {
//jcenter()
// maven {
// url 'https://dl.google.com/dl/android/maven2'
// }
maven{
url 'https://maven.aliyun.com/repository/jcenter'
}
maven{
url 'http://maven.aliyun.com/nexus/content/groups/public'
}
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.2'
}
}
然后再重新Debug一下，就基本可以启动起来。
第一个HelloWorld整体代码
先快速写一个最简单的结构体，这个界面只包含两部分，头部订单的蓝色bar条和屏幕中间区域的内容。（请看下面代码）
这段代码写在根目录\lib\main.dart文件中，这就是Flutter主文件。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home:Scaffold(
appBar: AppBar(
title:Text('Flutter Demo 学习')
),
body: Center(
/* child: Text('Hello World,你好,flutter,222222222222222222222222222222222Hello World,你好,flutter',
textAlign: TextAlign.center,// 文字居中
// textAlign: TextAlign.left,// 文字左
// textAlign: TextAlign.right,// 文字右
// textAlign: TextAlign.start,// 文字开始
//textAlign: TextAlign.end,// 文字结束
maxLines: 1,// 最多显示多少行
overflow: TextOverflow.ellipsis,// 显示三个点点
// overflow: TextOverflow.fade,// 从上到下的一个渐变效果
style: TextStyle(
fontSize: 25,
color: Color.fromARGB(255, 255, 125, 125),
decoration: TextDecoration.underline,// 加入下划线
// decorationStyle: TextDecorationStyle.solid,// 加入下滑线样式,实线,虚线等等
),
),*/
child: Container(
// Container相当于div
child: new Text('hello flutter',style: TextStyle(fontSize: 20),),
alignment: Alignment.center,// alignment 子元素对齐
//alignment: Alignment.bottomCenter,// 底部居中对齐
// alignment: Alignment.bottomLeft,// 底部左边对齐
// alignment: Alignment.bottomRight,// 底部右边对齐
// alignment: Alignment.topCenter,// 顶部居中对齐
// alignment: Alignment.topLeft,// 顶部左边对齐
// alignment: Alignment.topRight,// 顶部右边对齐
width: 500.0,
height: 400.0,
color: Colors.lightBlue,// 设置背景颜色
),
),
)
/* theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),*/
// home: MyHomePage(title: 'Flutter Demo 学习'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}