技術的備忘録

基本自分用備忘録

Flutter 汎用ダイアログを表示する

Flutter Dart

Flutterでのダイアログ表示

Flutterでのダイアログ表示には、showDialogメソッドを使用します。

api.flutter.dev

複数個所で呼び出す必要があったため、別ファイルにメソッドとして切り出して使用しています。

ダイアログ表示
ダイアログ表示

Future<bool> showCommonDialog(BuildContext context, String title,
    String message, String yesText, String noText) async {
  return await showDialog(
      context: context,
      builder: (BuildContext context) {
        return WillPopScope(
            onWillPop: () async => false,
            child: AlertDialog(
              title: Text('$title'),
              content: Text('$message'),
              actions: <Widget>[
                TextButton(
                  onPressed: () {
                    Navigator.pop(context, false);
                  },
                  child: Text(noText),
                ),
                TextButton(
                  onPressed: () {
                    Navigator.pop(context, true);
                  },
                  child: Text(yesText),
                ),
              ],
            ));
      });
}
  • 引数は
    • BuildContext
    • タイトル用文字列
    • 表示するメッセージ
    • 「はい」部分に表示する文字列
    • 「いいえ」部分に表示する文字列
  • 返り値は「はい」「いいえ」のどちらかをタップしたかを true/false で返却します
  • ユーザーがクリックするまで、呼び出し元の処理を待機させてます
  • WillPopScopeでfalseを指定しているのは、画像のグレー部分をタップ、または戻るボタン等「はい」「いいえ」のタップ以外でダイアログ表示を終了させないためです

呼び出し元

onPressed: () async {
  var result = await showCommonDialog(
        context, '保存しますか?', '変更は保存されていません。', '保存する', '保存しない');
  if (result) {
    // 「はい」選択時の処理
  } else {
    // 「いいえ」選択時の処理
  }
},

Flutter Widget ListView

Flutter Dart

ListView

  • スクロール可能なウィジェットのリスト
  • ListView.builderを使用して作成することで、動的なリストが作成できる
  • ListView.separatedを使用して作成することで、リストの要素の間に区切りを設定することができる api.flutter.dev

普通のListView

  • ListViewに表示される可能性のあるすべての子要素に対して処理を行うため、子要素の数が少ないリストに適している

  • 子要素の数が変更される場合があるなら、ListView.builderを使ったほうがいい

  • 公式サンプルコード

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

ListView.builder

  • 表示する子要素を事前に用意しておく必要がないので、多くの子要素を持つリストや、動的なリストの表示に使用する
  • itemBuilderには、非Nullのウィジェットを設定し、ウィジェットのインスタンスを返すようにする。
  • 子要素の並び替えはサポートしていないので、後から子要素の順番を変更する場合は、ListViewやListView.customを使用したほうがいいらしい

  • itemBuilderの指定は必須

  • 公式サンプルコード

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  }
);

Dart まとめ2

Dart Flutter

関数

  • 返り値の型を先頭に記述する
  • 引数のリストを { } で囲むことで、名前付き引数を定義できる
    • 名前付き引数は呼び出し時に指定されてなくてもいい（オプショナル）
    • 名前付き引数の名前指定は必須
    • 普通の引数は名前指定できない
    • 名前付き引数のみデフォルト値が設定できる
void fuinction(int a, { int b, int c }, int d = 4) {
}

function(1, b: 2, c: 3);

高階関数

第一級関数をサポートしているプログラミング言語において少なくとも以下のうち1つを満たす関数である。 ・関数（手続き）を引数に取る ・関数を返す

ja.wikipedia.org

  • ※要確認

www.cresc.co.jp

宣言

  • final

    • 再代入不可能な変数
    • 参照先は変更できる

  • const

    • 再代入も参照先の変更もできない
    • FlutterではconstのWidgetは再描画されない

getter/setter

int _a = 0;

int get a => _a;

int set a(num) {
  _a = num;
}

class

class Sample {
  // フィールドの初期化短縮形
  const Sample (
    this.a,
    this.b
  )

  final int a;
  final int b;
}

final sample = Sample(a: 1, b: 2);

constructor

  • フィールドの初期化は短縮形を使用できる
  • finalなフィールドを初期化するときは Initializer を使う
  • フィールドがすべてfinalなら const をコンストラクタに使用できる

factory

Mixin

