一、建立一個Flutter工程?
?1.1 命令列建立
首先我們找一個空目錄用來專門存放flutter專案,然後在路徑中直接輸入cmd:
使用 flutter create <projectname> 命令建立flutter專案:
建立成功:
進入專案根目錄中,執行 flutter run 命令執行專案:
接下來把專案拖入VSCode就可以繼續編輯flutter程式碼了
?1.2 Android Studio建立
這裡其實已經在Flutter入門教程(二)開發環境搭建中已經講解過了,這裡再彙總一下
開啟已經安裝好的Android Studio,建立專案:
注意:這裡如果沒有Flutter選項,請安裝Flutter外掛,小白已在Flutter入門教程(二)開發環境搭建中講解
輸入好以下資訊後,點選【Finish】完成建立:
在Android Studio中開啟並執行(這裡有三種方式可以執行):
二、工程目錄分析
不管通過什麼方式建立flutter工程,目錄都是一樣的:
目錄中只有如下幾個值得注意,其他不用管:
?android:存放android平臺相關程式碼
?ios:存放ios平臺相關程式碼
?lib:flutter程式碼,即dart檔案(我們編寫的程式碼存放位置)
?test:存放測試程式碼
?pubspec.yaml:配置檔案,存放一些第三方的依賴資源
我們在學習flutter入門,其實也可以不用管前兩個,我們重點放在lib資料夾和pubspec.yaml檔案,也就是存放我們程式碼編輯的位置。
2.1 main.dart檔案
開啟lib資料夾可以看到只有一個main.dart
檔案,它是整個專案的入口檔案,執行後大家都能看到demo效果,我們直接把這個檔案內容幹掉,不用看他程式碼,後續篇章會逐步講解。我們們現在還是以最經典的《Hello World》開始吧~
首先我們必須引入一個 Material UI元件庫:
import 'package:flutter/material.dart';
注意:; 必須要!(語法規範)
引入這個包後,既然它是一個入口檔案,我們就來寫一個入口函式main
:
void main() {
runApp(const MyApp());
}
也可以改寫成箭頭函式:
void main()=>runApp(MyApp());
這裡呼叫runApp方法返回MyApp主頁面,也就是說我們展示出來的UI介面都寫在MyApp類中,現在就建立一個MyApp類:
//建立MyApp類,繼承至StatelessWidget class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); //重寫方法 @override //build方法返回一個頁面控制元件 Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( //頁面導航欄 title: const Text('My First Flutter Demo'), ), body: const Center( //頁面內容 child: Text("Hello World"), ), ), ); } }
class
關鍵字建立MyApp類extends
表示繼承,MyApp繼承自 StatelessWidget(無狀態控制元件,以後會講)@override
表示重構裡邊的方法build
方法返回一個MaterialApp視窗控制元件home
就是整個視窗內容,appBar
是頁面導航部分,body
是導航下方內容區域
懵不懵?懵就對了,不懵就不是入門了,結構語法基本就是這樣的格式,慢慢就熟悉了。儲存執行看效果:
當然,也可以單獨把home拆出來,效果也是一樣的:
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHome(), ); } } class MyHome extends StatelessWidget { const MyHome({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('My First Flutter Demo'), ), body: const Center( child: Text("Hello World"), ), ); } }
簡單的一個Hello World程式就完成了,下面來說說pubspec.yaml檔案
2.2 pubspec.yaml檔案
.yaml
檔案是一個標記性語言,它類似於JSON、XML
在flutter專案中pubspec.yaml
檔案是用來進行包管理的,在我們需要引入第三方庫或者外掛時候,就可以放在這個資料夾中,類似於VUE、Node專案中的package.json
檔案。但是兩者引包方式是有區別的:
- node中通過
npm install
方式下載包 - flutter中通過
flutter packages get
方式下載包
pubspec.yaml
檔案預設配置如下:
# 專案名稱:pg_demo_test(*) name: pg_demo_test # 專案描述資訊 description: A new Flutter project. publish_to: 'none' # 應用版本資訊 version: 1.0.0+1 # 新增flutter和dart版本控制 environment: sdk: ">=2.16.1 <3.0.0" # 依賴包(所有依賴會編譯到專案中) dependencies: flutter: sdk: flutter # 依賴包(執行期間的包) dev_dependencies: flutter_test: sdk: flutter flutter_lints: ^1.0.0 # flutter相關配置 flutter: uses-material-design: true
這裡面的配置項有很多,這裡針對幾個重要的再做一個簡單的描述和注意項:
?name配置項
name配置項是專案app應用名稱,作用就在用於引入其他dart檔案時需要使用,比如:
import 'package:pg_demo_test/libo/gf_button.dart';
這裡pg_demo_test就是此應用名稱,?注意:當你name欄位修改,所有引入檔案對應的名字也要更改
?environment配置項
該配置項對flutter和dart進行了版本控制
environment:
sdk: ">=2.16.1 <3.0.0"
這裡表示該應用只能在高於或大於2.16.1,低於3.0.0的SDK上執行,當然我們也可以自己更更改它:
environment:
sdk: ">=2.16.1 <3.0.0"
flutter: "版本號"
?dependencies 和 dev_dependencies配置項
這兩個配置項都是該應用程式所需要的以來包、庫,區別在於:
- dependencies下面的依賴包會編譯到專案中
- dev_dependencies下面的依賴包僅用於執行期間
這裡的依賴包來源可以是:
pub.dev 網站上的第三方庫
dependencies: flutter: sdk: flutter getwidget: ^2.0.5 animated_background: ^2.0.0 cupertino_icons: ^1.0.2
這三個就是引用的第三方庫。需要注意的是空格縮排
git安裝
dependencies: libo: git: url: git://github.com/libo/test.git
本地庫
dependencies:
my_package:
path: ../my_package
自己封裝的庫
dependencies:
flutter:
sdk: flutter
bloc:
hosted:
name: test
url: http....
version: ^0.0.0
?flutter配置項
預設有一個 uses-material-design: true 配置,可以使用Material中資源,根據註釋資訊,它還有
欄位:flutter: uses-material-design: true assets: plugin:
用於配置靜態資源(圖片、字型...)
圖片配置:
flutter: uses-material-design: true assets: - images/1.png # images下面1.png資源 - images # images路徑下所有資源
字型配置:
flutter: uses-material-design: true assets: - family: family_name fonts: - asset:fonts/aa.ttf - asset:fonts/bb.ttf
family與fonts是一個整體,列表的一項
*****注意?:本系列均參照Flutter官網進行整理*****