Flutter Apprentice11章〜14章で分からなかったことをまとめる

Flutter Apprentice9章と10章で分からなかったことをまとめる
の続編

Chapter11 Networking in Flutter
Chapter12 Using the Chopper Library
Chapter13 State Management
Chapter14 Stream
を読んだので分からなかったことをまとめる

Dart
・as
cast
https://stackoverflow.com/questions/55789048/what-does-the-as-keyword-do-in-dart-language

・interfaceがない
なのでabstract classを使う。

・implements
interfaceはないけどimplementsはできるw
>他のクラスで定義したインターフェイス（関数定義）を利用するためクラス
https://zenn.dev/iwaku/articles/2020-12-16-iwaku

Flutter
・Flexible
大きくはならないけど小さくはなるらしい。
https://zenn.dev/pressedkonbu/articles/flexible-vs-expanded

・childAspectRatio
Gridの縦と横の比率を変える。
https://qiita.com/superman9387/items/063dc8905000156b6292

・textScaleFactor
フォントサイズを固定する。
https://qiita.com/kasa_le/items/fc036e4a4a5fab4364f2

・debugShowCheckedModeBanner
バナーを消せる
https://qiita.com/rkowase/items/e351b79e8b085ec3eeec

Chopper
・説明
Retrofitの代わり

・@ChopperAPI
を書いて作る。

chopperのbuildは以下でできる。
–delete-conflicting-outputsは
>競合しているファイルを一旦削除して再作成してくれるので、これで解決できます。
flutter pub run build_runner build –delete-conflicting-outputs
https://minpro.net/conflicting-outputs-were-detected-and-the-build-is-unable

新ファイル、xxx.chopper.dartが作成される。

・ヘッダをapplication/jsonにする
以下を実装する。
applyHeader(request, contentTypeKey, jsonApiHeaders, override: false);

・エラー系
recipe_service.dart:9:1: Directives must appear before any declarations.
importの次に以下を記載すれば解決する。
part ‘recipe_service.chopper.dart’;

アーキテクチャ
・本書は以下になるとのこと
クリーンアーキテクチャですかね
UI -> Buissiness Logic(widget data -> repository) -> Network or DB

・InheritedWidget
RecipeWidget recipeWdiget = RecipeWidget.of(context);
で親Widgetにアクセスできる。
メリットは、外部パッケージが不要
デメリットは、値の変更ができない。
なのでこの方法よりはProviderが勧められてる

・Provider
ChangeNotifierProvider
Consumer：データの変更でUIの変更ができる
Provider.of(context) ：データが変更されたら値の変更を受け取れる

Providerには色々種類がある。
FutureProvider
MultiProvider
StreamProvider

また、ChangeNotifierにはlazyパラメータがある。
>省略するか true を指定すると、create に渡したコールバック関数で生成されるオブジェクトが最初に使用されるときまでその生成が遅延されます。
https://qiita.com/kabochapo/items/a90d8438243c27e2f6d9

Stream
・データの流し方
sink.addでstreamにデータを流せる

・Futureをreturnするには
return Future.value()
でおk

Pocket

関連記事: