基礎的なことをメモる
この記事は後々、適切なタイトルを各々の要素に割り振って、新しくページを立てようと思います。
一箇所にあると検索でビューンって飛べる良さもあるけど、ごちゃごちゃし過ぎてきました・・・
2019-11-03:まだまだ追記することが多すぎて、まとめるには早いと思いました。
まとめるとしたら私のゲームの基礎が完成してからになると思います。
それまではギュウギュウにひたすら詰め込んでいきます。
ロジック確認とかなんか試すときはここ
apiドキュメンテーション
https://dart.dev/guides
https://api.flutter.dev/index.html
api docの中でもちょくちょく見直す
https://api.flutter.dev/flutter/material/Icons-class.html
こっちのほうが良かったかも
http://fluttericon.com/
コンポーネントのざっくりとした一覧と使用例 画面を作るのに悩んだら一度チラミする
https://flutter.dev/docs/development/ui/layout
Cook Book (料理本
やったことないなーってことを始めるときにここを見てコンテンツがあったらラッキー
https://flutter.dev/docs/cookbook
MaterialAppについて勉強するとき
https://flutter.dev/docs/development/ui/widgets/material
https://material.io/design/color/#
世界のお友達が作ってくれたなにかに期待するときは
開発用のニセrest apiを用意したいなら
JSON
https://pub.dev/packages/json_serializable
flutter pub run build_runner build
プロジェクト用のカスタムフォントが使いたければここ（日本語対応怪しいんだよなぁ
ちなみに私が愛するフォントは
- やさしさアンチック
- ほにゃららポップ（動画に合わせて使う可愛い奴ら）
- programatic font(iとjとか0とOとかの違いが分かりやすく表示される神）
コードが絡みまくる基礎的なことをメモる
ほにゃらら版はホゲホゲしたい
import 'dart:io'
if (Platform.isAndroid) {
// Android-specific code
} else if (Platform.isIOS) {
// iOS-specific code
}
Platform.isFuchsia
Platform.isLinux
Platform.isMacOS
Platform.isWindows
kIsWeb
多分横で遊んでほしい事になりそう
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
やっぱり縦がよかったら
// Set portrait orientation
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitDown,
DeviceOrientation.portraitUp,
]);
widget追加するときはとりあえずstとタイプして、コード補完でstatefulとstatelessのどっちか選ぶのが楽ちんだね、
yamlさんとかその他のassetとかlib関係の基礎的なこと
プロジェクト名を変えたいとき
yamlさんの名前も変更しよう。各自前パッケージに付いても直してね！IDEによっては勝手に直してくれるものもあるのかな？
visual studio codeだと、手動だったので面倒でした。もしかしたらextentionでイイのがあるのかもね。
直した後もビルドエラーが出た状態が続いたので、一度直し終わったらvsual studio code 立ち上げ直したほうがいいかも。
flutter pub get を忘れるな
メメント・モリなみに忘れてはならないが、私が作った環境だと自動で走るんご・・・存在を忘れちゃいそう
yamlさんの記述はインデントに意味があるので注意してね
Pythonみたいなもん
自分の好きなfontを使いたいとき
pubspec.yamlさんのなかでfontを検索すると このあたりに書いたらええよって例があるので、それを参考にちょろっと書いたら動く
DLしたフォントファイルをプロジェクトの中においておくのも忘れないようにね！ fontsとかってフォルダ作るといいね
なんでか知らないけど、iosフォルダとかandroidフォルダを消してしまうとfont動かなくなるっぽい。他にも不具合ありそうなので
webしかやらないから不要フォルダ消しちゃお！みたいなのはやめたほうがいいかもしれないね(そのうち治るかもね
Flutterの仕組み自体に関する基礎的なこと
web開発とモバイル開発の共通化としてflutter使うときの注意点
- 電池・時間が表示されている部分の色がwebだと見れないことがある。（backgroundColorになると思うのだけれど、埋まっちゃうことが多い
Hot Reload
- 変更されたwidgetのbuildについてのみビルドしなおしている。つまり細かい単位でwidgetが区切られていれば、その中だけをビルドしてくれるようになるから早くなるらしい
- リビルドに関係したwidgetだけ表示し直される（つまり、他のwidget treeから値を参照していたみたいな場合、値が変わっていても表示が変わらないとかはありそう）
- assetの変更とかpubspec.yamlさん書き換えたとかしたときはHot Reloadコケるのでリスタートしよう
- 変更が適用されないパターンは3つ「表示だけ変わってない（リロードしよう」「Hot Reloadの対応範囲外(リスタートしよう」「バグ(頑張ってなおそ」
- 変更が適用されないパターンの４つ目がありました。ビルドキャッシュが悪さするパターンです。この場合はflutter cleanのコマンドを利用して、build cacheをクリアしてください。
いちいち出てくる電球マーク
こいつ、使えるぞ。rowとかcolumn内の並び替え、パディングつけたり、コンテナをボコって持ってきたり、コピペしてウロウロするあの煩わしさがなくなるぞ！
Flutter Outline 便利だよ
おおよその位置にﾋﾞｭｰﾝって飛びやすいね。
その上、widgetを右クリックすると並び替えたり中央ぞろえしたり、電球マークのところとだいたい同じような事できるみたい。
我がflutter忍術を学んだときのMaster Ninjaはここ
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg
英語に訛りがあるけど（多分イギリスのあたりの英語っぽい）、日本人は聞き取りやすい訛りかただから大丈夫のはず
私が技術選定するときに参考にしたのはここ
https://www.youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w
左側に写ってるイケメンおじさんの英語が聞き取りやすくて、英語の勉強にもなるよ。
ang vue react全部好きになれなさそうって思ったのはここのおかげ。
調べたらflutterの話ししてくれてた。説明わかりやすいので、英語わかるならチャンネル登録をおすすめします。
https://www.youtube.com/watch?v=PKRXbLnfXXk
Windows デスクトップ用のビルドができるって聞いたんだけど？
windowsのデスクトップはまだあんまりサポートされておりません、作成中みたいです。
動かす方法はありますけどめんどくさいです。
https://github.com/flutter/flutter/issues/33726
訳：flutter createで作ったプロジェクトではビルド通らないよ。でもやりたければめっちゃめんどくさいけどコレ見てね。https://github.com/flutter/flutter/wiki/Desktop-shells#using-the-shells
今後の動きとか
https://github.com/flutter/flutter/issues/39067
訳：IDE部分インストールしなくても動かすようにするのは割とめんどくさい作業があるんだよ。でも、最終的にはできるようにする予定。
それでもwindows desktopやりたい人へのメモ(2019-10-30 to be removed sometime soon
- すでに動かしてみてるニキがいた。https://qiita.com/kikuchi_kentaro/items/b12754293ae35e7f1f58
めっちゃめんどくさそうってかflutter createが対応してないので、設定とか色々されてる状態のプロジェクトを持ってきて上書きで使ってくださいみたいなことになってるらしい。- 色んな所のいろんな設定をｺﾞﾆｮｺﾞﾆｮｺﾞﾆｮするとそれで動くらしい。
- VisualStudioCommunity入れれば正しく認識するが、Build Tools for Visual Studio 2019だとパス通しても何してもなんか認識しない。2017だと認識してたっぽいよくわからない。
- 最新のSDKでは動きません。詳しくはflutter doctorして、Windows 10 SDk(XXXXXX)の数字を穴が空くほどしっかり見て同じ奴入れてください。
PubDevよく使うリスト
| 名前＿＿＿＿＿＿＿＿＿＿ | 内容 |
|---|---|
| universal_html | クロスプラットフォームらしい |
| intl | いい感じの日付のフォーマトットとかしてくれる |
| flutter_spinkit | ローディング中のぐるぐるとかで使える |
その他雑記
| クラス名とか＿＿＿＿＿＿＿＿＿＿ | 内容 |
|---|---|
| flutter create . | プロジェクト作るとき |
| flutter run -d chrome | クロームで実行 |
| List | <dynamic>ってことになるみたい |
| List<t> | 基本はこっち使お |
| (String a) + (int b) | ダメェ！toStringしなさい |
| => | thisを内部ロジックに使うときは注意な（むしろ{}のときにthis気をつけろってことになるかもしれんがｗ |
| _x | _はプライベートな |
| dynamicは糞 | 基本的には使ってはあかん dynamic a = "kuso"; dynamic b = 1; dynamic c = a + b; ぶっ壊れます toString()が自動で動くとかはありません |
| class extends | コンストラクタ書かないとダメ。 勝手にスーパークラスのを引き継いでくれたりしない。割と古いスタイルやな |
| Image.network(src) | ネット上のイメージ出すときはこれ。コレでも動くNetworkImage('url') |
| Image.asset(src) | プロジェクト上のアセットだすときはこれ |
| Icon(Icon.hoge,color:Colors.hoge,size:50.0 | アイコン群やばいな、個人プログラマーにとっては神だな |
| FlatButton() | 影なしぼたん |
| RaisedButton() | 浮いてるボタン |
| FlatButton.icon() RaisedButton.icon() |
アイコンが頭についてるボタンつくれる |
| IconButton | おせるアイコン |
| Containerちゃんの動き | 空っぽのときは最大に広がる。中身入れたら中身のサイズに縮む。 |
| padding:EdgeInsets. | パディングは中に向かって、オフセットは外に向かって |
| Padding( | パディングだけしたいとき用 コンテナは重いから節約しようね。 marginは持てないのでその時はコンテナになっちゃうね |
| Row() | Hboxや！mainAxisAlignmentでH方向への並べ方を色々できる crossAxisAlignmentでv方向にいたずらできるね！ |
| Column() | Vboxきたー！mainとcrossがRow()さんとは逆になるので気をつけよう。 |
| Expanded() | 中の要素の大きさ広げたかったら. wrap with widgetを使ってからこいつを指定するといい |
| Expanded(flex:3, | row columnの中サイズを比率で割りたいとき |
| 電球からの色々動作 | 便利だから一通り学んだほうが良さそう。動画化するべきでは？ The Net Ninja #20とか参考になる |
| Future.delayed(Duration(seconds: 1), () {} | ローカルだとラグがないせいで試せないとかのときに使うかもかも |