Flutter Apprentice5章と6章で分からなかったことをまとめる

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

Chapter5 Scrollable Widgets
Chapter6 Interactive Widgets
を読んだので分からなかったことをまとめる

Dartの構文
・export
This means you don’t have to call additional imports when you use the new component.

・List.unmodifiable
Listを変更操作不可になる。
https://medium.com/flutter-jp/immutable-d23bae5c29f8

・Function
匿名関数（Functionクラス）
https://zenn.dev/iwaku/articles/2020-12-03-iwaku

・TimeOfDay
時間と分だけを使う
https://note.com/hatchoutschool/n/n6339a062d79a

・DateFormat(‘MMMM dd h:mm a’);
aはAM

FlutterのUI系
・TextTheme
bodyText1
bodyText2
で定義してそれを適応するらしい。
https://qiita.com/agajo/items/4e0fa344dd6c1a36c937#texttheme

・ListView.separated
リストの区分けに区分があるListView

・NeverScrollableScrollPhysics
ListViewのスクロールを無効にする
https://techsmeme.com/flutter-scroll-disable/

・セカンダリListView
primary: false
をListViewにつけるとセカンダリになる

・MaterialButton
This class is obsolete.
FlatButton, RaisedButton, and OutlineButton have been replaced by TextButton, ElevatedButton, and OutlinedButton respectively. Button
https://api.flutter.dev/flutter/material/MaterialButton-class.html

・AppBar
以下でボタンを追加できる

appBar: AppBar(
actions: [
    IconButton(onPressed: () {}, icon: const Icon(Icons.check))
],

・TextField
enabledBorder：TextFieldに触れていないとき
focusedBorder：TextFieldに入力したり触っているとき
https://gurutaka-log.com/flutter-textfield-like-btn

BorderSideで線の装飾ができる。
https://www.choge-blog.com/programming/flutter-textfield-borderwidth/

・Chip
AndroidのChipそのまんま。
スタイルは色々ある模様。
https://take424.dev/2021/06/08/flutter%E3%81%A7%E5%90%84%E7%A8%AEchip%E3%82%A6%E3%82%A3%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B/

・BlockPicker
色を選択するポップアップ
https://zenn.dev/iwaku/articles/2021-11-16-iwaku

・TextBaseline.alphabetic
以下のStackOverFlowに書いてあった。
https://stackoverflow.com/questions/56910191/what-is-the-difference-between-alphabetic-and-ideographic-in-flutters-textbasel

・TextDecoration.lineThrough
打ち消し線
https://bukiyo-papa.com/howtousetextwidget/#co-index-11

・IndexedStack
一度開いたタブを再度開くと前回の状態で表示できるようにする。

・UIの要素は重ねていく
Dismissible(InkWell())
にするとスワイプで消して、タップするとリップルする。

Flutterのロジック
・FutureBuilder
future: hogehoge
をデータソースにUIを構築する

・Consumer
Provider.ofを使うかConsumerを使うかって形になる
https://qiita.com/kabochapo/items/a90d8438243c27e2f6d9#consumer

・Stateをextendsしたクラス
再ビルドしたときに変更するフィールドを定義する
https://zenn.dev/ryouhei_furugen/articles/583b1003ebcfc1

widget.titleのような形でwidgetの変数を使うとStatefulWidgetの変数にアクセスできる
上下関係があるんだろうな
https://zenn.dev/ryouhei_furugen/articles/583b1003ebcfc1

・StetafulWidgetのkey
Widgetの識別子。
使うケースほとんどなさそう。
https://qiita.com/kurun_pan/items/f91228cf5c793ec3f3cc

・データの初期化
継承するような形で初期化することができる。

  GroceryTile({Key? key, required this.item, this.onComplete})
      : textDecoration =
            item.isComplete ? TextDecoration.lineThrough : TextDecoration.none,
        super(key: key);

・uuid.v1()
Generate a v1 (time-based) id
https://pub.dev/packages/uuid/example

エラー
・io.Platform.packageRoot
以下のエラーが出たら
io.Platform.packageRoot; // ignore: deprecated_member_use

以下で解消する
flutter pub upgrade
https://stackoverflow.com/questions/70363918/error-member-not-found-packageroot-how-to-solve-ignore-deprecated-member-u

・The following assertion was thrown resolving an image codec:
以下のエラーが出たら
The following assertion was thrown resolving an image codec:
Unable to load asset: assets/fooderlich_assets/empty_list.png

When the exception was thrown, this was the stack:

pubspec.yamlに以下を記載すると解消する
assets: – assets/fooderlich_assets/

・PointerEvent
以下のエラーが出たら
../../../../../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_colorpicker-0.4.0/lib/src/hsv_picker.dart:731:29: Error: The argument type ‘PointerEvent’ can’t be assigned to the parameter type ‘PointerDownEvent’.
– ‘PointerEvent’ is from ‘package:flutter/src/gestures/events.dart’ (‘../../../../../../flutter/packages/flutter/lib/src/gestures/events.dart’).
– ‘PointerDownEvent’ is from ‘package:flutter/src/gestures/events.dart’ (‘../../../../../../flutter/packages/flutter/lib/src/gestures/events.dart’).
super.addAllowedPointer(event);

pubspec.yamlを以下にしたら直った。
flutter_colorpicker: ^1.0.3

・info: SizedBox for whitespace
以下が出たら
info: SizedBox for whitespace. (sized_box_for_whitespace at

ContainerじゃなくてSizedBoxにしましょう。

本の内容が結構間違ってるのでgithub見ながらやると良いと思います。
https://github.com/raywenderlich/flta-materials

Pocket

関連記事: