Flutter

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

Android Studioで、Flutterのコードフォーマット設定をする。

次の2箇所にチェックを入れればOK

- Format code on save
- Oragnize imports on save

Flutter

Flutterバージョン

Flutterのバージョン一覧

1
flutter version

プロジェクトのFlutterバージョンを確認

1
flutter --version

プロジェクトのFlutterバージョンを指定バージョンに変更

1
flutter version v1.9.1+hotfix.3

チャンネル別の最新バージョンを調べるなら、公式サイトを参照

公式 Flutter SDK releases

Flutter

Flutterアライメント

アライメントは、要素の位置(左寄せ、中央寄せ、右寄せ)を指定すること

  • Main Axisは、ウィジェットの向きに

  • Cross Axisは、ウィジェットと交差する向きに

公式ページ「Layouts in Flutter」

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,
          ),
        );
      },
    );
  }
}
フォローする

カテゴリ

タグクラウド

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

×