Dart/flutter勉強中【基礎メモ】

#基礎的なことをメモる
この記事は後々、適切なタイトルを各々の要素に割り振って、新しくページを立てようと思います。
一箇所にあると検索でビューンって飛べる良さもあるけど、ごちゃごちゃし過ぎてきました・・・
2019-11-03:まだまだ追記することが多すぎて、まとめるには早いと思いました。
まとめるとしたら私のゲームの基礎が完成してからになると思います。
それまではギュウギュウにひたすら詰め込んでいきます。

###ロジック確認とかなんか試すときはここ
https://dartpad.dev/

###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/#

###世界のお友達が作ってくれたなにかに期待するときは
https://pub.dev/flutter

###開発用のニセrest apiを用意したいなら
https://jsonplaceholder.typicode.com/

###JSON
https://pub.dev/packages/json_serializable
flutter pub run build_runner build

###プロジェクト用のカスタムフォントが使いたければここ（日本語対応怪しいんだよなぁ　
https://fonts.google.com/

ちなみに私が愛するフォントは

• やさしさアンチック
• ほにゃららポップ（動画に合わせて使う可愛い奴ら）
• programatic font(iとjとか0とOとかの違いが分かりやすく表示される神）

#コードが絡みまくる基礎的なことをメモる
###ほにゃらら版はホゲホゲしたい
https://stackoverflow.com/questions/45924474/how-do-you-detect-the-host-platform-from-dart-code

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よく使うリスト
https://pub.dev/

名前＿＿＿＿＿＿＿＿＿＿	内容
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), () {}	ローカルだとラグがないせいで試せないとかのときに使うかもかも