初心者用：Fluuterのメモ帳２

私が得たFlutterの知見を書いていくよ。宜しくね⭐️

static と const の違い

定数値は変更できません。静的変数は、インスタンスやオブジェクトではなく、関数やクラスに存在します。

これら2つの概念は相互に排他的なものではなく、併用することができます。

 Firebaseをyamlに設定後、iOSを実行する前に、cocoapodをupdate しなければErrorが大量に出るよ。

1.  $ pod repo update を実行する。

2. update 完了後、$ sudo gem install cocoapods  を実行する。

　この場合、cocoapodsをインストールしていない場合に限る。

3. $ pod setup を実行する。

Flutter Stream 

単数か複数かでの型の違いを一覧化するよ。

 Row と Column の考え方

例えば、値段とタイトル、日付を以下の様に並べてそして縦列に並べたいときは、次の様に考える。

Container() のMargin, Border, Padding の考え方

Theme を使う際のprimarySwatchとprimaryColorの違い

primarySwatchは、MaterialColorのため、様々な色のシェードを持っています。

primaryColorは、色合いの一つです。primaryColor は primarySwatch[500]と同じです。

Containerを使ってdecorationする方法とCircleAvatorを使って丸をつくる方法

ContainerでBoxDecorationを使った場合、

leading: Container(
  height: 60,
  width: 60,
  decoration: BoxDecoration(
    color: Theme.of(context).primaryColor,
    shape: BoxShape.circle,
  ),
  child: Padding(
    padding: EdgeInsets.all(6),
    child: FittedBox(
        child: Text('\$${transactions[index].amount}')),
  ),
),

BoxDecorationで以下の円の様な変化をつける事ができます。

CircleAvatarの場合

leading: CircleAvatar(
  radius: 30,
  child: Padding(
    padding: EdgeInsets.all(6),
    child: FittedBox(
        child: Text('\$${transactions[index].amount}')),
  ),
),

二通りのやり方があります。
 

 動的に画面サイズを計算する方法

小さな画面サイズや大きな画面サイズのスマホに対応させるために、その画面サイズを取得し、割合でその画面比率を決定させる方法です。

以下がそのやり方です。

Widget build(BuildContext context) {
  return Container(
    height: MediaQuery.of(context).size.height * 0.6,
  );
}

MediaQuery.of(context).size.height で画面全体のサイズを取得します。

* 0.6 は　画面の60%という意味です。

すなわち、上記のプログラムの意味は、全体の画面の高さサイズから60%の高さの画面サイズを取得する。という意味になります。

landscape mode をロックする方法

main.dartに以下のコードを記載して下さい。

void main() {
  // ここから
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
　// ここまで
  runApp(MyApp());
}

WidgetsFlutterBinding.ensureInitialized();

SystemChrome.setPreferredOrientationsでlamdscapeを固定させる前に上記のコードを記載して下さい。

MyAppを起動する前にバイナリーへの接続が必要な時に必要な設定となっています。
以下ソースとなっています。

groups.google.com

その後、固定させる設定を以下の様に記載します。

SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
]);

随時更新します！