Null

  • ?.
    • 対象がNullではない場合メソッド呼び出し
  • ??
    • ?? の左側がNullじゃないならそっち、 ?? の左側がNullなら右側を返す
    • 三項演算子が簡単に記述できる感じ
  • ??=
    • 左辺がNullのときだけ右辺の値を代入する

カスケード演算子

  • ..
  • 同じオブジェクトに対して連続で複数の処理をする

Stream

  • 非同期に更新される複数の値を監視する

www.cresc.co.jp

async/await

  • async関数の返り値は通常の返り値をFutureでラップしたもの
await for
  • Streamの取り出し

Dart 基本構文まとめ

Dart Flutter

基本データ型

int a = 77;
double b = 77.7;
String c = 'abcdefg';
bool d = true;
// 型推論
var e = 77; // number

// 配列
List a = [ 1, 2, 3, 4 ];
// 値が重複できない配列
Set b = { 1, 2, 3, 4 };
// key value
Map c = { 'a': 1, 'b': 2, 'c': 3 };

print(a);
// [1, 2, 3, 4]
print(b);
// {1, 2, 3, 4}
print(b.toList());
// [1, 2, 3, 4]
print(c);
// {a: 1, b: 2, c: 3}
print(c['b']);
// 2

定数

  • final、constを使う
  • 違いはよく分かってない

qiita.com

jpsepower.sakura.ne.jp

final a = 77;
// a = 777; はエラー
const b = 77;
// b = 777; はエラー

// 定数の配列
List c = const [1, 2, 3];
// ↓はエラー
List d = final [1, 2, 3];

制御

var list = [ 1, 2, 3, 4 ];
list.forEach((v) { print(v); });
// 1 2 3 4

var set = { 1, 2, 3, 4 };
set.forEach((v) { print(v); });
// 1 2 3 4

var map = { 'a': 1, 'b': 2, 'c': 3 };
map.forEach((key, value) { print('$key $value'); });
// a 1  b 2  c 3


for (var i = 0; i < 4; i++) {
  print(i);
}
// 0 1 2 3


for (var i in list) {
  print(i);
}
// 1 2 3 4

for ( var v in map.values) {
  print(v);
}
// 1 2 3

var n = 0;
while (true) {
  if (n == 3) {
    break;
  } else {
    print(n);
    n++;
  }
}
// 0 1 2

var m = 0;
do {
  m++;
  print(m);
} while (m <= 3);
// 1 2 3 4

Flutter VSCode 環境構築 mac編››

FlutterSDKをインストール

1.公式のmacOSを選択 flutter.dev 2.公式の手順通りにすすめる

$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_2.2.2-stable.zip

3.bash_profileを編集

$ sudo vi ~/.bash_profile

4.以下の列を追加

export PATH=${HOME}/development/flutter/bin:$PATH

5.ターミナルを終了し、起動し直す

6.flutterコマンドのパスが通っていることを確認

$ which flutter
(以下が表示される)
/Users/{name}/development/flutter/bin/flutter

(update確認)
$ flutter upgrade

AndroidStudioインストール

1.公式からダウンロード developer.android.com 2.インストール

3.AndroidStudio起動

4.AndroidSDKを適当にダウンロード f:id:syoch:20210618220033p:plain

5.flutter doctorコマンドでソフトウェア確認 - Android Licenseに同意

$ flutter doctor --android-licenses
  • 自分の環境では、古いSDKが残っていたので、ライセンス同意コマンドの実行に失敗した

  • 古いSDKとかBuildToolsを一度アンインストールして、再インストール後、ライセンス同意コマンドの実行に成功

  • 不足しているソフトウェアを確認

$ flutter doctor

f:id:syoch:20210618220042p:plain

XCodeインストール

flutter.dev 1.AppStoreからXcodeをインストール

2.ターミナルで以下のコマンドを実行

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

3.以下のコマンドでライセンスに同意

$ sudo xcodebuild -license
~~~スペース何回か~~~
$ agree

cocoapodsのインストール

guides.cocoapods.org 1.ターミナルで以下のコマンドを実行

$ sudo gem install cocoapods

2.flutter doctorで確認 f:id:syoch:20210618220048p:plain

VSCode

  • 拡張機能の「Flutter」と「Dart」をインストール

    実行確認

  • ターミナルで以下のコマンドを実行していく
  • flutter create my_app
  • cd my_app
  • flutter run
  • 以上の手順でブラウザでの動作が確認できる

AWS VPC

AWS VPC

