Flutter02-SDK安裝和環(huán)境配置

Flutter SDK安裝

以下以在Mac系統(tǒng)下操作為例
首先在本地創(chuàng)建一個(gè)文件夾來(lái)存放Flutter SDK，比如我在Documents下創(chuàng)建一個(gè)Flutter:

image.png

安裝方式一:

手動(dòng)下載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

安裝完成后會(huì)在Flutter下自動(dòng)生成一個(gè)flutter目錄，用來(lái)存放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中，打開(kāi)~/.bash_profile文件，修改環(huán)境變量，操作如下：

1、打開(kāi)~/.bash_profile
open -e .bash_profile #執(zhí)行此命令打開(kāi)~/.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é)果

如果掛了梯子，請(qǐng)?zhí)^(guò)第5步；

如果沒(méi)掛梯子，你可能會(huì)看到以下提示：

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ù)提示，我們來(lái)到了官網(wǎng)的這里，往下拉，官網(wǎng)寫(xiě)著(請(qǐng)?jiān)试S我裝個(gè)逼)：

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)境變量里加上鏡像地址，為國(guó)人量身打造。

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個(gè)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
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容