最初のflutterアプリを書く
これをやっていくぞー。
作るアプリケーションは…
企業名として適当な名前を提案してくれ、好きなものがあったときにそれを保存してくれるもの、だって。
ステップ0.1:githubで管理する
せっかく作るので、githubに置きたいから、.gitignoreがほしいぞ。
$ ls -al
total 56
drwxr-xr-x 17 ken1flan staff 544 3 17 09:06 ./
drwxr-xr-x 92 ken1flan staff 2944 3 18 08:23 ../
drwxr-xr-x 6 ken1flan staff 192 3 17 09:06 .dart_tool/
-rw-r--r-- 1 ken1flan staff 732 3 16 08:32 .gitignore
:
:
…ついてた、さすが。
爆誕。
ステップ0.2:エミュレータ比較
なんでブラウザ版のエミュレータがついているのかと思ったら…たぶん、軽量なんだろうな…。
…1回目はビルドがあるので時間がかかる。
2回目はrails sみたいなもんか。ぼちぼち。
iOS版もなんだかんだと同じようなもんかも。
iOSエミュレータをcloseしたときに、あんまりメモリ使用量が減らなかったので、iOS版がよいかも…?
android版は…いきなり躓いた…。
No suitable Android AVD system image are available...
android studioからADV managerでできた。
…しかし、でかいな、1.1GB…
自分が使おうとするスマホがandroidだから…androidにするのが適切な気がしてきた…。でもデカイなー、ヤダなー…。…いや、新しいマシンがほしい、かw
ステップ1:スターターFlutterアプリを作成する
書き換えろというコードが、元と大幅に違うやんけ…。
ウィザードで最初に作ったプロジェクトがそれなりに複雑なんだな。
複数のクラスがmain.dartにあるんだもん、そりゃそうか…。
まるっと消して、写経しよう。
dartの構文がわからんけども…文の終わりは;
で締めてるように見える。
…が!@override
にはなんもついてないけど、そんなもん…?
Cのプリプロセスみたいなもんかのう…。
あああ…Dartの文法が気になる…!
公式ドキュメントにも、構文にフォーカスしたドキュメントがない…。
簡単だから、使って覚えろっていうことかなあ。
パラメータをたくさん使うからかな、カッコの終わりにメソッド名が表示される…!
void main() => runApp(MyApp());
一行メソッド、便利だね。Rubyにも入ったヤツだ。
…というわけで、ひととおり終わり。
ステップ2:外部パッケージを使用する
pubspec.yaml
というGemfile
のようなパッケージ管理のファイルがあった。
これも、dependa_botがよろしくしてくれるかな…?
githubにpushしておけば、そのうちわかるでしょ。
flutter pub get
?
dartじゃなくて、flutterのパッケージ管理なのかな?
lockfileあり。
lib/main.dartにライブラリをインポートするためにimport 'package:english_words/english_words.dart';
と書くのか、長いな…って思ってたら、補完が利いた。
final wordPair = WordPair.random();
のfinalってなんや?
と思ったら、一度しか初期化しない変数だそうで、constはまた別にあると。
それはそうと、検索して公式サイトに行き着かないの、結構ツライかも…。
うまくいった!
ステップ3:ステートフルウィジェットを追加する
ステートフルウィジェットとはなんぞ…?
状態の変わるウィジェットのこと。
ステートレスは状態が変わらないウィジェットのこと。
ウィジェットは…なんらかのパーツかな。
stful
と打ち始めると自動補完にテンプレートジェネレータが出てくる…!
それを選択すると、テンプレートコードが挿入され、直後にウィジェット名を記入する複数のカーソルが表示された状態になってる…。
_
で始める変数などは、プライベートなものらしい。
ところで…RandomWords
という名前にせよと書いてあるんだけど、複数形のクラス名っていうのもアリなのか。
とにかく、ランダム名前生成を別のクラスに追い出せた。
ステップ4:無限にスクロールするListViewを作成する
…言われたとおりに書いたらできてしまった。
よく読まねば。
ListView.builder
がスクロールしたときによろしく中身を作る処理をしてくれてるみたい。
終わった!!
このあとは…気持ち的にはアプリの拡張に進みたいけど、「もっと詳しく知る」に進みます。