概要
どうも、@daiki1003です！「ここのびよんって出るやつがさ…」
「あの三本線のやつ…」
バグ報告などの際に、そんなことを言われて困った経験はありませんか？
逆に、「検索アイコンをAppBarに配置して、タップしたら
検索画面にpushする感じで」なんて言われたら
ドキッとして恋が生まれそうな予感がしませんか？
…そうですね、僕もしないです。
今回はそんな華麗なコミュニケーションが取れるような用語集を用意してみました。
デザイナーやPMなど非エンジニアの方にそっと渡すことでコミュニケーションが
円滑になる事を願っています！
追加要望や修正依頼などもぜひ@daiki1003まで！
※説明の都合上、必ずしもFlutterに限った話ではないところも出てきますが
お許しください笑
🔰基本画面
1. StatusBar
時刻やWifiなどの状況を示す部分はStatusBarと呼びます。
2. AppBar
画面上部、戻るボタンや画面タイトルなどを表示するこの部分は AppBarと呼びます。
3. TabBar
一般的には、画面上部にあるこの部分は TabBarと呼びます。
4. FloatingActionButton
スクショ通り、FAB(ファボ)なんて呼ばれたりもします。
Twitterアプリのツイート記入ボタンなんかが一番代表例ですかね。
5. BottomNavigationBar
画面下部に設置されている、画面を切り替えるのに使われるのがBottomNavigationBarです。
ちなみに、それぞれのボタンのことはBottomNavigationBarItemと呼んでいます。
✈️画面遷移
push/pop
一番良く使われる右から画面がスライドしてくる遷移の方法をpushと言います。
逆に左に戻るようにスライドするのをpopと呼びます。
fullscreenDialog
いわゆるモーダルと言われるやつですね。
スクリーンいっぱいを覆う画面を下から出す繊維の方法です。
Hero
選択した項目の画像などを拡大しつつ遷移するアニメーションです。
にしても、ネーミングすごくないですか？笑
確かにヒーロー登場してるっぽい感じしますもんね！？知らんけど。
すごくアプリっぽくなるしアプリの完成度を高める上でも一役買ってくれるのではないでしょうか。
アクションを元に表示する
Drawer
左上または右上に３本線のメニュー(ハンバーガーメニュー)を伴い、スライドして出てくるメニューをDrawerと呼びます。
Twitterアプリなどが使っていますね。
BottomSheet
下からユーザーに選んでもらう選択肢を表示するためのメニューです。
GoogleMapなどで良く見かけますね。
AlertDialog
ユーザーの動きを明示的に止め、なんらかの同意を得るまたはその上でアクションを起こしてもらうために使うダイアログです。
Snackbar
ユーザーの動作に対して、なんらかの簡易的なフィードバックを行うために表示するバーです。
何もしなくても自動的に消えます。
MaterialBanner
Snackbarと違い、重要なメッセージの表示時に使います。AppBarの上に表示され、消すのにはユーザーによる能動的なアクションが必要になります。(自動で消えない)
PageView
複数のページを表示するのに使います。PageViewを使って表示するだけで、スワイプ距離とページ間移動の処理までしてくれます。
(ちょっとだけ移動だとページ変わらないけど…みたいなやつ)
RefreshIndicator
下に引っ張ってコンテンツを更新する時に出てくるインディケーターです。
くるくるとかって言ったりすることが多いのかな。
こいつは結構カスタマイズできたりします。
Dismissible
リスト状の表示をする際に、左右にスワイプしてメニューを表示するアレです。
Gmailなどに使われていますね。
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
コメント