Flutter
雑多メモ
- プロジェクト名にアンダースコアがあると起動できないかも?
- パフォーマンス計測はリリースモードで行うこと。デバッグモードでは性能が落ちるため。
_
で名前が始まる変数はプライベートになる- Anonymous function を関数に渡す方法
some_func(() {/* ここに処理を記載 */})
- DevTools の使用方法
flutter run -d chrome
で flutter を開始し、ws://
から始まるアプリのアドレスをコピーする- VSCode で
Dart: Open DevTools
を選び、先程のアドレスをコピーしてConnect
ボタンをクリックする
- 文字の埋め込みは以下のようにする。
final myNumber = 123;
final message = "hello$a";
// 日本語圏の場合は区切りが曖昧なので{}を省略しないほうがいいかも
final message = "hello${a}";
--- User Interface ---
ウィジェットの基本
Hello world
ミニマル構成
void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
- root widget は画面全体を占める仕様になっている。詳細は後述の constraints を参照。
StatelessWidget
又はStatefulWidget
を継承したウィジェットを組み合わせて画面を作っていく。- Widget の主たる役割は
build()
メソッドを実装すること。
基本ウィジェット
Text
- テキスト
Column
|Row
- 縦・横方向に要素を並べる
- web でいう flexbox
Stack
- 複数の要素を出現順に z 方向に重ねて表示する
Positioned
widget で位置を調節できる- web でいう absolute 配置
Container
- パディング、マージン、ボーダー、背景色を使いたい時に利用する
BoxDecoration
で装飾する。- web でいう div
Expanded
- スペースを使い切るまで拡張する。または収まるように縮小する。
child
の中で使うflex
により拡張率を設定できる。
widget を引数として別の Widget に与える(React の children に相当)のは便利で強力なテクニックである。
マテリアルコンポーネントの利用
- Material design を使うには以下の設定を予め行っておくこと
# pubspec.yaml
name: my_app
flutter:
uses-material-design: true
MaterialApp
ウィジェットの役割Navigator
をセットアップする- Navigator は routes を管理するために使う。routes は Widget のスタックとして管理されており、個々の Widget(各画面)は文字列で識別される。
- マテリアルデザインのウィジェットを使うときには必ず先祖に必要。
MaterialApp
を最上位に配置し、各画面をScaffold
ウィジェットで作るのがグッドプラクティス。
void main() {
runApp(MaterialApp(
title: 'Flutter Tutorial',
home: TutorialHome(),
));
}
class TutorialHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: ...,
body: ...,
floatingActionButton: ...,
);
}
}