こんにちは、ウエヤスです。今回は、Flutterのパッケージについて紹介します。
Flutterは、単一のコードベースでAndroid、iOS、Linux、macOSなどのクロスプラットフォームアプリケーションの開発が可能です。また、パッケージという外部に公開されている便利な機能を提供するプログラムを利用することで、開発効率をさらに向上させることができます。

この記事は、Flutter初心者やFlutterのパッケージについて情報を探している方を対象に、パッケージの使い方や機能について説明していきます。なお、本記事で取り上げる内容は、AndroidとiOSのデバイスを対象にしています。

パッケージについて

みなさんは、どのようなパッケージを使用されていますか?
Flutterは、様々な目的に使用できる多数のパッケージが提供されており、どれを使うか迷ってしまいますよね。今回は、利用頻度の高いまたは便利なパッケージをいくつか紹介します。これらのパッケージを使うことで、アプリ開発が効率化できることを願っています。

パッケージは、pub.dev から取得できます。

動作環境

  • Windows 10 Pro 64bit
  • Flutter 3.7.3
  • Android Studio Electric Eel | 2022.1.1 Patch 1
  • Androidエミュレーター

flutter_launcher_icons

flutter_launcher_iconsとは、AndroidとiOSのアプリアイコンを一括生成してくれる便利なツールです。
アプリアイコンを表示するには、各プラットフォーム用にアプリアイコンを設定する必要があります。 このパッケージを使用する事により、簡単にアプリアイコンを設定することができます。

インストール

pubspec.yamlのdev_dependenciesに下記を追加します。
追加後、Android Studioのターミナルからflutter pub getを実行し、パッケージのダウンロード・インストールをする。
^0.11.0は、最新バージョンを指定してください。

pubspec.yaml

dev_dependencies:
  flutter_launcher_icons: ^0.11.0

アイコンの設定

pubspec.yamlにflutter_iconsから以下を追加します。

dev_dependencies:
  flutter_launcher_icons: ^0.11.0

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  image_path_android: "assets/icon/icon_android.png"
  image_path_ios: "assets/icon/icon_ios.png"
  adaptive_icon_background: "#ffffff"
  adaptive_icon_foreground: "assets/icon/adaptive_icon.png"
  • android:
    Android用のアプリアイコンを作成する場合は、trueを設定します。
  • ios:
    iOS用のアプリアイコンを作成する場合は、trueを設定します。
  • image_path:
    アプリアイコンとして使用したいアイコン画像ファイルの場所を指定します。
  • image_path_android:
    Android用で使用されるアイコン画像ファイルの場所を設定します。定義されていない場合はimage_pathが使用されます。
  • image_path_ios:
    iOS用で使用されるアイコン画像ファイルの場所を設定します。定義されていない場合はimage_pathが使用されます。

次の定義は、Android8.0以降のアイコン生成時に使用されます。

  • adaptive_icon_background:
    アダプティブアイコンの背景を塗りつぶすために使用される色または画像を設定します。
  • adaptive_icon_foreground:
    アダプティブアイコンのアイコン前景に使用される画像を設定します。

コマンド実行

下記のコマンドを実行します。
実行後、アプリアイコンが生成されています。

flutter pub run flutter_launcher_icons

表示確認

通常アイコンアダプティブアイコン

flutter_native_splash

flutter_native_splashとは、AndroidとiOSの様々な端末サイズに対応したスプラッシュスクリーンを簡単に設定するためのパッケージです。

インストール

pubspec.yamlのdependenciesに下記を追加します。
追加後、Android Studioのターミナルからflutter pub getを実行し、パッケージのダウンロード・インストールをする。
^2.2.18は、最新バージョンを指定してください。

pubspec.yaml

dependencies:
  flutter_native_splash: ^2.2.18

スプラッシュスクリーンの設定

pubspec.yamlにflutter_native_splashから以下を追加します。

dependencies:
  flutter_native_splash: ^2.2.18

