#36 create generic image widget #69

haterain0203 · 2023-07-24T03:43:17Z

Issue

close #36

説明

汎用的な画像Widgetの作成
- cached_network_image を使用
- 円 or 正方形 or 長方形を指定できる（それ用のenumを作成）
- サイズ（縦）を指定できる
- サイズ（横）は、円・正方形の場合は、サイズ（縦）を適用し、長方形の場合はサイズ（縦）の2倍とした
- 指定がない場合はデフォルト値として縦横 64とした
- 角丸サイズを指定できる
- 画像をタップした場合のVoidCallbackを指定できる
- imageUrlが空文字の場合は代わりのグレー色プレイスホルダーっぽい見た目に
上記Widgetのサンプルを表示するdevelopment/development_components/develop/components.dartの追加
development/development_items/development_items.dart内に上記サンプルページへの動線追加

UI

開発ページ内に「Components」追加

開発中のComponentsページ

その他

レビューのほどよろしくお願いします！

チェックリスト

PR の冒頭に関連する Issue 番号を記載しましたか？
本 PR の変更に関して、エディタや IDE で意図しない警告は増えていませんか？（lint 警告やタイポなど）
Issue の完了の定義は満たせていますか？

…r-app into #36_create_generic_image_widget # Conflicts: # packages/mottai_flutter_app/pubspec.yaml

kosukesaigusa · 2023-07-24T04:14:10Z

packages/dart_flutter_common/lib/src/components/image.dart

