Flutter SDK安装
以下以在Mac系统下操作为例
首先在本地创建一个文件夹来存放Flutter SDK，比如我在Documents下创建一个Flutter:
image.png
安装方式一:
手动下载Flutter SDK
官网：https://flutter.io/docs/get-started/install/macos#
Github：https://github.com/flutter/flutter/releases
下载完成后解压到刚才新建的文件夹下。
安装方式二:
终端克隆
git clone -b master https://github.com/flutter/flutter.git
如图所示：
image.png
安装完成后会在Flutter下自动生成一个flutter目录，用来存放SDK，用tree命令查看目录结构：
├── AUTHORS
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── PATENTS
├── README.md
├── analysis_options.yaml
├── bin
│ ├── flutter
│ ├── flutter.bat
│ └── internal
├── dartdoc_options.yaml
├── dev
│ ├── README.md
│ ├── automated_tests
│ ├── benchmarks
│ ├── bots
│ ├── ci
│ ├── devicelab
│ ├── docs
│ ├── integration_tests
│ ├── manual_tests
│ ├── missing_dependency_tests
│ ├── snippets
│ └── tools
├── examples
│ ├── README.md
│ ├── catalog
│ ├── flutter_gallery
│ ├── flutter_view
│ ├── hello_world
│ ├── layers
│ ├── platform_channel
│ ├── platform_channel_swift
│ ├── platform_view
│ └── stocks
├── flutter_console.bat
└── packages
├── analysis_options.yaml
├── flutter
├── flutter_driver
├── flutter_goldens
├── flutter_goldens_client
├── flutter_localizations
├── flutter_test
├── flutter_tools
└── fuchsia_remote_debug_protocol
Flutter环境配置
为了以后使用方便，我们需要配置一下环境，需要将项目根目录下bin路径加入环境变量PATH中，打开~/.bash_profile文件，修改环境变量，操作如下：
1、打开~/.bash_profile
open -e .bash_profile #执行此命令打开~/.bash_profile
2、配置环境变量
export PATH={flutter下bin目录路径}:$PATH #export PATH=/Users/GRR/Documents/Flutter/flutter/bin:$PATH 我本地的路径
如下图所示：
image.png
3、更新环境配置
source .bash_profile #执行此命令更新环境配置
4、验证安装结果
flutter #执行此命令验证安装结果
如果挂了梯子，请跳过第5步；
如果没挂梯子，你可能会看到以下提示：
Jersay:flutter GRR$ flutter
Downloading Dart SDK from Flutter engine 215ca15600887ffeffef2df3f216e0189159150e...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- 0:02:45 --:--:-- 0
curl: (35) LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to storage.googleapis.com:443
Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/flutter/215ca15600887ffeffef2df3f216e0189159150e/dart-sdk-darwin-x64.zip
If you're located in China, please see this page:
https://flutter.io/community/china
image.png
根据提示，我们来到了官网的这里，往下拉，官网写着(请允许我装个逼)：
If you’re installing or using Flutter in China, it may be helpful to use a trustworthy local mirror site that hosts Flutter’s dependencies. To instruct the Flutter tool to use an alternate storage location, you need to set two environment variables, PUB_HOSTED_URL and FLUTTER_STORAGE_BASE_URL, before running the flutter command.
Taking MacOS or Linux as an example, here are the first few steps in the setup process for using a mirror site. Run the following in a Bash shell from the directory where you wish to store your local Flutter clone:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
git clone -b dev https://github.com/flutter/flutter.git
export PATH="$PWD/flutter/bin:$PATH"
cd ./flutter
flutter doctor
解决办法就是在环境变量里加上镜像地址，为国人量身打造。
5、配置镜像地址
重复上边步骤1、2、3添加以下镜像地址：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
继续执行flutter命令
结果如下(部分)：
Jersay:~ GRR$ flutter
Building flutter tool...
╔════════════════════════════════════════════════════════════════════════════╗
║ A new version of Flutter is available! ║
║ ║
║ To update to the latest version, run "flutter upgrade". ║
╚════════════════════════════════════════════════════════════════════════════╝
6、更新Flutter
flutter upgrade #执行此命令更新flutter
结果如下(部分)：
Jersay:~ GRR$ flutter upgrade
Upgrading Flutter from /Users/GRR/Documents/Flutter/flutter...
From https://github.com/flutter/flutter
d05fa45fb..4d2d800d9 master -> origin/master
Updating d05fa45fb..4d2d800d9
5 files changed, 219 insertions(+), 48 deletions(-)
Upgrading engine...
Downloading Dart SDK from Flutter engine d8c5ec0e11b51ff385327fe5939f9405f89f46c7...
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
2 49.7M 2 1465k 0 0 3578k 0 0:00:14 --:--:-- 0:00:14 3573k
14 49.7M 14 7485k 0 0 5347k 0 0:00:09 0:00:01 0:00:08 5346k
7、安装Flutter剩余依赖工具
flutter doctor #执行此命令安装依赖
结果如下(部分):
Jersay:~ GRR$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.1.5-pre.24, on Mac OS X 10.14.2 18C54, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
AndroidStudio Flutter插件安装
1、安装Flutter插件
AndroidStudio->Preferences->plugins，搜素Flutter
image.png
2、设置Flutter SDK路径
Flutter SDK路径.png
3、新建Flutter项目
步骤和新建Android项目一样：
File->New->New Flutter Project
新建Flutter项目.png
Flutter项目包名.png
4、Flutter项目结构
项目主要有3个Module构成分别是lib、android、ios，
lib下的main.dart是程序入口
Flutter项目结构.png
5、Demo代码预览
程序入口main.dart中代码如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
6、运行Flutter项目
run.png
选择设备，点击右上角的绿色三角形按钮或者使用快捷键
^R运行程序。
在Android设备运行效果如下：
Android_Flutter.png
网友评论