スタイル・エッジ技術ブログ

士業集客支援/コンサルティングのスタイル・エッジのエンジニアによるブログです。

Flutterのパッケージ備忘録

はじめに

こんにちは!スタイル・エッジLABOのガッキーです。
私は昨年10月より未経験でエンジニアとして入社し、
現在は、スタイル・エッジLABOの福井オフィスで勤務しています!

福井オフィスは昨年12月に新設されたばかりの、とてもスタイリッシュなオフィスです🌱
素敵な環境で気持ちよく勤務させていただけることに感謝しながら、日々仕事に邁進しております。
オフィスの写真は、こちら↓から是非ご覧ください! www.talent-book.jp

さて、私は入社して3ヵ月の研修後、「Flutter」を使ったスマホアプリ開発の機会を得られました。
今回は、Flutterのパッケージについて、備忘録的に書き留めておきたいと思います。

Flutterとは?

Flutterは、Googleが提供するモバイルアプリフレームワークです。
また、Flutterの開発にはDartという言語が用いられます。

一般的なネイティブアプリ開発では、AndroidiOS等、それぞれの環境に合わせたアプリ開発が必要ですが、 Flutterを使った開発の場合は、一度の開発でさまざまなデバイスやOS(AndroidiOS/Web/WindowsmacOS)に対応できます。

Flutterのパッケージ

Flutterでは外部パッケージを導入して、アプリに様々な機能を追加できます。
パッケージ自体はDart packagesから探すことができ、下記3ステップでインストールできます。

(例)audioplayers というパッケージをインストールする場合

① Flutterプロジェクトの中にあるpubspec.yamlファイル*1に、パッケージ名・バージョンを記述
dependencies:
  audioplayers: ^0.20.1
flutter pub getコマンドの実行

Visual Studio Codeを利用している場合は、Flutter・Dart拡張機能を導入すると、pubspec.yamlファイルを保存することで上記コマンドが走ります。)

③ main.dart等、パッケージを利用したいファイルの冒頭に import 文を書き加える
import 'package:audioplayers/audioplayers.dart';

パッケージのインストール手順や使用方法については、
各パッケージ詳細ページの 「Installing」・「Readme」 に記載されています。
(例)audioplayers のインストール手順:https://pub.dev/packages/audioplayers/install
(例)audioplayers の使用方法:https://pub.dev/packages/audioplayers
使い方はパッケージによって異なるので、それぞれ確認が必要になります。

さて、このパッケージについて、Flutter開発の際に実際に使ってみて便利だった、もしくは、
使わなかったけど使ってみたいパッケージを織り交ぜてご紹介したいと思います。

パッケージ3選

1. flutter_native_splash

アプリの起動中に画像やアニメーションがうぉんっと表示される、スプラッシュ画面を実装するためのパッケージです。
pubspec.yamlファイルに スプラッシュ画面に表示する画像と、背景色を記載することで、簡単にスプラッシュ画面が実装できます。
pub.dev

2. settings_ui

アプリの設定画面を実装するためのパッケージです。
このパッケージを使うことにより、各環境に最適化されたUIを提供できます。
どのような画面が作成できるかは、リンク先を是非見てみてください…! pub.dev

3. local_auth

iOS/Android端末で設定されている情報を使って、指紋認証・顔認証を実装できるパッケージです。
生体認証の結果(認証成功・失敗)を使って、セキュアなアプリにできます。 pub.dev

最後に

パッケージを使うことで簡単に機能や画面の実装ができて、パッケージの便利さが実感できます。
他にもたくさんのパッケージが存在しているので、どんどん活用してみたいと思います。

☆スタイル・エッジLABOでは、一緒に働く仲間を募集しています☆
Flutterの開発・モバイルアプリ開発に興味を持っていただけましたら、 採用サイト↓も覗いてみてください!
recruit.styleedge-labo.co.jp

*1:プロジェクトの設定ファイルで、パッケージマネージャーとしての役割もあります。新規でFlutterプロジェクトを作成した際、プロジェクトフォルダの中に自動的に作成されます。