+  final double? radius;
+  @override
+  Widget build(BuildContext context) {
+    return imageUrl.isEmpty


[任意（好みの問題）]

3 項演算子でなくていいなら、単に

if (condition) { return something; } return somethingElse;

が私は好きです！（インデントが減って見やすい、if 文の条件が増えても 3 項演算子がネストするようなことにならない）

ありがとうございます！

e3f09e5

にて対応しました！

kosukesaigusa · 2023-07-24T04:14:27Z

packages/dart_flutter_common/lib/src/components/image.dart

+    // 各図形の高さ。circle/squareの場合、widthにもこの値が入る。rectangleの場合、widthはこれの2倍の値が入る
+    // 指定がない場合は、defaultとして64.0が入る


このような説明は、height 自体の定義に doc comment（3 本スラッシュ /// のコメント）として書くと、利用する側がエディタでカーソルを合わせることでその内容を確認できるのでやってみてください！

ありがとうございます！
今回は該当箇所が削除になりましたが、次回こういったシチュエーションがあった際は、doc commentにします！

kosukesaigusa · 2023-07-24T04:17:23Z

packages/dart_flutter_common/lib/src/components/image.dart

+              placeholder: (context, url) => const Center(
+                child: CircularProgressIndicator(),
+              ),


[追加の提案]

画像の読み込み中は CircularProgressIndicator のぐるぐるではなく、使用者が任意のウィジェットを渡したくなることもほぼ間違いなくあるので、任意で渡せるようにしましょうか！（また、そのときのデフォルトのウィジェットも CircularProgressIndicator() よりも、単にその形のグレー色のウィジェットのほうが良さそうな気がしています）

ありがとうございます！

c03f552

にて対応しました。

kosukesaigusa · 2023-07-24T04:18:45Z

packages/dart_flutter_common/lib/src/components/image.dart

+  final DecorationImage? decorationImage;
+  @override
+  Widget build(BuildContext context) {
+    const defaultSize = 64.0;


このクラス自体の変数として

static const double _defaultSize = 64; みたいにしましょうか

ありがとうございます！

f12a6b0

にて対応しました

kosukesaigusa · 2023-07-24T04:24:37Z

packages/dart_flutter_common/lib/src/components/image.dart

+    this.height,
+    this.radius,


この画像を使用する人が、画像 URL と形に加えて、

高さ

半径

を渡すというのがちょっとアンバランスな感じがしてどうなんだろうと思っています。

また（これ以下の実装の話ですが）、長方形の場合は常に横幅は高さの 2 倍にする仕様になっていますか？（おそらく 1:2 は一般的画像のアスペクト比というわけでもないでしょうし、「汎用的な画像ウィジェット」としては、長方形の場合は、高さと幅を両方指定するようにするべきかな〜！と思っています！）

勝手に2倍の仕様にしてしまっていました・・・
形ごとの名前付きコンストラクタを作成し、長方形の場合は高さと幅の両方を指定するよう修正しました！

kosukesaigusa · 2023-07-24T04:29:15Z

packages/dart_flutter_common/lib/src/components/image.dart

+}
+
+class GenericImageWidget extends StatelessWidget {
+  const GenericImageWidget({


下でも指摘した、「形ごとに渡すべきサイズに関する値の種類が異なる」という仕様の話にも関連して、これを名前付きコンストラクタにする（イニシャライザリストも活用する）のはどうでしょうか？

https://dart.dev/language/constructors#named-constructors

https://dart.dev/language/constructors#initializer-list

そうすると、それぞの名前付きコンストラクタごとに渡すパラメータを変えられるように思います（たとえば円と正方形では単にsize、長方形では width と height のような感じ）。

GenericImageWidget.circle(/* 省略 */): imageShape = ImageShape.circle; GenericImageWidget.square(/* 省略 */): imageShape = ImageShape.square; GenericImageWidget.rectangle(/* 省略 */): imageShape = ImageShape.rectangle;

ありがとうございます！
恥ずかしながら名前付きコンストラクタを理解できていなかったので勉強になりました・・・！

1e562cc

上記のような対応でいかがでしょうか！？

kosukesaigusa · 2023-07-24T04:30:14Z

packages/dart_flutter_common/lib/src/components/image.dart

+        ? (height != null ? height! * 2 : defaultSize * 2)
+        : height ?? defaultSize;
+
+    return Center(


ここもそのほうが見やすければ ImageShape で switch-case 書いてしまっていいとも思います。

ありがとうございます！

30e2a0c

上記のように修正してみたのですが、どうでしょうか？

kosukesaigusa · 2023-07-24T04:30:33Z

packages/dart_flutter_common/lib/src/components/image.dart

+    final adjustWidth = imageShape == ImageShape.rectangle
+        ? (height != null ? height! * 2 : defaultSize * 2)
+        : height ?? defaultSize;


上で指摘した通り、この仕様はやめることになると思います。

kosukesaigusa · 2023-07-24T04:33:33Z

packages/dart_flutter_common/lib/src/components/image.dart

+        ? _ImageDisplayContainer(
+            imageShape: imageShape,
+            color: Colors.grey,
+            height: height,
+            radius: radius,
+          )


これは Colors.grey を直接渡すことで _ImageDisplayContainer 側でその見た目に合うようなウィジェットを表示するというよりは、ウィジェットを分けてしまう（PlaceholderImage みたいな）か名前付き引数（_ImageDisplayContainer.placeholder(/* 省略 */) みたいな）かで書くほうが読んですぐに理解できると思います！（現状だと、ここだけ読んでどんな見た目になりそうか想像できない。PlaceholderImage のように書いてあると「ああ、画像が空っぽのときのプレースホルダ画像なんだろうな」とすぐわかる）

なるほど、確かに変更前だと「ここだけ読んでどんな見た目になるか想像できない」ですね・・・

fda64db

にて、.placeholderを作ってみました！

kosukesaigusa · 2023-07-24T04:34:35Z

packages/mottai_flutter_app/lib/development/deveopment_components/development_components.dart

+      appBar: AppBar(
+        title: const Text('開発中のComponents'),
+      ),
+      body: Column(


[任意]

エラーのケース（もし可能なら、loading のケース）の見た目のサンプルもあると嬉しいです！

こちらについてはまだ対応できていませんので、追って対応します！

cee51c7
にてエラーのケースのサンプルを追加しました！

7167511
で、エラーケースの場合は指定された形やサイズの中にアイコンを表示するようにしてみましたが、いかがでしょう？
（元々はアイコンのみ表示される仕様にしていた）

loading のケースは、GPT先生に相談して
http://deelay.me/
というサービスを教えてもらったんですが、今は動作してないようでした・・・
他に実現できる方法がわからなかったので、loadingのケースは対応できていません。

kosukesaigusa · 2023-07-24T04:45:57Z

packages/dart_flutter_common/lib/src/components/image.dart

+  Widget build(BuildContext context) {
+    const defaultSize = 64.0;
+
+    // 長方形が指定された場合のみ、指定されたheightの2倍の値またはdefaulSizeの2倍の値をwidthに設定する


[タイポ]

defaulSize → defaultSize

…r-app into #36_create_generic_image_widget

kosukesaigusa · 2023-07-25T05:02:56Z

packages/dart_flutter_common/lib/src/components/image.dart

+  final double? height;
+  final double? width;
+  final double? borderRadius;
+  final Widget? loading;


[軽微]

loadingWidget か loadingPlaceholder に変えましょうか！

ありがとうございます！

d32565b
にて修正しました。

kosukesaigusa · 2023-07-25T05:03:35Z

packages/dart_flutter_common/lib/src/components/image.dart

+  Widget build(BuildContext context) {
+    switch (imageShape) {
+      case ImageShape.circle:
+        {


この波括弧 {} は不要ではないですか？

ありがとうございます！
不要ですね・・・

ec98a2b
にて修正しました

…r-app into #36_create_generic_image_widget # Conflicts: # packages/mottai_flutter_app/lib/development/development_items/ui/development_items.dart

…r-app into #36_create_generic_image_widget

haterain0203 added 12 commits July 22, 2023 15:24

「画像の形」のenum定義

d6c6c7e

StatelessWidgetの大枠追加

0ff27aa

cached_network_image: ^3.2.3の追加

7a91f64

汎用的な画像Widgetの定義

043769f

Merge branch 'main' of https://github.com/KosukeSaigusa/mottai-flutte…

d2551b5

…r-app into #36_create_generic_image_widget # Conflicts: # packages/mottai_flutter_app/pubspec.yaml

Componentsの確認ページ追加

f28b976

各パッケージでfvm flutter pub実行

b05087d

作成したComponentsの使用例を示すクラス追加

19e8e6f

当該クラス内でのみ使用するクラスをprivate化

7bdea19

コメント追加

94a3b3e

printをdebugPrintに修正

0720420

imageUrlが空の場合のサンプル追加

c4b6f53

haterain0203 requested a review from kosukesaigusa July 24, 2023 03:43

kosukesaigusa requested changes Jul 24, 2023

View reviewed changes

kosukesaigusa reviewed Jul 24, 2023

View reviewed changes

haterain0203 added 9 commits July 24, 2023 15:40

名前付きコンストラクタに修正

1e562cc

プロパティ名の修正（radius -> borderRadius）

e383440

デフォルトサイズをクラス自体の変数に修正

f12a6b0

_ImageDisplayContainerをimageShapeに応じたswitch-caseに修正

30e2a0c

_ImageDisplayContainer.placeholderの追加

fda64db

borderRadiusの実装漏れ対応

1be450f

loading時の表示Widgetを任意で指定できるよう修正（デフォルトでは、指定された形のグレー色のWidgetを表示）

c03f552

三項演算子をif文に修正

e3f09e5

Merge branch 'main' of https://github.com/KosukeSaigusa/mottai-flutte…

6899626

…r-app into #36_create_generic_image_widget

kosukesaigusa mentioned this pull request Jul 25, 2023

#64 画像詳細表示ビューの作成 #75

Merged

3 tasks

kosukesaigusa reviewed Jul 25, 2023

View reviewed changes

haterain0203 added 3 commits July 26, 2023 13:07

Merge branch 'main' of https://github.com/KosukeSaigusa/mottai-flutte…

2c5ebdf

…r-app into #36_create_generic_image_widget # Conflicts: # packages/mottai_flutter_app/lib/development/development_items/ui/development_items.dart

errorWidgetのサンプル追加

cee51c7

errorWidgetも指定された形で表示するよう修正

7167511

haterain0203 added 3 commits July 26, 2023 23:03

プロパティをloadingからloadingWidgetに修正

d32565b

不必要な波括弧を削除

ec98a2b

Merge branch 'main' of https://github.com/KosukeSaigusa/mottai-flutte…

cef4d94

…r-app into #36_create_generic_image_widget

kosukesaigusa approved these changes Jul 26, 2023

View reviewed changes

haterain0203 merged commit f9875f0 into main Jul 27, 2023
1 check passed

haterain0203 deleted the #36_create_generic_image_widget branch July 27, 2023 00:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#36 create generic image widget #69

#36 create generic image widget #69

haterain0203 commented Jul 24, 2023 •

edited

Loading

kosukesaigusa Jul 24, 2023

haterain0203 Jul 24, 2023

kosukesaigusa Jul 24, 2023

haterain0203 Jul 24, 2023

kosukesaigusa Jul 24, 2023

haterain0203 Jul 24, 2023

kosukesaigusa Jul 24, 2023

haterain0203 Jul 24, 2023

kosukesaigusa Jul 24, 2023 •

edited

Loading

haterain0203 Jul 24, 2023

kosukesaigusa Jul 24, 2023

haterain0203 Jul 24, 2023

kosukesaigusa Jul 24, 2023

haterain0203 Jul 24, 2023

kosukesaigusa Jul 24, 2023

kosukesaigusa Jul 24, 2023

haterain0203 Jul 24, 2023

kosukesaigusa Jul 24, 2023

haterain0203 Jul 24, 2023

haterain0203 Jul 26, 2023

kosukesaigusa Jul 24, 2023

kosukesaigusa Jul 25, 2023

haterain0203 Jul 26, 2023

kosukesaigusa Jul 25, 2023

haterain0203 Jul 26, 2023

		// 各図形の高さ。circle/squareの場合、widthにもこの値が入る。rectangleの場合、widthはこれの2倍の値が入る
		// 指定がない場合は、defaultとして64.0が入る

#36 create generic image widget #69

#36 create generic image widget #69

Conversation

haterain0203 commented Jul 24, 2023 • edited Loading

Issue

説明

UI

開発ページ内に「Components」追加

開発中のComponentsページ

その他

チェックリスト

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kosukesaigusa Jul 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haterain0203 commented Jul 24, 2023 •

edited

Loading

kosukesaigusa Jul 24, 2023 •

edited

Loading