【Flutter版】非エンジニアに送りたい、エンジニアと会話するための用語集

Dart

概要

どうも、@daiki1003です!

「ここのびよんって出るやつがさ…」
「あの三本線のやつ…」

バグ報告などの際に、そんなことを言われて困った経験はありませんか?

逆に、「検索アイコンをAppBarに配置して、タップしたら
検索画面にpushする感じで」なんて言われたら
ドキッとして恋が生まれそうな予感がしませんか?

…そうですね、僕もしないです。

今回はそんな華麗なコミュニケーションが取れるような用語集を用意してみました。
デザイナーやPMなど非エンジニアの方にそっと渡すことでコミュニケーションが
円滑になる事を願っています!
追加要望や修正依頼などもぜひ@daiki1003まで!

※説明の都合上、必ずしもFlutterに限った話ではないところも出てきますが
お許しください笑

🔰基本画面

1. StatusBar

時刻やWifiなどの状況を示す部分はStatusBarと呼びます。

2. AppBar

AppBar class - material library - Dart API
API docs for the AppBar class from the material library, for the Dart programming language.

画面上部、戻るボタンや画面タイトルなどを表示するこの部分は AppBarと呼びます。

3. TabBar

TabBar class - material library - Dart API
API docs for the TabBar class from the material library, for the Dart programming language.

一般的には、画面上部にあるこの部分は TabBarと呼びます。

4. FloatingActionButton

FloatingActionButton class - material library - Dart API
API docs for the FloatingActionButton class from the material library, for the Dart programming language.

スクショ通り、FAB(ファボ)なんて呼ばれたりもします。
Twitterアプリのツイート記入ボタンなんかが一番代表例ですかね。

5. BottomNavigationBar

BottomNavigationBar class - material library - Dart API
API docs for the BottomNavigationBar class from the material library, for the Dart programming language.

画面下部に設置されている、画面を切り替えるのに使われるのがBottomNavigationBarです。
ちなみに、それぞれのボタンのことはBottomNavigationBarItemと呼んでいます。

✈️画面遷移

push/pop

一番良く使われる右から画面がスライドしてくる遷移の方法をpushと言います。
逆に左に戻るようにスライドするのをpopと呼びます。

fullscreenDialog

いわゆるモーダルと言われるやつですね。
スクリーンいっぱいを覆う画面を下から出す繊維の方法です。

Hero

選択した項目の画像などを拡大しつつ遷移するアニメーションです。
にしても、ネーミングすごくないですか?笑
確かにヒーロー登場してるっぽい感じしますもんね!?知らんけど。

すごくアプリっぽくなるしアプリの完成度を高める上でも一役買ってくれるのではないでしょうか。

アクションを元に表示する

Drawer

Drawer class - material library - Dart API
API docs for the Drawer class from the material library, for the Dart programming language.

左上または右上に3本線のメニュー(ハンバーガーメニュー)を伴い、スライドして出てくるメニューをDrawerと呼びます。
Twitterアプリなどが使っていますね。

BottomSheet

BottomSheet class - material library - Dart API
API docs for the BottomSheet class from the material library, for the Dart programming language.

下からユーザーに選んでもらう選択肢を表示するためのメニューです。
GoogleMapなどで良く見かけますね。

AlertDialog

AlertDialog class - material library - Dart API
API docs for the AlertDialog class from the material library, for the Dart programming language.

ユーザーの動きを明示的に止め、なんらかの同意を得るまたはその上でアクションを起こしてもらうために使うダイアログです。

Snackbar

SnackBar class - material library - Dart API
API docs for the SnackBar class from the material library, for the Dart programming language.

ユーザーの動作に対して、なんらかの簡易的なフィードバックを行うために表示するバーです。
何もしなくても自動的に消えます。

MaterialBanner

Snackbarと違い、重要なメッセージの表示時に使います。
AppBarの上に表示され、消すのにはユーザーによる能動的なアクションが必要になります。(自動で消えない)

PageView

PageView class - widgets library - Dart API
API docs for the PageView class from the widgets library, for the Dart programming language.

複数のページを表示するのに使います。
PageViewを使って表示するだけで、スワイプ距離とページ間移動の処理までしてくれます。
(ちょっとだけ移動だとページ変わらないけど…みたいなやつ)

RefreshIndicator

RefreshIndicator class - material library - Dart API
API docs for the RefreshIndicator class from the material library, for the Dart programming language.

下に引っ張ってコンテンツを更新する時に出てくるインディケーターです。
くるくるとかって言ったりすることが多いのかな。
こいつは結構カスタマイズできたりします。

custom_refresh_indicator | Flutter Package
Widget that makes it easy to implement a custom pull to refresh effect.

Dismissible

Dismissible class - widgets library - Dart API
API docs for the Dismissible class from the widgets library, for the Dart programming language.

リスト状の表示をする際に、左右にスワイプしてメニューを表示するアレです。
Gmailなどに使われていますね。

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!

コメント

タイトルとURLをコピーしました