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

×

投稿
Flutter FutureBuilder と StreamBuilder

Future 非同期処理 値を取得すると処理が終了 Stream 非同期処理 ストリームが開いている間、ずっと値が流れてくる 12345678910111213141516171819202122var controller = StreamController&lt;int&gt;();var s

AndroidStudioでFlutterコードフォーマット設定

Android Studioで、Flutterのコードフォーマット設定をする。 次の2箇所にチェックを入れればOK - Format code on save - Oragnize imports on save

Android Studio Line行数の設定

Android Studioで、1行の行数をセットをする。 Editor &gt; Code Style &gt; Dart &gt; Line Length

Android Studio のショートカットキー

コード整形Command + Option + L キーを押す Git CommitCommand + K キーを押す Git PushCommand + Shift + K キーを押す クイックアクションOption + Enter キーを押す 文脈に応じた便利な機能を呼び出す 定義元へジャンプC

AWS ALBへのIPアドレス直アクセスを防ぐ

問題点クラウド型WAFを導入している場合、IPアドレスでELBに直アクセスされると、WAFによるセキュリティチェックを回避されてしまう。 ELB設定 ALB(Appliation LoadBalancer) &gt; 「リスナー」タブを選択 「HTTP:80」のルール表示 HTTPのアクセスは、HT

Pages
Page not found

ページが見つかりませんでした

プライバシーポリシー

本アプリのご利用によって、本規約に同意していただいたものとみなします。 個人情報第三者に個人を特定できる情報を提供する事はありません。 データ解析アプリの利便性向上のため、匿名で個人を特定できない範囲で最新の注意を払い、アクセス解析をしております。例えば、アプリのクラッシュ時にどんな原因でクラッシュ

アプリ紹介

シンプルなToDoアプリ シンプルなToDoアプリ 複雑な機能はありません。スマートフォン初心者でも悩まず使えます。 データはクラウドに自動保存。機種変更しても、ログインすれば以前のデータを引き継いで利用可能。複数の端末からでも利用可能です。 機能 ログイン（メールアドレス） カテゴリを作成 カテゴ

カテゴリ
FlutterFlutter
Android StudioAndroid-Studio
AWSAWS
DartDart
コマンドコマンド
タグ
DartDart
FlutterFlutter
Android StudioAndroid-Studio
ショートカットショートカット
AWSAWS