Loading [MathJax]/extensions/MathZoom.js
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

×

投稿
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