flutter_native_splash:
  color: "#ffffff"
  image: assets/splash.png
  color_dark: "#042a49"
  image_dark: assets/splash.png
  fullscreen: true

  android_12:
    image: assets/android12splash.png
    icon_background_color: "#ffffff"
    image_dark: assets/android12splash-invert.png
    icon_background_color_dark: "#042a49"
  • color:
    スプラッシュスクリーンの背景色を設定します。
  • image:
    スプラッシュスクリーンで使用する画像を指定します。
  • color_dark:
    デバイスがダークモード時のスプラッシュスクリーンの背景色を設定します。
  • image_dark:
    デバイスがダークモード時のスプラッシュスクリーンで使用する画像を指定します。
  • fullscreen:
    通知バーを非表示にするには、trueを設定します。

以下のandroid_12:定義は、android 12でのみ使用されます。

  • image:
    スプラッシュスクリーンで使用する画像を指定します。
  • icon_background_color:
    スプラッシュスクリーンの背景色を設定します。
  • image_dark:
    デバイスがダークモード時のスプラッシュスクリーンで使用する画像を指定します。
  • icon_background_color_dark:
    デバイスがダークモード時のスプラッシュスクリーンの背景色を設定します。

コマンド実行

下記のコマンドを実行します。
実行後、指定した背景色と画像からAndroidとiOSのスプラッシュスクリーンが自動的に生成されます。

flutter pub run flutter_native_splash:create

表示確認

Android11_ライトモードAndroid11_ダークモード
Android12_ライトモードAndroid12_ダークモード

flutter_screenutil

flutter_screenutilとは、AndroidとiOSの様々な端末サイズに自動的でサイズ調整するためのパッケージです。

インストール

pubspec.yamlのdependenciesに下記を追加します。
追加後、Android Studioのターミナルからflutter pub getを実行し、パッケージのダウンロード・インストールをする。
^5.6.1は、最新バージョンを指定してください。

pubspec.yaml

dependencies:
  flutter_screenutil: ^5.6.1

インポートの追加

import文でflutter_screenutilパッケージをインポートします。

import 'package:flutter_screenutil/flutter_screenutil.dart';

ScreenUtilの設定

ScreenUtilInitを使用し、デバイスサイズを設定する。
単位は、dpで指定する。

@override
Widget build(BuildContext context) {
  return ScreenUtilInit(
    // デザインの基になるデバイスサイズを設定(単位:dp)
    designSize: const Size(392, 829),
    builder: (context , child) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: child,
      );
    },
    child: const MyHomePage(title: 'flutter_screenutil'),
  );
}

ウィジェットの設定

ウィジェットのサイズやフォントサイズを可変させたい場合は、下記を指定します。

  • フォントサイズ
    数値の後に.spを追加します。
  • 横幅
    数値の後に.wを追加します。
  • 高さ
    数値の後に.hを追加します。
Container(
  width: 300.w,
  height: 100.h,
  color: Colors.purple,
),
Text(
  'flutter_screenutilパッケージ表示テスト!同じように表示されます。',
  style: TextStyle(
    fontSize: 20.sp,
  ),
),
ElevatedButton(
  style: ElevatedButton.styleFrom(
    fixedSize: Size(
      300.w,
      50.h,
    ),
  ),
  child: Text('Button',
    style: TextStyle(
    fontSize: 30.sp,
    ),
  ),
  onPressed: () {},
),

