Closed8

最初のflutterアプリを書く

ken1flanken1flan

ステップ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
  :
  :

…ついてた、さすが。

https://github.com/ken1flan/startup_namer
爆誕。

ken1flanken1flan

ステップ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

ken1flanken1flan

ステップ1:スターターFlutterアプリを作成する

書き換えろというコードが、元と大幅に違うやんけ…。
ウィザードで最初に作ったプロジェクトがそれなりに複雑なんだな。
複数のクラスがmain.dartにあるんだもん、そりゃそうか…。

まるっと消して、写経しよう。

dartの構文がわからんけども…文の終わりは;で締めてるように見える。
…が!@overrideにはなんもついてないけど、そんなもん…?
Cのプリプロセスみたいなもんかのう…。

あああ…Dartの文法が気になる…!

https://dart.dev/guides
公式ドキュメントにも、構文にフォーカスしたドキュメントがない…。

簡単だから、使って覚えろっていうことかなあ。


パラメータをたくさん使うからかな、カッコの終わりにメソッド名が表示される…!

void main() => runApp(MyApp());

一行メソッド、便利だね。Rubyにも入ったヤツだ。

…というわけで、ひととおり終わり。

ken1flanken1flan

ステップ2:外部パッケージを使用する

https://pub.dev/

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はまた別にあると。
それはそうと、検索して公式サイトに行き着かないの、結構ツライかも…。

うまくいった!

ken1flanken1flan

ステップ3:ステートフルウィジェットを追加する

ステートフルウィジェットとはなんぞ…?
状態の変わるウィジェットのこと。
ステートレスは状態が変わらないウィジェットのこと。
ウィジェットは…なんらかのパーツかな。

stfulと打ち始めると自動補完にテンプレートジェネレータが出てくる…!
それを選択すると、テンプレートコードが挿入され、直後にウィジェット名を記入する複数のカーソルが表示された状態になってる…。

_で始める変数などは、プライベートなものらしい。

ところで…RandomWordsという名前にせよと書いてあるんだけど、複数形のクラス名っていうのもアリなのか。

とにかく、ランダム名前生成を別のクラスに追い出せた。

ken1flanken1flan

ステップ4:無限にスクロールするListViewを作成する

…言われたとおりに書いたらできてしまった。
よく読まねば。

ListView.builderがスクロールしたときによろしく中身を作る処理をしてくれてるみたい。

このスクラップは2021/03/28にクローズされました