1 ©Linc' well inc. 株式会社Linc'well iOSからFlutterへ20代エンジニアの 転⾝とWidget Preview実践 Widgetbookとの⽐較で⾒るWidgetのPreviewの現状 上原 和輝 

2 ©Linc' well inc. ©Linc' well inc. 2 1 ⾃⼰紹介、Linc'wellの紹介 2 iOSからFlutterエンジニアの転⾝ 3 WidgetPreviewについて 4 Widgetbookとの⽐較で⾒るWidgetのPreviewの現状 

3 ©Linc' well inc. ⾃⼰紹介 上原 和輝 • 株式会社Linc'well Flutterエンジニア • モバイルアプリ開発をメイン • 趣味 • ゲーム（LoL, TFT, モンハン） • ゲーム配信視聴（Youtube,Twitch） 

4 ©Linc' well inc. Linc'wellについて 

5 ©Linc' well inc. クリフォアアプリについて クリフォアアプリ • Flutterで開発 • iOS, Androidで提供 • Linc'wellが提供するサービスをまとめたアプリ • オンライン・オフラインの診療予約 • ヘルスケア製品の購⼊ • 服薬管理機能 • 体重管理サポート 

6 ©Linc' well inc. ©Linc' well inc. 6 iOSからFlutterエンジニアへの転⾝ 

7 ©Linc' well inc. iOSからFlutterエンジニアへの転⾝ 今まで何をしてきたか？ • ⾼校の授業でのプログラム作成(C, COBOL） • ⾼校の部活でWindowsアプリ(VB.NET)、Androidアプリ(Java) • ⼤学の授業でのプログラム作成(C, Fortran, Java) • インターンでバックエンド開発(Java)、Androidアプリ(Java)、iOSアプリ(Objective-C, Swift) • 新卒1社⽬でiOSアプリ(Objective-C, Swift)、バックエンド開発(Java) • 2社⽬でiOSアプリ(Objective-C, Swift)、モバイルとWebアプリ(Flutter) • 現職でモバイルアプリ(Flutter) 

8 ©Linc' well inc. iOSからFlutterエンジニアへの転⾝ キャリア選択の中でモバイルアプリ、Flutterを選んだ理由 • モバイルアプリを選んだ理由 • 実際に⾃分がいつもすぐに⼿に取れるデバイスで⾃分が作ったものが触れる！！ • 作ったものを改善するとすぐに触って確かめれる！！ • Flutterを選んだ理由 • 機能差分が極⼒無く進められる • ネイティブを触る機能は状況によってはあるのでiOSとAndroidの開発を経験しておいて良かった • 実装時の挙動でおかしい部分などがあればFlutter側のソースコードを⾒にいける 

9 ©Linc' well inc. ©Linc' well inc. 9 WidgetPreviewについて 

10 ©Linc' well inc. WidgetPreviewについて WidgetPreviewとは何か？ 出所 https://docs.flutter.dev/tools/widget-previewer • ウィジェットをレンダリングしてアプリ本体とは別でウィジェットを⾒れる機能 • WidgetにPreviewアノテーションをつけて利⽤する • Flutterバージョン3.35から利⽤可能だがまだ実験的機能（⼀応前から⼊ってはいた） • WidgetのPreviewの名前（My Sample Text）や拡⼤・縮⼩、ライト・ダークモードの切 り替えなどがデフォルトで出来る ここだけが本体のWidget 

11 ©Linc' well inc. WidgetPreviewについて WidgetPreviewのアノテーションで設定できること 出所 https://docs.flutter.dev/tools/widget-previewer • Previewアノテーション • name: プレビュー名を付けられる • size: Sizeオブジェクトを渡してサイズを変えられる • textScaleFactor: フォントスケールを変えられる • wrapper: プレビューウィジェットを特定のウィジェットにラップすることが出来る • theme: MaterialとCupertinoのテーマ設定データを変更出来る • brightness: darkかlightモードの初期設定ができる • localization: Localization設定の適⽤ができる 

