気が向いたんで
Flutter で
アプリを作ってみてる話
1. Flutter を使う理由
2. 何をつくるのか？
3. 実装について
1. Flutter を使う理由
まず、Flutter とは？
Google が開発した
モバイルアプリケーション
フレームワーク
-
Dart 言語
-
クロスプラットフォーム
-
UI をウィジェットで構成
-
高速なホットリロード
-
VS Code 拡張による dev tools
で、選んだ理由は？
面白そうだから！
2. 何をつくるのか？
目的：リリースしたい
-
簡単に作れるもの
-
自分が欲しいもの
-
最低限の機能
-
通信を伴わない
簡単に作れるもの
-
日常で使うもの
-
管理を必要としないもの
自分が欲しいもの
ちょっと
「管理を必要としないもの」に
フォーカス
管理とは...
よい状態であるように気を配り、必要な手段を（組織的に）使ってとりさばくこと。
-
入力を自動化（無くす、減らす）
-
トリガーを行動に紐付け（忘れさせない）
-
最低限の情報（不要な思考を省く）
で、つくるものは...
飲む気スイッチ（仮）
飲むことを否定せず
飲み過ぎないように促す
そんなアプリ
-
トリガーを飲みはじめだけにする
-
最低限の情報以外を表示しない
-
スイッチを押すと
楽しく飲むぞとなる表示 -
飲みすぎると
ちょっと不安になる表示
やりたいこと
3. 実装について
セットアップについて
基本の実装
// マテリアルデザインのウィジェットを読み込み
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp( // アプリケーション全体を管理
title: '飲む気スイッチ', // タイトル
home: Scaffold( // 画面全体を構成
body: Center( // 中央表示のウィジェット
child: Text('ほげほげ'), // テキストのウィジェット
),
),
),
);
}
-
マテリアルデザイン（Google）
-
クパチーノデザイン（iOS）
ウィジェットのテーマ
-
Container
-
Center
-
Row
-
ListView / ListTile
-
BottomNavigationBar
-
Card
-
Drawer
ウィジェットの種類
-
Text
-
Icon
-
CheckBox / Radio / Switch
-
RaisedButton
-
Animation
ウィジェットの状態
-
StatelessWidget: 状態を持たず静的
-
StatefulWidget: 状態を持ち動的
今回のアプリで考えたこと
デバイスに
データを保持するには
どうする？
-
設定値などは SharedPreferences
-
イテラブルなデータは sqflite
タブごとページを維持するには
どうする？
ルーティングをしないで
CupertinoTabScaffold Class を使う
非同期で取得するデータを
ウィジェットに
反映するためにはどうする？
非同期でウィジェットを生成する
FutureBuilder を使う
アプリのコードは公開中
※開発中のコードはプルリクエストになってます
次回があれば
リリースまでの話をするかも
Flutter の
DX（開発者体験）は
抜群だと思う！
ぜひ Flutter を使ってみて
私にも色々と教えてください
END
気が向いたんで Flutter でアプリを作ってみてる話
By Syuji Higa
