😃

FlutterレアWidgets選

2022/03/11に公開

紹介

3年前から(flutter1.x)からFlutterエンジニアになり、
会社でも、自分でもサービスを作り上げました、便利でファンになりました。

今はFlutter2.xになりまして、色なWidgetを追加や改善されましたと聞かれて、
自分は結構たくさんのパーツを活用しましたが、2.xで開発を進む中に、こんなものあるでしょうか、あんなパーツありえるでしょうかと思いつづ、flutterを深堀しました。

このパーツいいですね

えええ、こんなWidgetあるんだ

自作のWidgetよりいいじゃん

とかの感想結構出ました。
そんな中に、同じくFlutter開発者のみんな様に、自分のメモにも、
ちょっとレアなWidgetsをリストアップし、開発の時、参考できれば幸いです。
人によってレア度は違ったりしたら、申し訳ございません。

WillPopScope

Androidでは戻るボタンがありまして、このパーツ何を言えば、AndroidとiOSを統一させるものと感じますね。
開発当初はテストとかで発覚しました、今後、自分はいつも、下記のように処理していました。

WillPopScope(
 onWillPop: () => Future.value(false),
 child: ....
)

Flexible/Expanded

Flex的なレイアウトを作るとき、愛用するパーツで間違い無いです。

Flexible(
 flex:(XXX)
 fit:FlexFit.tight
 ....
)

下記と同じ効果です。

Expanded(
 flex:(XXX)
 ....
)

Stepper

ユーザーに順番的に手続きをやる時、これはすごくいいと思います。
横と縦選択でき、ステップ内容をコントロールするならば、組み合わせでいけるかもしれない。

FittedBox

サイズ合わなくて、画面でワーニング出たことよくありますね。
このWidgetはまさに救われているところです。
サイズ合わなくても、ちゃんと父親のWidgetのサイズに合わせていきます。

Hero

画像を一つのWidgetとしてタグ付けて、例えば、
ダイアログとか、詳細画面とか、カスタマイズ性があり、いいですね。

ChoiceChip

タグを選択する時、使えそうなWidgetでした。
前がカスタマイズして作ったが、今後こちらを活用したいと思います。

SliverAppBar

Materialデザインと合わせるため、自分は一番よく使われているパーツでした。
注意するのはappBar追加しないでね(見ればわかるですけど

Wrap

Androidのwrap_content知っている人ならばすぐわかります。
このWidgetで、ビッタリこのパーツで抑えるというイメージでした。
リスト超えた場合、自動的に改行したりするのは助かります。

ExpansionTile

よく問い合わせで、問題に対して、回答は展開する形で行っていました。

ExpansionTile動き

表示したい内容

Range Slider

範囲選択ですね。ただし、0〜1の間なので、場合によって、変換しないといけないかもしれない。

Visibility

場合によって、表示したり、しないたりの状況あり、これのコントロールは便利と思います。

AnimatedCrossFade

結構かっこいいアニメションパーツです、自分のお気に入りです。

GridPaper

ノートみたいです、数学系のアプリ出そうです。

Tooltip

ウェブ開発の時、よく提示で表示するものです、flutterはwebサポートしているなら、これを活用そうですね。

Table

ありまして、あんまに使っていないなぁ。
スマホ開発の中に、テーブルを使って、何かを表示するのは珍しいかもしれないが、iPadやウェブでは活躍しそうです。

GestureDetector

InkWell派とGesture派がどちらでもいいと思います。
自分的には、GestureDetectorのほうがイベント多くて、使う場面は多いと思います。

GestureDetector(
 onTap:(function xxx)
 ....
)

InteractiveViewer

Widgetの拡大縮小や移動の時、このWidgetは完璧かと思います。
(最初はズーム機能付きのWidgetを自作しましたが、これをみて、完敗しましたw
「2048」のミニゲーム作れそうな気がします。

CheckboxListTile

Checkboxがよく使われて、このWidgetは確かにあんまに使われていないですね。
実際の開発では、チェックボックスは基本的にデザイン的に定義されて、デザインに拘りがなく、
設定画面の場合、いい選択肢と思います。

SelectableText

テキストは選択できるようになります。
文書の内容を選択して、検索したり、保存したり、色々操作したい時、すごく便利なWidgetです。
まだ、SelectableText.richでRichTextみたいに使えるので、Text系の自作もうやめます。

ListWheelScrollView

とにかくカッコいいリストビューですね。

BackdropFilter

画像に弄りたいとき、使ってみたいですね。

Autocomplete

Googleみたいに検索するとき、愛用したい。

Offstage

ステージから降ろすか、上がるかみたいな操作できます。
Visibilityと違って、可視化コントロールしているより、OffstageはWidgetの居場所をコントロールしているかと思います。

コメント

いかがでしたでしょうか。
時間は有限であり。

車輪はある、もう作らなくていい

という信念でアプリやサービスを開発しましょうw
自作アプリでも、会社で大きめなプロジェクトでも役に立つと嬉しいです。

今後はレア的なWidgetはありましたら、まだここで追加したいと思います、よろしくお願いします。

Discussion