Flutter是什么呢?它是Google使用Dart語言開發的移動應用開發框架，使用Dart代碼構建高性能、高保真的iOS和Android應用程序，雖然Flutter不是標準的，但是谷歌希望它看上去是原生的。
或許有人會問為什么已經有了“React Native”，Google還要推出Flutter呢？那是因為使用RN進行開發，在實際平臺上還需要適配和橋接差異性，而Flutter則是依靠Flutter Engine虛擬機在iOS和Android上運行，開發人員可以通過Flutter框架和API在內部進行交互。Flutter Engine使用C/C++編寫，具有低延遲輸入和高幀速率的特點。除此之外，Flutter提供了自己的小部件集合，可以直接在OS平臺提供的畫布上描繪控件。
在從性能上來看，如果你曾經使用RN開發過項目，會發現在UI渲染上會有較為明顯的卡頓，但是Flutter沒有此問題。有網友在親測了Flutter后表示：在頁面渲染方面，Flutter比RN各具優勢，圖片量越大，Flutter的流暢度優勢越大。
好了說了這么多，也該說說今天要講的內容了

Flutter環境搭建

由于本人使用的mac，所以環境搭建是基于macOS系統進行的。

獲取Flutter SDK

要獲得Flutter，需要使用git克隆Flutter，然后將該flutter工具添加到您的用戶路徑。運行 flutter doctor 顯示您可能需要安裝的剩余依賴項。

git clone -b beta https://github.com/flutter/flutter.git 

由于一些flutter命令需要聯網獲取數據，如果您是在國內訪問，由于眾所周知的原因，直接訪問很可能不會成功。所以我們還需要進行映像設置。具體設置如下

export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

接下來需要做下環境變量設置，我這邊的話是在命令終端跟路徑下打開“.zshrc”這個文件(你們可能不是這個文件)，然后進行配置。具體命令如下：

image.png

以下是我的環境變量配置內容，原本是想截圖，但想想還是直接打出來，讓大家可以直接復制，免得一個一個敲

export PATH=$PATH:/***/flutter/bin#這邊是指向flutter的bin路徑 export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 

配置完成后，我們就關掉命令終端在重新打開命令終端，這么做是為了讓修改的環境變量生效?？茖W的做法是命令終端輸入"source .zshrc"
接下來讓我們運行以下命令查看是否需要安裝其它依賴項來完成安裝：

flutter doctor 

該命令檢查您的環境并在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter里了，沒有必要單獨安裝Dart。 仔細檢查命令行輸出以獲取可能需要安裝的其他軟件或進一步需要執行的任務（以粗體顯示）

下圖是我這邊運行此命令的結果(由于結果打印比較長，我這邊只截了一部分)

image.png

從圖中可以看到提示我，當前使用的不是最新版本，提示我使用“flutter upgrade” 進行升級。那么我就來進行升級一波，在控制臺輸入如下命令

flutter upgrade 

平臺設置

由于我Android開發，所以就講Android平臺的設置。
1.下載并安裝 Android Studio

2.啟動Android Studio，然后執行“Android Studio安裝向導”。這將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構建工具，這是Flutter為Android開發時所必需的。
3.安裝Flutter和Dart插件。
①打開插件首選項 (AndroidStudio>Preferences…>Plugins)
②在右邊的搜索輸入框輸入 Flutter，然后點擊 install.
③重啟Android Studio后插件生效.

2.Flutter項目結構簡要分析

在項目結構分析前，讓我們先來創建一個demo。創建步驟(File>New>New Flutter Project…)，在彈出的界面選擇Flutter Application，然后瘋狂點擊Next，直到項目創建完成。

image.png

上圖是我們創建完成后的項目結構，可以看到android和ios這兩個文件夾，這兩個文件是對應客戶端的源碼，不在今天要分析的范圍內，了解下就行。
接下來看lib下的"main.dart"和"pubspec.yaml"這兩個文件，這兩個文件就是今天要分析的。

pubspec.yaml

直接來看這個文件的內容，各個關鍵點在內容上已經備注。

name: flutter_app_demo #項目名稱，最終能決定在客戶端上顯示的項目名稱還是需要到各自的源碼那邊進行設置 description: A new Flutter application. #項目描述，沒什么卵用dependencies: #項目庫依賴，正式環境的配置 flutter: sdk: fluttercupertino_icons: ^0.1.2dev_dependencies: #項目庫依賴，測試環境的配置 flutter_test: sdk: flutterflutter:uses-material-design: true #表示開啟material-design樣式 

從內容中可以看到庫依賴有分正式環境和測試環境，我這邊建議直接在正式環境里面進行庫的添加，免得遺漏了庫。每添加完一個庫，我們都可以單擊右上角的 Packages get，這會將依賴包安裝到您的項目。您可以在控制臺中看到以下內容：

flutter packages get Running "flutter packages get" in startup_namer... Process finished with exit code 0 

到這里是不是有人要問這些外部包要在哪里找？不要慌，以后我們可以從https://pub.dartlang.org/flutter這個地址去搜索我們想要的包。這里就不進行演示了。

main.dart

同樣的，先看看這個文件內容，從內容不難看出這是一個界面布局，同時也是項目的入口類。所以就沒什么好說的，想要進一步了解，就只能繼續去深入學習Flutter了。

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or press Run > Flutter Hot Reload in IntelliJ). Notice that the // counter didn't reset back to zero; the application is not restarted. primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }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() => new _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 new Scaffold( appBar: new 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: new Text(widget.title), ), body: new Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: new Column( // Column is also 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 paint" (press "p" in the console where you ran // "flutter run", or select "Toggle Debug Paint" from the Flutter tool // window in IntelliJ) 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>[ new Text( 'You have pushed the button this many times:', ), new Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } }

到此入門篇就完結了。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/18145.html