12 ©Linc' well inc. WidgetPreviewについて WidgetPreviewを動かしてみる（Flutterバージョン 3.35.1-stable） • flutter widget-preview start コマンドを利⽤したいプロジェクト直下で実⾏ • .dart_toolディレクトリ下にwidget_preview_scaffoldプロジェクトが作成される • 上記が今後WidgetPreviewで表⽰するものが⼊るプロジェクトになる 

13 ©Linc' well inc. WidgetPreviewについて WidgetPreviewを動かして起きた問題 • 実際に動かそうとするとパッケージエラーになる • widget_preview_scaffoldのpubspec.yamlに必要なパッケージが存在しないので必要なものを⾜す必要がある • 利⽤したいプロジェクトへのパスや内部で利⽤している各種パッケージ（右下に⼿元環境で⼊れたものを記載してま す） • .dart_tool配下にwidget_preview_scaffoldができるが⼤体そこはgitignoreで無視している場所になるのでそこだけ無 視しない設定にする必要がある • !.dart_tool/widget_preview_scaffold/ (.gitignoreに⼊れる設定） • git add -f .dart_tool/widget_preview_scaffold/ 

14 ©Linc' well inc. WidgetPreviewについて WidgetPreviewの実践利⽤について • 実装中にその画⾯まで⾏って描画を試す のが難しいなどの時にサッと利⽤できる のは良い • 開発段階でPreviewアノテーションつけて 確認して実装終了次第消す運⽤だと利⽤し やすい • コンポーネント⼀覧として利⽤は現状厳し い 

15 ©Linc' well inc. WidgetPreviewについて WidgetPreviewで現状出来ないこと • Textの⽂字の変更やWidgetの⼀部を隠すなどを外側から弄ることが出来ない • ⽂字列を外側から動的に変更したり、隠すなどするには、独⾃実装が必要になる • Previewが現状、⼀ページのみに集約される • Previewを作れば作るほどどこにあるか分からなくなる • dart:ioを利⽤しているWidgetはプレビューできない • Flutter Webで構築されているため 例: Platform.isAndroidなど 

16 ©Linc' well inc. Widgetbookとの⽐較で⾒るWidgetのPreviewの現状 Widgetbookとは何か 出所 https://docs.widgetbook.io/ • ウィジェットを個別に構築、テストするためのオープンソースのFlutterパッケージ • Knobsと⾔われる状態の定義ができる • 変更可能なStringのKnobs • コンポーネントのタイトルを変更 • 変更可能なboolのKnobs • コンポーネント内のUIの表⽰⾮表⽰ 変更に利⽤ • pathで分類ができる • path: ʻ[Components]/[Button]ʼ 

17 ©Linc' well inc. Widgetbookとの⽐較で⾒るWidgetのPreviewの現状 Widgetbookとの⽐較 機能 WidgetPreview Widgetbook ウィジェット表⽰ Previewアノテーションで表⽰可能 widgetbook.useCaseアノテーションで 表⽰可能 ホットリロード 可能 可能 外側から状態を変 更 不可能 Knobsを利⽤することで⽂字やBool値で 状態を変更可能 各ウィジェットを 別ページで表⽰ 不可能 widgetbook.useCaseアノテーションで pathを指定することで別ページで表⽰可 能 

18 ©Linc' well inc. Widgetbookとの⽐較で⾒るWidgetのPreviewの現状 まとめ • 使い道を限ればWidgetPreviewの利⽤も良い • 開発段階でPreviewアノテーションつけて実装確認して開発終了すれば消す • Widgetカタログや外側から状態を楽に変更したいなどをしたいのであればWidgetbook を利⽤するのが良い • Flutter3.35.0がリリースされてからもFlutterへのWidgetPreview関連のPRはどんどん マージされていっているので今後に期待！！