Zenn
😇

Flutter開発実践講座

2022/07/25に公開
Flutter
tech

目次

  • この講座について
  • Flutter/DartにおけるPackageとPlugin
  • pubspec.yaml
  • pub.dev
  • 実践
    • アプリを新規作成
    • 環境設定
    • アプリ名を変更
    • アプリアイコン、スプラッシュ画面
    • 縦画面固定にする
    • デフォルトフォントの変更
    • Admobバナー

この講座について

アプリを仕上げるためのモチベーションのお話を交えつつ、Flutter で ios, android アプリを制作するときに（おそらく）実装することを時短できるようにFlutterエンジニア（１ヶ月）が１時間弱で親切丁寧に教える講座です！！

Flutter/DartにおけるPackageとPlugin

Package = Flutter でたアプリを作るにあたり、便利な機能を実装したプログラム（クラス群）
Plugin = プラットフォームの機能（ Native の実装）が入っている Package

正式な定義では pubspec.yaml （後で説明）を持っているものは全て Package となるのですが、一般的には、外部公開している Package を指します

pubspec.yaml

パッケージの環境設定ファイル、ここにYAML構文に従って利用パッケージや、assetsのパスを記載する

ざっくり項目説明

pubspec.yaml
# Packageで使う使う Dart SDK のバージョン
environment:
  sdk: ">=2.16.2 <3.0.0"

# 利用するパッケージ（バージョン）を記載
dependencies:
  intl:          # 可能な限り最新バージョン 
  intl: any      # 可能な限り最新バージョン
  intl: 0.15.8   # 指定バージョン
  intl: >=0.15.8 # 指定バージョン以上
  intl: >0.15.8  # 指定バージョン超過
  intl: <=0.15.8 # 指定バージョン以下
  intl: <0.15.8  # 指定バージョン未満
  intl: ">=0.15.8 <0.17.0" # x.x.x以上、x.x.x未満
  intl: ^0.15.8  # 指定バージョン以上で下位互換性を担保できるもの

# 開発のときだけ、利用するパッケージ（バージョン）を記載
dev_dependencies:
  flutter_test:
    sdk: flutter

# Flutterに関連すること（マテリアルデザイン利用：デフォルトtrueとか、assetsのパス）を記載する場所
flutter:
  uses-material-design: true
  assets:
    - assets/icon.png
    - assets/images/

pubspec.yaml を更新したら

flutter pub get

をコマンド実行しないと、syncしないので注意（IDEを使えば保存で更新してくれるけど）
また、 hot deploy に対応してないで、再ビルドが必要

pub.dev

https://pub.dev/

Package/Plugin を公開しているところ（パッケージマネージャ）
CocoaPodsやMavenと同じ働きをするもの

pubspec.yaml と連携している、Package のドキュメントもしっかりしているのでここを読めばだいたい実装できる
自分の作ったPackageも公開できる

Package の利用方法

  1. "flutter [機能] package"でググる ex) flutter csv package
  2. 良さげな記事を探して、自分の求めているものか確認
  3. pub.dev　でも自分の求めているものか確認
  4. pub.dev の Readme、Example、installingあたりみながら、 pubspec.yaml に記載するバージョンを調べる
  5. 記事と pub.dev をみながら実装

実践

アプリを新規作成

--org と --project-name を設定すると後々面倒がないので、作成時に設定する
--org.--project-name が package name(android), Bundle identifier(ios) になる

flutter create mygamelist --org jp.co.drocket --project-name mygamelist --description ""

最低ビルドバージョンの設定

android/local.properties
flutter.minSdkVersion=24 <- 追加
android/app/build.gradle
minSdkVersion flutter.minSdkVersion
to
minSdkVersion 24
ios/Podfile
# platform :ios, '9.0'
to
platform :ios, '13.0'
ios/Runner.xcodeproj/project.pbxproj
IPHONEOS_DEPLOYMENT_TARGET = 9.0
to
IPHONEOS_DEPLOYMENT_TARGET = 13.0

アプリ名を変更

android/app/src/main/AndroidManifest.xml
android:label="mygamelist"
to
android:label="プレイゲームリスト"
ios/Runner/info.plist
<key>CFBundleDisplayName</key>
<string>Mygamelist</string>
to
<key>CFBundleDisplayName</key>
<string>プレイゲームリスト</string>

