自分が行っているFlutterアプリのリリース手順をメモ

1. バージョン番号を上げる

   android/app/build.gradle

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   android { .... defaultConfig { applicationId "com.exp.fuku.myapplication" minSdkVersion 16 targetSdkVersion 28 // カウントアップ // 内部のバージョン番号として使用する整数 versionCode 5 // カウントアップ // ユーザーに表示するバージョン番号 versionName "1.0.5"

   pubspec.yaml

   1 2	# カウントアップ version 1.0.5

1. Gitでタグをつけておく

   1 2 3

   git commit -m "修正版リリースに伴う、バージョン番号の更新" git tag -a v1.0.5 -m "release v1.0.5" git tag

1. GitHubへコードとタグをプッシュ

   1 2	git push origin master git push origin v1.0.5

1. GitHubでリリースを作る

   1. release > Draft a new release ボタンをクリック

   2. リリース内容を入力

      内容	設定例
      Tag Version	v1.0.5
      Release Title	v1.0.5
      Describe	release v1.0.5
      This is pre-release	off

   3. 「Publish release」ボタンをクリック

1. Google Playで配信するAPKファイルを生成

   1	flutter build appbundle

   APKファイルの出力先

   1	build/app/outputs/bundle/app.aab

1. Google Playで配信する

   1. Google Play Console にログイン

   2. すべてのアプリ > 対象アプリ > リリース管理 > アプリのリリース

   3. 製品版 > 管理 > リリースを作成

      内容	設定値
      追加する Android App Bundle と APK	app.aab をアップロード
      このリリースの新機能	リリース説明文

   4. 「保存」をクリック

   5. 「確認」をクリック

   6. 「製品版として公開を開始」をクリック

Flutterでは、アイコンの生成は下記ライブラリを使うと便利

flutter_launcher_icons

1. ライブラリをインストール

   pubspec.yaml

   1 2 3 4 5 6

   dev_dependencies: flutter_test: sdk: flutter # ここに追記 flutter_launcher_icons: ^0.7.3

   1	flutter packages get

2. アイコン画像へのパスを指定

   pubspec.yaml

   1 2 3 4 5

   # flutter_icons: image_path: "assets/icon/icon.png" android: true ios: true

3. アイコンの生成 (画像を変更したら、再度このコマンドを実行する)

   1	flutter pub run flutter_launcher_icons:main

android/app/src/main/AndroidManifest.xml

1
2
3
4
5

<application 
    android:name="io.flutter.app.FlutterApplication" 
    android:label="アプリ名" 
    android:icon="@mipmap/ic_launcher">
</application>

Containerクラスの基本形

1
2
3
4
5

Container(
  child: ウィジェット,
  padding: [ EdgeInsets ],
  alignment: [ Alignment ]
)

EdgeInsets

Alignment

Columnクラスの基本形

1
2
3
4
5
6

Column(
  mainAxisAlignment: [ MainAxisAlignment ],
  mainAxisSize: [ MainAxisSize ],
  crossAxisAlignment: [ CrossAxisAlignment ],
  children: <Widget>[ ... ]
)

Rowクラスの基本形

1
2
3
4
5
6

Row(
  mainAxisAlignment: [ MainAxisAlignment ],
  mainAxisSize: [ MainAxisSize ],
  crossAxisAlignment: [ CrossAxisAlignment ],
  children: <Widget>[ ... ]
)

MainAxisAlignment

CrossAxisAlignment

MainAxisSize

Stackクラスの基本形

ウィジェットを重ねて表示する

1
2
3
4
5
6
7

Stack(
  children: <Widget>[
    Container(),
    Container(),
    Container(),
  ]
)

Alignクラスの基本形

ウィジェットごとに配置を指定する

1
2
3
4
5
6
7

Column(
  children: <Widget>[
    Align(alignment: [ Alignment ], child: ウィジェット),
    Align(alignment: [ Alignment ], child: ウィジェット),
    Align(alignment: [ Alignment ], child: ウィジェット),
  ]
)

Expandedクラスの基本形

ウィジェットを画面一杯で均等表示する

1
2
3
4
5
6
7

Column(
  children: <Widget>[
    Expanded(child: ウィジェット),
    Expanded(child: ウィジェット),
    Expanded(child: ウィジェット),
  ]
)

Paddingクラスの基本形

余白を作るのためのウィジェット

1
2
3
4
5
6
7

Column(
  children: <Widget>[
    Expanded(child: ウィジェット),
    Padding(padding: [ EdgeInsets ]),
    Expanded(child: ウィジェット),
  ]
)

SizedBoxクラスの基本形

決まったサイズのウィジェットを使う

1
2
3
4
5
6
7

Column(
  children: <Widget>[
    SizedBox(width: 幅, height: 高さ, child: ウィジェット),
    SizedBox(width: 幅, height: 高さ, child: ウィジェット),
    SizedBox(width: 幅, height: 高さ, child: ウィジェット),
  ]
)

Android Studio のショートカット

1. Widgetを選択

2. Option + Enter キーを押す

3. メニューから、Wrap with new widget を押す