Session/8

README.md

@@ -1,3 +1,43 @@
-# flutter_training
+# ゆめみ　Flutter研修課題
 
-A new Flutter project.
+テンプレート
+
+- https://github.com/yumemi-inc/flutter-training-template
+
+## 環境構築
+
+*リポジトリをクローン
+
+```
+git clone https://github.com/mqkotoo/flutter_training.git
+```
+
+* 作業ディレクトリを変更する
+
+```
+cd flutter_training
+```
+
+* fvmに指定されたバージョンのFlutterをインストールする
+
+```
+fvm install
+```
+
+* 依存パッケージをインストールする
+
+```
+fvm flutter pub get
+```
+
+* freezed等のコード生成
+
+```
+fvm flutter pub run build_runner build
+```
+
+* ビルドラン
+
+```
+fvm flutter run
+```

analysis_options.yaml

@@ -3,3 +3,8 @@ include: package:blendthink_lints/recommended.yaml
 linter:
   rules:
     sort_pub_dependencies: false
+    always_use_package_imports: true
+
+analyzer:
+  plugins:
+    - custom_lint

doc/ARCHITECTURE.md

@@ -0,0 +1,48 @@
+## アーキテクチャ
+
+今回のプロジェクトではあえて、いわゆるアーキテクチャというような大掛かりな設計はせずに、[`WeatherState`](../lib/state/weather_state.dart)
+という、天気の取得操作、結果を管理するプロバイダーを作成し、Viewレイヤとやりとりするだけのシンプルな設計にしました。
+
+### ルール
+
+* Stateレイヤでなんらかの状態を操作して保管する。
+* Viewレイヤから`ref.read`してStateの操作、`ref.watch`してStateの表示を行う。
+* Stateレイヤのロジックが肥大する場合はServiceレイヤに移動させる。
+
+上記のルールに基づいて開発を進めました。
+
+### モチベーション
+
+* 今回のような規模が小さいプロジェクトに、たくさんレイヤーがあるアーキテクチャを採用すると無駄なレイヤーが増え、複雑化する。
+* 無理やり一定のアーキテクチャの型にはめると、個人的にはまだアーキテクチャの知識が浅いので、実際の必要性を感じることなく形だけのアーキテクチャになる可能性がある。
+* 簡潔でシンプルでわかりやすい。（主観になりますが。。）
+
+<img height="700" src="image/architecture.jpg"></img>
+
+## View
+
+### WeatherPage
+
+* アプリのメイン画面
+* `Reload`ボタンを押して、`weatherStateProvider`をreadして、天気の取得処理を行う。
+* `weatherStateProvider`で天気取得に失敗した場合は、エラーメッセージを表示する。
+
+### WeatherForecast
+
+* 天気の情報、気温等を表示しているコンポネント。
+* `weatherStateProvider`をwatchして、天気の状態を表示する。
+
+## State
+
+### WeatherState
+
+* 天気データの取得、管理するプロバイダー
+* 天気の取得が成功したらそのデータを格納し、失敗した場合は、`onError`関数を引数で受け取る。
+
+## Service
+
+* `WeatherState`での処理が肥大化したので天気を取得する処理はここに移動した。
+
+## Model
+
+* 天気情報やリクエストを送るモデルを定義

lib/main.dart

@@ -1,8 +1,22 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_training/utils/provider/yumemi_weather_client.dart';
 import 'package:flutter_training/view/launch_page.dart';
+import 'package:yumemi_weather/yumemi_weather.dart';
 
 void main() {
-  runApp(const MainApp());
+  WidgetsFlutterBinding.ensureInitialized();
+  runApp(
+    ProviderScope(
+      overrides: [
+        //YumemiWeatherクライアントを注入
+        yumemiWeatherClientProvider.overrideWithValue(
+          YumemiWeather(),
+        ),
+      ],
+      child: const MainApp(),
+    ),
+  );
 }
 
 class MainApp extends StatelessWidget {

lib/service/weather_service.dart

@@ -3,15 +3,25 @@ import 'dart:convert';
 import 'package:flutter_training/model/weather_data.dart';
 import 'package:flutter_training/model/weather_request.dart';
 import 'package:flutter_training/utils/api/result.dart';
+import 'package:flutter_training/utils/provider/yumemi_weather_client.dart';
 import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:yumemi_weather/yumemi_weather.dart';
 
+part 'weather_service.g.dart';
+
+@riverpod
+WeatherService weatherService(WeatherServiceRef ref) {
+  return WeatherService(ref.read(yumemiWeatherClientProvider));
+}
+
 class WeatherService {
   WeatherService(this._client);
 
   final YumemiWeather _client;
 
   /// Get weather information
+  ///
   /// If successful, the value is stored in [Success],
   /// if unsuccessful, the error message is stored in [Failure].
 

lib/state/weather_state.dart

@@ -0,0 +1,23 @@
+import 'package:flutter_training/model/weather_data.dart';
+import 'package:flutter_training/model/weather_request.dart';
+import 'package:flutter_training/service/weather_service.dart';
+import 'package:flutter_training/utils/api/result.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'weather_state.g.dart';
+
+@riverpod
+class WeatherState extends _$WeatherState {
+  @override
+  WeatherData? build() => null;
+
+  void getWeather({
+    required WeatherRequest request,
+    required void Function(String error) onError,
+  }) {
+    return switch (ref.read(weatherServiceProvider).fetchWeather(request)) {
+      Success(value: final value) => state = value,
+      Failure(exception: final error) => onError.call(error),
+    };
+  }
+}

lib/utils/provider/yumemi_weather_client.dart

@@ -0,0 +1,10 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:yumemi_weather/yumemi_weather.dart';
+
+part 'yumemi_weather_client.g.dart';
+
+//初回に上書きしてキャッシュして使うので、直接アクセスはできないようにする
+@riverpod
+YumemiWeather yumemiWeatherClient(YumemiWeatherClientRef ref) {
+  throw UnimplementedError();
+}

lib/view/weather_view/component/weather_forecast.dart

@@ -1,15 +1,15 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_training/model/weather_condition.dart';
-import 'package:flutter_training/model/weather_data.dart';
+import 'package:flutter_training/state/weather_state.dart';
 
-class WeatherForecast extends StatelessWidget {
-  const WeatherForecast({super.key, required this.weatherData});
-
-  final WeatherData? weatherData;
+class WeatherForecast extends ConsumerWidget {
+  const WeatherForecast({super.key});
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, WidgetRef ref) {
     final textTheme = Theme.of(context).textTheme;
+    final weatherData = ref.watch(weatherStateProvider);
     return Column(
       children: [
         //Weather conditions

lib/view/weather_view/weather_page.dart

@@ -1,45 +1,33 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_training/model/weather_data.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_training/model/weather_request.dart';
-import 'package:flutter_training/service/weather_service.dart';
-import 'package:flutter_training/utils/api/result.dart';
+import 'package:flutter_training/state/weather_state.dart';
 import 'package:flutter_training/view/weather_view/component/weather_forecast.dart';
-import 'package:yumemi_weather/yumemi_weather.dart';
 
-class WeatherPage extends StatefulWidget {
+class WeatherPage extends ConsumerWidget {
   const WeatherPage({super.key});
 
   @override
-  State<WeatherPage> createState() => _WeatherPageState();
-}
-
-class _WeatherPageState extends State<WeatherPage> {
-  WeatherData? weatherData;
-  final service = WeatherService(YumemiWeather());
+  Widget build(BuildContext context, WidgetRef ref) {
+    void onReloaded(WeatherRequest request) {
+      ref.read(weatherStateProvider.notifier).getWeather(
+            request: request,
+            onError: (errorMessage) => showDialog<void>(
+              barrierDismissible: false,
+              context: context,
+              builder: (_) => _ErrorDialog(errorMessage),
+            ),
+          );
+    }
 
-  void _onReloaded() {
-    //fetchWeatherの結果がSuccessかFailureかで処理を分ける
-    return switch (service
-        .fetchWeather(WeatherRequest(area: 'Aichi', date: DateTime.now()))) {
-      Success(value: final value) => setState(() => weatherData = value),
-      Failure(exception: final error) => showDialog<void>(
-          barrierDismissible: false,
-          context: context,
-          builder: (_) => _ErrorDialog(error),
-        ),
-    };
-  }
-
-  @override
-  Widget build(BuildContext context) {
     return Scaffold(
       body: Center(
         child: FractionallySizedBox(
           widthFactor: 0.5,
           child: Column(
             children: [
               const Spacer(),
-              WeatherForecast(weatherData: weatherData),
+              const WeatherForecast(),
               Flexible(
                 child: Column(
                   children: [
@@ -54,7 +42,14 @@ class _WeatherPageState extends State<WeatherPage> {
                         ),
                         Expanded(
                           child: TextButton(
-                            onPressed: _onReloaded,
+                            onPressed: () {
+                              onReloaded(
+                                WeatherRequest(
+                                  area: 'Nagoya',
+                                  date: DateTime.now(),
+                                ),
+                              );
+                            },
                             child: const Text('Reload'),
                           ),
                         ),