Flutter入門教程(四)第一個flutter專案解析

不知名前端李小白發表於2022-04-01

 

一、建立一個Flutter工程?

?1.1 命令列建立

首先我們找一個空目錄用來專門存放flutter專案,然後在路徑中直接輸入cmd:

Flutter入門教程(四)第一個flutter專案解析

使用 flutter create <projectname> 命令建立flutter專案:

Flutter入門教程(四)第一個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中資源,根據註釋資訊,它還有assetsplugin欄位:

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

相關文章