Flutter 骨架 (Skeleton) 專案範例

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

1.　　建立新的Flutter專案

　　1-1.　　開啟命令介面

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

　　1-3.　　輸入專案名稱

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

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

　　2-1.　　build目錄

　　2-2.　　lib目錄

• 　　引用同層目錄的檔案：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目錄

import 'package:flutter_test/flutter_test.dart';
void mn() {
　　group('Plus Operator', () {
　　　　test('should add two numbers together', () {
　　　　　　expect(1 + 1, 2);
　　　　});
　　});
}    

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);
　　　});
　});
}

　　2-4.　　pubspec.yaml檔案

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檔案

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

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

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

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

　　4-2.　　Chrome Web

　　4-3.　　Linux APP (Ubuntu)

　　4-4.　　Android APP

　　　　在執行Android APP時，若無實體裝置需要先開啟Android Studio並使用AVD Manager建立模擬Android裝置

　　執行時選擇所要執行的Android裝置