Flutter 骨架 (Skeleton) 專案範例

更新於 發佈於 閱讀時間約 23 分鐘

  Flutter 提供骨架(Skeleton)專案範例,主要提供下列功能說明:

  1. 專案中新增/設定本地化( Localizations)檔案
  2. 程式中動態切換主題(Theme)的方法
  3. 導航與路由 (Navigate & Routing)的方法


1.  建立新的Flutter專案

  1-1.  開啟命令介面

raw-image
raw-image

  1-2.  選擇建立骨架 (Skeleton) 專案類型

raw-image

  1-3.  輸入專案名稱

raw-image

2.  Flutter 預設骨架專案的檔案架構

  在選擇建立新的骨架專案後會自動產生相關的檔案及目錄,主要的檔案如下:

  2-1.  build目錄

    儲存各平台建置完成後產生的執行檔案

    (1)  app/outputs/apk -

      選擇建置andoird平台後所產生的apk檔

raw-image
raw-image

    (2) windows/runner/ -

      選擇建置 windows平台後所產生的exe及dll檔案。

raw-image
raw-image

    (3)  web

      選擇建置web平台後所產生相關的html及js檔案。

raw-image
raw-image

    (4)  linux/x64/release/bundle

      選擇建置linux平台後所產生的執行檔及.so檔案。

raw-image
raw-image

  2-2.  lib目錄

    主要存放開發程式碼的目錄,main.dart 中的 main 函式為啟動程式的入口函式,而此範例程式使用非同步的方法載入主題(Thmem)的資料,因此在main 函式後加入 async 關鍵字。

若要直接引用存放於此目錄下的檔案的格式如下:

  •   引用同層目錄的檔案:import "檔案名稱";
  •   引用子目錄的檔案: import "子目錄名稱/檔案名稱";
  •   引用上層目錄的檔案: import "../目錄名稱/檔案名稱";
import 'package:flutter/material.dart';
import 'src/app.dart';
import 'src/settings/settings_controller.dart';
import 'src/settings/settings_service.dart';

void main() async {
  final settingsController = SettingsController(SettingsService());

  await settingsController.loadSettings();

  runApp(MyApp(settingsController: settingsController));
}

  2-3.  test目錄

     主要存放使用Flutter中WidgetTester的測試程序對指定Widget物件進行互動驗證程式與 test 測試函數進行自訂函數的驗證而 group 函數為可組合多次連續測試程序,此範例專案提供兩個測試範例:

  1.  unit_test.dart

     測試自訂的1+1是否等於二的函數正確性,若正確則會回傳test函數中定義的字串,若不是則會在執行時產生例外。

import 'package:flutter_test/flutter_test.dart';

void mn() {
  group('Plus Operator', () {
    test('should add two numbers together', () {
      expect(1 + 1, 2);
    });
  });
}
raw-image

  2.  widget_test.dart

    測試自訂MaterialApp在建立時是否會包含多於一個Text物件,若正確則會回傳execpt函數中定義的字串,若不是則會在執行時產生例外。

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  group('MyWidget', (){
    testWidgets('should display a string of text', (WidgetTester tester) async {  
    // Define a Widget
    const myWidget = MaterialApp(
      home: Scaffold(
        body: Text('Hello'),
      ),
    );
    // Build myWidget and trigger a frame.
    await tester.pumpWidget(myWidget);

    // Verify myWidget shows some text
    expect(find.byType(Text), findsOneWidget);
   });
 });
}
raw-image

  2-4.  pubspec.yaml檔案

    flutter 專案中的檔案配置檔,除了設定基本專案資訊並可設定專案中使用到的相依類別庫或外部資源。

name: flutter_skeleton
description: A new Flutter project.

# Prevent accidental publishing to pub.dev.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.15.1 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
    version: ^0.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:
  uses-material-design: true

  # Enable generation of localized Strings from arb files.
  generate: true

  assets:
  # Add assets from the images directory to the application.
  - assets/images/

  2-5.  .packages檔案

    flutter 專案中設定相依類別庫檔案路徑的組態檔,建立專案的預設檔案路徑為 flutter_skeleton:lib/ 而此檔案是在執行"flutter pub get"指令後根據 pubspec.yaml中的內容產生出來,設定引用類別庫格式為【路徑別名:實際路徑】。

async:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/async-2.8.2/lib/
boolean_selector:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib/
characters:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/characters-1.2.0/lib/
charcode:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/charcode-1.3.1/lib/
clock:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/clock-1.1.0/lib/
collection:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/collection-1.15.0/lib/
fake_async:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/fake_async-1.2.0/lib/
flutter:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter/lib/
flutter_lints:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_lints-1.0.4/lib/
flutter_localizations:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter_localizations/lib/
flutter_test:file:///D:/flutter_windows_2.8.1-stable/flutter/packages/flutter_test/lib/
intl:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/intl-0.17.0/lib/
lints:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/lints-1.0.1/lib/
matcher:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/matcher-0.12.11/lib/
meta:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/meta-1.7.0/lib/
path:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/path-1.8.0/lib/
sky_engine:file:///D:/flutter_windows_2.8.1-stable/flutter/bin/cache/pkg/sky_engine/lib/
source_span:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/source_span-1.8.1/lib/
stack_trace:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/stack_trace-1.10.0/lib/
stream_channel:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/stream_channel-2.1.0/lib/
string_scanner:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/string_scanner-1.1.0/lib/
term_glyph:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/term_glyph-1.2.0/lib/
test_api:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/test_api-0.4.3/lib/
typed_data:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/typed_data-1.3.0/lib/
vector_math:file:///D:/flutter_windows_2.8.1-stable/flutter/.pub-cache/hosted/pub.dartlang.org/vector_math-2.1.1/lib/
flutter_skeleton:lib/

  2-.6.  I10n.yaml

    flutter 專案中的本地化(localization)配置檔,主要用來設定放置不同本地化(Localization)檔案路徑、預設本地化檔案及產生出載入本地化檔案的程式檔名稱。

