appbrew Tech Blog

appbrewのエンジニアチームの日々です

Flutterで迷いがちなよくあるUIの作り方/いじり方

こんにちは、AppBrewの新規事業部の吉野です。

この記事は「Flutter #1 Advent Calendar 2020」の7日目の記事になります。(23時に参加登録しました) 弊社の新規事業部では去年の冬頃からFlutterを採用したため、そろそろ書き始めて1年経つことになります。

ぼちぼち手に馴染んできたとはいえ、UIの開発をしていると、何度も「あれってどうやって書くんだっけ」みたいなことがあり、 よくプロジェクト内を探ったりして時間を使ってしまうことがあります。

そこで、この一年間を雑に振り返ってよく調べた/使ったUIの実装をまとめていこうと思います。 Flutterに興味がない方のために、とりあえず、うちのかわいい猫の画像を貼っておきます。

f:id:yosshi0774:20201207232304j:plain
かわいい猫

はじめに

この記事で使用したコードがこちらになります

github.com

スマホからだとGithubのコード埋め込みのJSうまく動いていないっぽい気がします👶

よくあるUIの作り方(ちっちゃいもの編)

RippleEffectがある角丸ボタン

これは僕だけかもしれませんが、Borderの書き方が全然覚えられず、Buttonのchildとして角丸のContainerを配置して、ripple effectだけが無駄に残るみたいなことをやりがちなことがありました。

こちらは、Buttonの角丸をちゃんとshapeで指定してあげるとキレイになります。

f:id:yosshi0774:20201207235930g:plain
ダメなButton/良いButton

右側のボタンのサンプルコードになります。

グラデーションのついたアイコン

Flutterは標準でMaterialIconが(roundedなどのthemeも含め)揃っており、サイズや色などを変えて使用することができますがグラデーションのかけ方を知らずに迷いました👶

こんなときはShaderMaskが役にたつようです。

ShaderMask class - widgets library - Dart API

f:id:yosshi0774:20201207234514p:plain
グラデのついたアイコン

右側のグラデーションのついたアイコンのサンプルコードになります。

破線のDivider

Dividerを破線にしたいことが稀によくありました。

こちらはもっとスマートな方法はないものか...と思いつつCustomPaintを使用して実装しました。

CustomPaint class - widgets library - Dart API

サンプルコードがこちらになります。(内容としては泥臭く破線を書いているという感じになります)

色違いのProgressIndicator

よくあるローディング中のくるくるとしてCircularProgressIndicatorがあります。

CircularProgressIndicator class - material library - Dart API

こちらはパッとみColorを引数として受け取れずにどうやって色を変えるんだ...?となったのですが、valueColorに対してAlwaysStoppedAnimationを与えると良いようでした。

f:id:yosshi0774:20201208000809p:plain
色違いのCircularProgressIndicator

いい感じに切り替わるWidget

アプリを開発していると、なめらかにViewを差し替えたいなーと思うことがあるかと思います。

そういったときはAnimatedSwitcherを使うと良さそうです。アニメーションの時間と種類、切り替えのフラグを考えるだけで簡単に使うことができます。

AnimatedSwitcher class - widgets library - Dart API

f:id:yosshi0774:20201208001222g:plain
いい感じに切り替わるDialog

↑の画面のコードがこちらになります(展開すると大きくて邪魔なのでリンクにします)

flutter_advent_2020/switchable_dialog.dart at main · y0ssh1/flutter_advent_2020 · GitHub

よくあるUIの作り方(ちょっと大きいもの編)

キーボードが開けるハーフモーダル

最近巷では猫も杓子もハーフモーダルという感じではありますが(要出典)iOSとかだと結構実装がめんどくさいですよね。

Flutterでは基本的には showModalBottomSheetを使うと いい感じ のものができます

showModalBottomSheet function - material library - Dart API

具体的には (isScrollControlled = trueにすると) スワイプで閉じられたりするのがなかなか嬉しいです。

表示するWidgetをScaffoldでネストしておくと、キーボードの管理や、SnackBarの管理などもできるようになり、非常に強力です。

f:id:yosshi0774:20201208003240g:plain
チャットできそうなハーフモーダル

↑の画面のサンプルコードがこちらになります

flutter_advent_2020/chat_modal.dart at main · y0ssh1/flutter_advent_2020 · GitHub

(勢いでStateNotifierを使ったサンプルを作りましたが特に意味はありません)

よくあるUIの作り方(大きいもの編)

カスタムのimage picker

カスタムのimage_pickerを作りたいと思い試行錯誤した思い出です(自分の他の記事の宣伝)

tech.appbrew.io

まとめ

Flutterは本当に良いフレームワークで書きたいものがすぐにかけ、調べればドキュメントも豊富で(それぞれのWidgetに短尺の動画があるのが素晴らしい...)とても好きです。 ただ、たまに迷うこともあり、この記事がそういったときの助けになれればと思います👶

We are hiring!

(最後にちょっとだけ会社の宣伝を...!) 言語に関わらず、プロダクトグロースに興味がある方、経験のある方お話しましょう!

www.wantedly.com