VPC

  • Virtual Private Cloud
  • AWSクラウドのネットワークからユーザー専用の領域を切り出してくれる仮想ネットワーク
    • 論理的に分離されたセクションを作り、ユーザーが定義した仮想ネットワークを構築するサービス
  • VPCのネットワーク内にAWSリソースを配置していく

docs.aws.amazon.com

  • 任意のIPアドレス範囲を選択して仮想ネットワークを構築
  • サブネットの作成、ルートテーブルやネットワークゲートウェイの設定
  • 必要に応じてクラウド内外のネットワーク同士を接続することも可能
  • 接続オプションが複数ある

AWS側ですでに設定されていて、使用できないアドレスもある（.0、.1、.2、.3、.255）

VPCを作成するとサブネットが自動で作成されるため、「1AZ内の1VPC内に1サブネット」という状態が最小単位

AWSアカウント作成時

  • AWSアカウントを作成すると、自動的に各リージョンに1つずつデフォルトVPCとデフォルトサブネットが生成される
    • サイズ/16のVPC
    • 各AZにサイズ/20のデフォルトサブネット
    • インターネットゲートウェイが自動的に作成され、デフォルトVPCに接続される
    • デフォルトのセキュリティグループが作成され、デフォルトVPCに関連付けられる
    • デフォルトのネットワークアクセスコントロールリスト（ACL）が作成され、デフォルトVPCに関連付けられる
    • デフォルトVPCを備えたAWSアカウントにはデフォルトDHCPオプションセットが関連付けられる
    • パブリックとプライベートのDNSホスト名が付与される

VPCウィザードを利用することでVPCを簡単に構成できる

VPCウィザードを利用しない作成手順

  1. VPC作成（CIDRの設定）
  2. サブネットを作成
  3. インターネット経路を設定（インターネットゲートウェイ）
  4. VPCへのトラフィック許可の設定（ネットワークACL）

サブネット

  • VPC内に複数設置できる
  • 1つのAZを指定して配置する（AZをまたがって配置することはできない）
  • パブリックとプライベートが存在する
  • 1つのVPC内の作成上限は200個
  • VPCのCIDRの範囲内でCIDRを指定する
  • CIDRが付与されネットワークレンジが決まる

パブリックサブネット

プライベートサブネット

  • インターネットゲートウェイへのルートがない
  • インターネットに接続するためにはパブリックサブネットに、NATゲートウェイを作成する

VPCの外部接続

パブリックサブネットからVPCの外側にあるリソースと通信するには、 パブリックのAWSネットワークか、エンドポイントを利用する

インターネット経路の設定

  • ルートテーブルとCIDRアドレスでルーティングを設定する
    • ルートテーブルでパケットの行き先を設定
    • VPC内はCIDRアドレスでルーティングを行う

インターネットゲートウェイ

  • マネジメント型
  • VPCと1対1で紐付いて、インターネットに公開する

EgressOnlyインターネットゲートウェイ

DHCPオプションセット

  • デフォルトで1つ作成される
  • 名前解決をVPC内でする

Elastic IPアドレス

エンドポイント

  • VPC外のサービスと接続する際に使用する

NATゲートウェイ

  • プライベートサブネットのインターネット接続を可能にする

ピアリング接続

ネットワークACL

セキュリティグループ

TRANSIT GATEWEY

  • 多数のVPCの接続を管理する

サブネットマスク・サブネット

ネットワーク

IPアドレス

  • インターネットに接続している機器の住所に当たる数値
  • IPv4は32ビット
  • グローバルIPとプライベートIPがある
  • ICANNが発行していてNICに割り当てられている
- 10進数
255.255.255.0

- 2進数(0で埋めて8桁にする)
11111111.11111111.11111111.00000000

サブネットマスク

  • ネットワーク部とホスト部の境を示すアドレス

ネットワークアドレス

10進数
- IPアドレス
192.168.1.20
- サブネットマスク
255.255.240.0

2進数
- IPアドレス
11000000 10101000 00000001 00010100
- サブネットマスク
11111111 11111111 11110000 00000000

11111111 11111111 1111    0000 00000000
|<=ネットワーク部=>|  |<=  ホスト部  =>|

- ネットワークアドレス
2進数
11000000 10101000 00000000 00000000
10進数
192.168.0.0

サブネット

  • ネットワーク内のネットワーク
  • サブネットマスクによってグループ化されたアドレスの範囲内

サブネットマスクとIPアドレス数

サブネットマスク サブネットあたりのIPアドレス数
/16 65536
/18 16384
/20 4096
/22 1025
/24 256
/26 64
/28 16