arb-dir: lib/src/localization
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

    此範例專案只有建立基本的本地化(localication) arb 檔案

{
  "appTitle": "flutter_skeleton",
  "@appTitle": {
    "description": "The title of the application"
  }
}

    若專案中有出現無法載入本地化(localization)檔案,則可在Terminal 視窗中執行 「flutter pub add "gen_l10n/app_localizations.dart"」於.dart_tool目錄下產生相應的目錄及檔案。

raw-image
raw-image

3.  Flutter 預設骨架專案的基本架構

  一個最基本的 MaterialApp 的骨架 (Skeleton) 程式,至個 MaterialApp 與 AnimatedBuilder 兩個類別並搭配以混入 (mixins) ChangeNotifier 類別的方式自訂 SettingsController 類別作為主題 (Theme) 切換時產生通知事件的參數。
  因此在建立 Skeleton 專案時會自動產生其基本的運用方法,後續可以依照需求針對 AnimatedBuilder 及 MaterialApp 兩個類別所提供的參數進行程式外觀及操作介面的調整。
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'sample_feature/sample_item_details_view.dart';
import 'sample_feature/sample_item_list_view.dart';
import 'settings/settings_controller.dart';
import 'settings/settings_view.dart';

/// The Widget that configures your application.
class MyApp extends StatelessWidget {
const MyApp({ Key? key, required this.settingsController,})
               : super(key: key);

final SettingsController settingsController;

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: settingsController,
    builder: (BuildContext context, Widget? child) {
      return MaterialApp(
         restorationScopeId: 'app',
         localizationsDelegates: const [
           AppLocalizations.delegate,
           GlobalMaterialLocalizations.delegate,
           GlobalWidgetsLocalizations.delegate,
           GlobalCupertinoLocalizations.delegate,
         ],
         supportedLocales: const [
           Locale('en', ''), // English, no country code
         ],
         onGenerateTitle: (BuildContext context) =>
                  AppLocalizations.of(context)!.appTitle,
         
         theme: ThemeData(),
         darkTheme: ThemeData.dark(),
         themeMode: settingsController.themeMode,

         onGenerateRoute: (RouteSettings routeSettings) {
           return MaterialPageRoute<void>(
             settings: routeSettings,
             builder: (BuildContext context) {
               switch (routeSettings.name) {
                 case SettingsView.routeName:
                   return SettingsView(controller: settingsController);
                 case SampleItemDetailsView.routeName:
                   return const SampleItemDetailsView();
                 case SampleItemListView.routeName:
                 default:
                   return const SampleItemListView();
             }},
         );}
      );},
   );}
}

4.  執行各平台Flutter 偵錯

  點選右下角No Devices項目後切換至要執行偵錯的平台並執行 Run -> Start Debugging (F5) 進行偵錯

  4-1.  Windows Desktop

raw-image
raw-image
raw-image
raw-image

  4-2.  Chrome Web

raw-image
raw-image
raw-image
raw-image

  4-3.  Linux APP (Ubuntu)

raw-image
raw-image
raw-image
raw-image

  4-4.  Android APP

    在執行Android APP時,若無實體裝置需要先開啟Android Studio並使用AVD Manager建立模擬Android裝置
raw-image
raw-image
raw-image
raw-image
raw-image
raw-image
  執行時選擇所要執行的Android裝置
raw-image
raw-image
raw-image
raw-image
raw-image
留言
avatar-img
留言分享你的想法!
avatar-img
跨碼軟體有限公司的沙龍
3會員
9內容數
2022/04/22
  雖然Dart 語言本身支援跨平台的編譯方式,但在實務開發時還是不免需要使用外部非Dart語言所提供的函式庫進行功能開發且由於C 語言是最為廣泛且通用的程式語言,因此Dart語言也有提供支援與C語言函式庫互通性的方式;本篇主要是以MSVC作為C的編譯器來實作說明如何引用C語言會遇到的作法。
Thumbnail
2022/04/22
  雖然Dart 語言本身支援跨平台的編譯方式,但在實務開發時還是不免需要使用外部非Dart語言所提供的函式庫進行功能開發且由於C 語言是最為廣泛且通用的程式語言,因此Dart語言也有提供支援與C語言函式庫互通性的方式;本篇主要是以MSVC作為C的編譯器來實作說明如何引用C語言會遇到的作法。
Thumbnail
2022/02/13
本範例主要說明如何運用Flutter 繪圖與動態相關的API並搭配provider套件進行實作輪盤賭選擇 ( Roulette Wheel Selection ) 程式。
Thumbnail
2022/02/13
本範例主要說明如何運用Flutter 繪圖與動態相關的API並搭配provider套件進行實作輪盤賭選擇 ( Roulette Wheel Selection ) 程式。
Thumbnail
2022/01/24
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
2022/01/24
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
這篇使用pubspec.yaml來管理第三方依賴套件。YAML是一種直覺、可讀性高的文件格式;他和xml或Json相比語法簡單且容易解析,所以常用於配置文件。 Flutter預設的設定檔是pubspec.yaml,底下是關鍵字解釋: name:應用程式或套件名稱。 description: 應用
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 包(Package)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
Thumbnail
說明Flutter 骨架(skeleton)專案範例的架構與在各平台執行的顯示畫面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News