在Android Studio中建立簡單的Flutter應用程式

本章節，我們將建立一個簡單的Flutter應用程式，以瞭解在Android Studio中建立Flutter應用程式的基礎知識。

步驟1 - 開啟Android Studio

步驟2 - 建立Flutter專案。為此，點選檔案 → 新建 → 新建Flutter專案

步驟3 - 選擇Flutter應用程式。為此，選擇Flutter應用程式並點選下一步。

步驟4 - 按如下配置應用程式，然後點選下一步。

專案名稱：hello_app
Flutter SDK路徑：<flutter_sdk_路徑>
專案位置：<專案資料夾路徑>
描述：基於Flutter的hello world應用程式

步驟5 - 配置專案。

將公司域名設定為flutterapp.tutorialspoint.com，然後點選完成。

步驟6 - 輸入公司域名。

Android Studio建立一個具有最少功能的完全可執行的Flutter應用程式。讓我們檢查一下應用程式的結構，然後更改程式碼來完成我們的任務。

應用程式的結構及其用途如下：

此處解釋了應用程式結構的各個組成部分：

android - 自動生成的原始碼，用於建立Android應用程式
ios - 自動生成的原始碼，用於建立iOS應用程式
lib - 包含使用Flutter框架編寫的Dart程式碼的主資料夾
lib/main.dart - Flutter應用程式的入口點
test - 包含用於測試Flutter應用程式的Dart程式碼的資料夾
test/widget_test.dart - 示例程式碼
.gitignore - Git版本控制檔案
.metadata - 由Flutter工具自動生成
.packages - 自動生成以跟蹤Flutter包
.iml - Android Studio使用的專案檔案
pubspec.yaml - 由Pub（Flutter包管理器）使用
pubspec.lock - 由Flutter包管理器Pub自動生成
README.md - 用Markdown格式編寫的專案描述檔案

步驟7 - 將lib/main.dart檔案中的Dart程式碼替換為以下程式碼：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application',
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'Home page'),
      );
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         body: Center(
            child:
            Text(
               'Hello World',
            )
         ),
      );
   }
}

讓我們逐行了解Dart程式碼。

第1行 - 匯入Flutter包material。material是一個Flutter包，用於根據Android指定的Material Design指南建立使用者介面。
第3行 - 這是Flutter應用程式的入口點。呼叫runApp函式並向其傳遞MyApp類的物件。runApp函式的目的是將給定的widget附加到螢幕上。
第5-17行 - Widget用於在Flutter框架中建立UI。StatelessWidget是一個widget，它不維護widget的任何狀態。MyApp擴充套件了StatelessWidget並覆蓋了其build方法。build方法的目的是建立應用程式UI的一部分。此處，build方法使用MaterialApp，這是一個用於建立應用程式根級別UI的widget。它具有三個屬性：title、theme和home。
- title是應用程式的標題
- theme是widget的主題。在這裡，我們使用ThemeData類及其屬性primarySwatch將藍色設定為應用程式的整體顏色。
- home是應用程式的內部UI，我們將其設定為另一個widget，MyHomePage
第19-38行 - MyHomePage與MyApp相同，只是它返回Scaffold Widget。Scaffold是緊挨著MaterialApp widget的頂級widget，用於建立符合Material Design的UI。它有兩個重要的屬性，appBar用於顯示應用程式的標題，body用於顯示應用程式的實際內容。AppBar是另一個用於呈現應用程式標題的widget，我們將其用於appBar屬性。在body屬性中，我們使用了Center widget，它將子widget居中。Text是最終的也是最內部的widget，用於顯示文字，它顯示在螢幕中央。

步驟8 - 現在，使用執行 → 執行main.dart執行應用程式

步驟9 - 最後，應用程式的輸出如下：

列印頁面