コードサンプル

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      // デザインの基になるデバイスサイズを設定(単位:dp)
      designSize: const Size(392, 829),
      builder: (context , child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: child,
        );
      },
      child: const MyHomePage(title: 'flutter_screenutil'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Container(
              width: 300.w,
              height: 100.h,
              color: Colors.purple,
            ),
            Text(
              'flutter_screenutilパッケージ表示テスト!同じように表示されます。',
              style: TextStyle(
                fontSize: 20.sp,
              ),
            ),
            ElevatedButton(
              style: ElevatedButton.styleFrom(
                fixedSize: Size(
                  300.w,
                  50.h,
                ),
              ),
              child: Text('Button',
                style: TextStyle(
                fontSize: 30.sp,
                ),
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

表示確認

Android_スマートフォンAndroid_タブレット

url_launcher

url_launcherとは、Flutterアプリから外部のURLを開くための便利なパッケージです。
Webサイトをデフォルトブラウザから開くことができます。

インストール

pubspec.yamlのdev_dependenciesに下記を追加します。
追加後、Android Studioのターミナルからflutter pub getを実行し、パッケージのダウンロード・インストールをする。
^6.1.9は、最新バージョンを指定してください。

pubspec.yaml

dependencies:
  url_launcher: ^6.1.9

インポートの追加

import文でurl_launcherパッケージをインポートします。

import 'package:url_launcher/url_launcher.dart';

url_launcherの実装

_launchUrlメソッドが呼ばれることによりWebサイトを開きます。

final Uri _url = Uri.parse('https://agest.co.jp');

Future<void> _launchUrl() async {
  if (!await launchUrl(_url)) {
    throw Exception('Could not launch $_url');
  }
}

コードサンプル

main.dart

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'url_launcher'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final Uri _url = Uri.parse('https://agest.co.jp');

  Future<void> _launchUrl() async {
    if (!await launchUrl(_url)) {
      throw Exception('Could not launch $_url');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: const Text('AGESTのホームページへ'),
              onPressed: () {
                _launchUrl();
              },
            ),
          ],
        ),
      ),
    );
  }
}

表示確認

Android_スマートフォン

fluttertoast

fluttertoastとは、簡単にトーストメッセージを表示するためのパッケージです

インストール

pubspec.yamlのdev_dependenciesに下記を追加します。
追加後、Android Studioのターミナルからflutter pub getを実行し、パッケージのダウンロード・インストールをする。
^8.2.1は、最新バージョンを指定してください。

pubspec.yaml

dependencies:
  fluttertoast: ^8.2.1

インポートの追加

import文でFlutterToastパッケージをインポートします。

import 'package:fluttertoast/fluttertoast.dart';

fluttertoastの実装

Fluttertoast.showToast(
    msg: "fluttertoastパッケージ表示テスト!",
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.BOTTOM,
    timeInSecForIosWeb: 1,
    backgroundColor: Colors.black,
    textColor: Colors.white,
    fontSize: 15.0
);

トーストメッセージの背景色やフォントサイズを変更したい場合は、下記の設定を変更します。

  • msg:
    トーストメッセージのテキストを設定します。
  • toastLength:
    トーストメッセージが表示される時間を設定します。
  • gravity:
    トーストメッセージが表示される位置を設定します。
  • timeInSecForIosWeb:
    iOSとWebプラットフォームでトーストメッセージが表示される時間を設定します。
  • backgroundColor:
    トーストメッセージの背景色を設定します。
  • textColor:
    トーストメッセージのテキストの色を設定します。
  • fontSize:
    トーストメッセージのフォントサイズを設定します。

コードサンプル

main.dart

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'fluttertoast'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              child: const Text('トーストを表示'),
              onPressed: () {
                Fluttertoast.showToast(
                    msg: "fluttertoastパッケージ表示テスト!",
                    toastLength: Toast.LENGTH_SHORT,
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 1,
                    backgroundColor: Colors.black,
                    textColor: Colors.white,
                    fontSize: 15.0
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

表示確認

Android_スマートフォン

おわりに

最後までご覧いただきありがとうございました。アプリ開発に役立つパッケージを見つけることができましたでしょうか?アプリアイコン設定は、アプリリリースにおいて欠かせないものだと思います。また、トーストメッセージや自動的にサイズ調整をしてくれるパッケージは、とても便利だと思います。
これらのパッケージのインストールは簡単に行えるため、皆さんぜひ使ってみてください。
今回ご紹介した以外にも、さまざまなパッケージが存在していますので、ぜひ試して面白いものを見つけてみてください。

それでは、よいFlutterライフを。

<おすすめ記事・メディア>

今度はFlutter?Swiftとどちらを勉強すべきか

アプリ開発エンジニアのフリーランス案件ならエンジニアファクトリー

SHARE

  • facebook
  • twitter

SQRIPTER

AGEST Engineers

AGEST

記事一覧

AGESTのエンジニアが情報発信してます!

株式会社AGEST

Sqriptsはシステム開発における品質(Quality)を中心に、エンジニアが”理解しやすい”Scriptに変換して情報発信するメディアです

  • 新規登録/ログイン
  • 株式会社AGEST