Flutter SDK安裝
以下以在Mac系統(tǒng)下操作為例
首先在本地創(chuàng)建一個文件夾來存放Flutter SDK似枕，比如我在Documents下創(chuàng)建一個Flutter:
image.png
安裝方式一:
手動下載Flutter SDK
官網(wǎng)：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命令查看目錄結(jié)構(gòu)：
├── 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環(huán)境配置
為了以后使用方便炕矮，我們需要配置一下環(huán)境，需要將項(xiàng)目根目錄下bin路徑加入環(huán)境變量PATH中，打開~/.bash_profile文件袭蝗，修改環(huán)境變量，操作如下：
1般婆、打開~/.bash_profile
open -e .bash_profile #執(zhí)行此命令打開~/.bash_profile
2到腥、配置環(huán)境變量
export PATH={flutter下bin目錄路徑}:$PATH #export PATH=/Users/GRR/Documents/Flutter/flutter/bin:$PATH 我本地的路徑
如下圖所示：
image.png
3、更新環(huán)境配置
source .bash_profile #執(zhí)行此命令更新環(huán)境配置
4蔚袍、驗(yàn)證安裝結(jié)果
flutter #執(zhí)行此命令驗(yàn)證安裝結(jié)果
如果掛了梯子乡范，請?zhí)^第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
根據(jù)提示篓足，我們來到了官網(wǎng)的這里，往下拉闰蚕，官網(wǎng)寫著(請允許我裝個逼)：
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
解決辦法就是在環(huán)境變量里加上鏡像地址栈拖，為國人量身打造。
5没陡、配置鏡像地址
重復(fù)上邊步驟1涩哟、2索赏、3添加以下鏡像地址：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
繼續(xù)執(zhí)行flutter命令
結(jié)果如下(部分)：
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 #執(zhí)行此命令更新flutter
結(jié)果如下(部分)：
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 #執(zhí)行此命令安裝依賴
結(jié)果如下(部分):
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器仗、設(shè)置Flutter SDK路徑
Flutter SDK路徑.png
3融涣、新建Flutter項(xiàng)目
步驟和新建Android項(xiàng)目一樣：
File->New->New Flutter Project
新建Flutter項(xiàng)目.png
Flutter項(xiàng)目包名.png
4、Flutter項(xiàng)目結(jié)構(gòu)
項(xiàng)目主要有3個Module構(gòu)成分別是lib精钮、android威鹿、ios，
lib下的main.dart是程序入口
Flutter項(xiàng)目結(jié)構(gòu).png
5轨香、Demo代碼預(yù)覽
程序入口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忽你、運(yùn)行Flutter項(xiàng)目
run.png
選擇設(shè)備，點(diǎn)擊右上角的綠色三角形按鈕或者使用快捷鍵
^R運(yùn)行程序臂容。
在Android設(shè)備運(yùn)行效果如下：
Android_Flutter.png
