Flutter入門教程（四）第一個flutter項目解析

 

一、創建一個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中資源，根據注釋信息，它還有assets和plugin字段：

flutter:
  uses-material-design: true
  assets:
  plugin: 

assets用於配置靜態資源（圖片、字體...）

圖片配置：

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官網進行整理*****