アプリアイコン、スプラッシュ画面

適当にアイコンを用意する（今回はこれを利用されてもらました）
https://generator.tubudeco.com/g1606/

画像を以下に配置（assetsは新規作成）
assets/icon.png

pubspec.yaml
dev_dependencies:

  flutter_launcher_icons: ^0.9.3
  flutter_native_splash:
  
flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon.png"

flutter_native_splash:
  color: '#ffffff'
  image: 'assets/icon.png'
  fullscreen: true

コマンド実行

flutter pub get
flutter pub run flutter_launcher_icons:main
flutter pub run flutter_native_splash:create

アプリをビルドして、確認

flutter_native_splashの削除方法

ちょっと面倒なので、必要になったら個別対応します。連絡してください！

縦画面固定にする

画面の回転を考えると、仕様が複雑になるので縦固定に設定する

lib/main.dart
import 'package:flutter/services.dart';

void main() {
  ...  
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  ...
}

デフォルトフォントの変更

デフォルトフォントは Roboto で OS によっては一部漢字が中華風になるのでカスタムフォント設定して環境依存しないようにする

lib/main.dart
...
      body: Center(
        ...
        child: Column(
        ...
          children: <Widget>[
            // ここから 
            const Text(
              '海空汽組刃',
              style: TextStyle(
                fontSize: 48,
              ),
            ),
            const Text(
              '海空汽組刃',
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
              ),
            ),
            // ここまで 
	    ...
          ],
        ),
      ),
...

android か chrom で起動

フォントダウンロード（今回は Noto Sans Japanese を利用）
https://fonts.google.com/noto/specimen/Noto+Sans+JP?subset=japanese

ダウンロードした NotoSansJP-Regular.otf NotoSansJP-Bold.otf を以下に配置（fontsは新規作成）

assets/fonts/
  NotoSansJP-Bold.otf
  NotoSansJP-Regular.otf

flutter:配下に以下を追加

pubspec.yaml
flutter:

  fonts:
    - family: NotoSansJP
      fonts:
        - asset: assets/fonts/NotoSansJP-Regular.otf
          weight: 400
        - asset: assets/fonts/NotoSansJP-Bold.otf
          weight: 700

flutter pub get

テーマにフォントファミリーを追加

MaterialApp、themeに以下を追加

lib/main.dart
    return MaterialApp(
      ...
      theme: ThemeData(
        fontFamily: 'NotoSansJP', // これ
      ),
      ...
    );

android か chrom で起動して、適応を確認

Admobバナー

マネタイズしたいので、admobバナー広告を最低限で実装
Admobの設定をやると時間が足りないので割愛、ユーザ登録や設定を進めると、AdMobアプリIDと広告ユニットIDが取得できます、今回はテスト用に用意されているものを利用します

pubspec.yaml
dependencies:
  ...
  google_mobile_ads:
  ...

flutter pub get

AdMobアプリIDを追加

ios/Runner/Info.plist
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~3347511713</string>

application配下に以下を追加

android/app/src/main/AndroidManifest.xml
   <application
        android:label="プレイゲームリスト"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
	<meta-data
	    android:name="com.google.android.gms.ads.APPLICATION_ID"
	    android:value="ca-app-pub-3940256099942544~3347511713"/>
	...
   </application>

広告（Widget）を置くところは、アプリの仕様で決めますが、今回は ScaffoldのbottomNavigationBar に設定します

lib/main.dart
import 'dart:io' show Platform;
import 'package:google_mobile_ads/google_mobile_ads.dart';

...

void main() {
  ...
  WidgetsFlutterBinding.ensureInitialized(); // これ
  MobileAds.instance.initialize(); // これ
  ...
}

...

    return Scaffold(
      ...
      bottomNavigationBar: _admobBannerAd(), // これ      
    );

...

Widget _admobBannerAd() {
  final adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/6300978111'
      : 'ca-app-pub-3940256099942544/2934735716';
  final bannerAd = BannerAd(
    adUnitId: adUnitId,
    size: AdSize.banner,
    request: const AdRequest(),
    listener: const BannerAdListener(),
  );
  bannerAd.load();
  return SizedBox(
    height: 60,
    child: AdWidget(ad: bannerAd),
  );
}

android, ios を起動して下部バナーが表示されているか確認

Discussion