Flutter

Flutterで、StatefulWidget/StatelessWidgetの雛形を作る

Android Studioで「st」と打つと、StatefulWidget/StatelessWidget の雛形を作れる

Flutter

Flutterチャンネルを切り替える

現在のチャンネルを確認する

1
flutter channel

チャンネルをmasterへ変更する

1
flutter channel master

別チャンネルを使う場合は、アップグレードする

1
flutter upgrade
Flutter

Flutterドロップダウンメニュー

Flutterで、ドロップダウンメニューを作ってみた

リストから、フォントサイズを選択できるようにする

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 選択肢のフォントサイズ一覧を作成 (14〜50)
static var fontSizeList = List.generate(37, (i) => 14 + i);

// ドロップダウンメニュー内のアイテム
final List<DropdownMenuItem<String>> _dropDownMenuItem = fontSizeList.map(
  (int fontSize) {
    return new DropdownMenuItem<String>(
      value: fontSize.toString(),
      child: Text(fontSize.toString()),
    );
  },
).toList();

Widget build(BuildContext context) {
  return Scaffold(
      //...
      child: Column(
        children: <Widget>[
          Flexible(
            child: ListView(
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.format_size),
                  title: Text("フォントサイズを選ぶ: "),
                  trailing: DropdownButton<String>(
                    value: _selectedFontSize,
                    onChanged: (String newValue) {
                      setState(() {
                        this._selectedFontSize = newValue;
                      });
                    },
                    items: this._dropDownMenuItem,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      //....
  );
}
Flutter

Flutterアイコン

Flutterで用意されているマテリアルアイコンを使う

公式 Iconsクラス

コード例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const <Widget>[
    Icon(
      Icons.favorite,
      color: Colors.pink,
      size: 24.0,
      semanticLabel: 'Text to announce in accessibility modes',
    ),
    Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),
    Icon(
      Icons.beach_access,
      color: Colors.blue,
      size: 36.0,
    ),
  ],
)

Font Awesomeを使う

プラグイン font_awesome_flutter

使えるアイコン

1
2
3
4
5
6
7
8
9
10
11
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return new IconButton(
      // Use the FontAwesomeIcons class for the IconData
      icon: new Icon(FontAwesomeIcons.gamepad), 
      onPressed: () { print("Pressed"); }
     );
  }
}
Flutter

Flutterダークテーマ対応

ダークテーマに対応するには、MaterialAppに、ダークテーマ用のThemeDataを設定するだけ

Android OSの設定で、ダークテーマを適用すると、自動的に切り替わる

1
2
3
4
5
6
7
8
9
10
MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.red,
  ),
  // ダークテーマ用
  darkTheme: ThemeData(
    brightness: Brightness.dark,
  ),
);
Flutter

Flutter 難読化と最小化

手順

  1. ファイルを新規作成

    android/app/proguard-rules.pro

    1
    2
    3
    4
    5
    6
    7
    #Flutter Wrapper
    -keep class io.flutter.app.** { *; }
    -keep class io.flutter.plugin.**  { *; }
    -keep class io.flutter.util.**  { *; }
    -keep class io.flutter.view.**  { *; }
    -keep class io.flutter.**  { *; }
    -keep class io.flutter.plugins.**  { *; }

  2. ビルド設定

    android/app/build.gradle

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    android {
        ...
        buildTypes {
            release {
                signingConfig signingConfigs.release
                minifyEnabled true
                useProguard true
                proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            }
        }
    }
Flutter

Flutter AdMobスマートバナーのサイズに対応

AdMobスマートバナー

firebase_admob のサンプルコードではバナータイプが「smartBanner」になっている。

firebase_admob | Readme

1
2
3
4
5
6
7
8
BannerAd myBanner = BannerAd(
  adUnitId: BannerAd.testAdUnitId,
  size: AdSize.smartBanner,  // ★バナーサイズの指定
  targetingInfo: targetingInfo,
  listener: (MobileAdEvent event) {
    print("BannerAd event is $event");
  },
);

スマートバナーの説明は、公式ページに書いてある。

スマートバナーは、
あらゆる画面サイズのデバイスで、画面をどの向きにしていても横幅いっぱいに広告を表示できる広告ユニットです。
デバイスの向きに応じて画面の横幅が検知され、そのサイズの広告ビューが作成されます

広告の高さ 画面の高さ
32 dp 400 dp 以下
50 dp 400 dp 超、720 dp 以下
90 dp 720 dp 超

画面サイズによって、表示される広告の高さが変わる仕組み。

コンテンツと広告がかぶらないように高さを調整する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
class MyApp extends StatelessWidget {
  // バナー広告の高さ
  double adBannerHeight;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'アプリ名',
      builder: (BuildContext context, Widget child) {
        // 画面サイズを取得(幅、高)
        final Size screenSize = MediaQuery.of(context).size;
        print("画面サイズ: ${screenSize}");
        print("画面の横幅: ${screenSize.width}");
        print("画面の高さ: ${screenSize.height}");

        // 画面の高さ(dp)によって表示広告(スマートバナー)の高さをセット
        if (screenSize.height > 720) {
          adBannerHeight = 90.0;
        } else if (screenSize.height > 400) {
          adBannerHeight = 50.0;
        } else {
          adBannerHeight = 32.0;
        }

        // 下部にAdMob広告を表示するため、スペースを空ける
        return Padding(
          child: child,
          padding: EdgeInsets.only(
            bottom: adBannerHeight,
          ),
        );
      },
    );
  }
}
Flutter

Flutterアプリのリリース手順メモ

自分が行っている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アプリのアイコンを変更

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
Flutter

Flutterアプリの名称を変更

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>
フォローする

カテゴリ

タグクラウド

ALB AWS AdMob Android Studio CORS CSRF CloudFront Composer Cookie Dart Firebase Flutter Git Hexo JSON Lambda Laravel Linter Linux PHP PatchManager SSL WEBサービス XSS yum クリックジャッキング ショートカット 個人開発 開発

最近の記事

アーカイブ

タグ

ALB 1
AWS 4
AdMob 1
Android Studio 6
CORS 1
CSRF 1
CloudFront 1
Composer 1
Cookie 1
Dart 8
Firebase 2
Flutter 32
Git 2
Hexo 1
JSON 1
Lambda 1
Laravel 1
Linter 1
Linux 1
PHP 1
PatchManager 1
SSL 1
WEBサービス 1
XSS 1
yum 1
クリックジャッキング 1
ショートカット 3
個人開発 1
開発 3
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×