Flutter ことはじめ
anonymous3年前に一度 flutter アプリを作ったことがある。
VS code 開発できるんだ、前は Android Studio / XCode 使うのかと思ってた
resource links
anonymousこれに沿ってやっていってる
recommended workspace setting を追加。
default の formatter を選ぶ必要があると言われ、default ということなので prettier を選択しておいた。
F5で初めての起動をしようとしたら
You don't have an extension for debugging 'JSON with Comments'. Should we find a 'JSON with Comments' extension in the Marketplace?
lanuch.json に類するファイルが原因っぽいが、どれだろう
JSON with Comments で検索しても出てこない
anonymousdefault の formatter を選ぶ必要があると言われ、default ということなので prettier を選択しておいた。
これが原因だろうなと思ったので
vscode の workspace settings で default formatter で検索して、 None のところを JSON language feature にした。
↑ (追記) 多分、main.dart にカーソルをあてた状態でF5を押さなくてはいけなかっただけ。。。
F5 で simulator が上がった。
anonymousCodelab に進む。
よくできてる。
main.dart は最初はこれで良いのだろうか
関係ないが、zenn と flutter のfavicon が似てるので、ブラウザで間違える
anonymousFlutter の有名なステートフル ホットリロード
ステートフル ホットリロードは変更があった部分だけを更新する。flutter 特有なのかな？ React だと確かに全体をreload するかも？
関数などは読んだ後に セミコロンが必要。セミコロンを打つと auto format してくれる。
クオーテーションがシングルかダブルかを統一する linter はあとで調べよう
Flutter には、アプリの状態を管理する強力な方法が多数あります。特に説明しやすいのが、このアプリで採用している ChangeNotifier を使用する方法です。
複数の手法を理解しておくことがまずは基礎になりそう
anonymouseditor のRefactor は強力だ。3年前よりもしっかり実感できる。
Flutter では、可能な限り、継承ではなく合成を使用します。ここでは、パディングは Text の属性ではなく、ウィジェットにしています。
こうすることで、ウィジェットは 1 つの役割に集中することができ、デベロッパーは UI の合成方法に関して完全な自由を手に入れます。たとえば、Padding ウィジェットは、テキスト、画像、ボタン、独自のカスタム ウィジェット、アプリ全体のパディングに使用できます。このウィジェットで何を包んでも構いません。
java と react を混ぜたような感覚（歴史を考えればそう感じるのも一定当たり前ではあるけど）
Dart というプログラミング言語は null 安全なので、null になる可能性のあるオブジェクトのメソッドは呼び出せません。この場合、! 演算子（感嘆符演算子）を使い、承知のうえで行っているということを Dart に対して保証できます
null 安全 ありがた
anonymousskeleton app から list app を選んで開発してみる
すでにリストビューと詳細画面が出来上がっている。
anonymousweb のための設定がtemplate として与えられている。
platform ごとの違いはある程度自分たちで扱う必要がありそう
// Define a function to handle named routes in order to support
// Flutter web url navigation and deep linking.
onGenerateRoute: (RouteSettings routeSettings) {
return MaterialPageRoute<void>(
settings: routeSettings,
builder: (BuildContext context) {
switch (routeSettings.name) {
case SettingsView.routeName:
return SettingsView(controller: settingsController);
case SampleItemDetailsView.routeName:
return const SampleItemDetailsView();
case SampleItemListView.routeName:
default:
return const SampleItemListView();
}
},
);
skeleton を見ているだけでも、結構な情報量がある。
http アクセスの方法を調べる