Flutter初心者が知っておきたいpackageまとめ

Flutter package

はじめに

Flutterを触れ始めて間もない状態を対象としたドキュメントです。
実装を進めていくにあたって頻出するライブラリ（パッケージ）についてご参考ください。

pubspec.yaml

記述方法はこちらを参考にさせていただきます。
はじめは構造のルール、記述するセクション、バージョンの指定方法を抑えておくと良さそうです。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.1
  http: ^0.13.4
  intl: ^0.17.0
  sprintf: ^6.0.0

パッケージ

要求に即したパッケージについてまとめています。

GetX

• 値を画面間で共有したい
• 値が更新されたら画面を再描画したい
• 画面遷移を簡単に実装したい

import 'package:get/get.dart';

画面遷移や変数の状態管理に便利なパッケージ。
変数が更新されたら画面を再描画したいといったシーンは多く、導入・実装すると便利です。

例

1. 状態を管理するコントローラーを作成
2. main()でインスタンス化
3. 必要箇所でインスタンスを取得、参照

game_controller.dart

class GameController extends GetxController {
  final score = 0.obs;
}

main.dart

void main() {
  final GameController gc = Get.put(GameController());
  runApp(MyApp());
}

home.dart

// 取得
final GameController gc = Get.find();
// 代入
gc.score.value = 1234; // gc.score(1234);
// 参照
Text('score: ' + gc.score.toString()); // score: 1234

http

• サーバにデータを送信したい
• APIからJSONデータを取得して使用したい

import 'package:http/http.dart' as http;

APIからJSONを取得するなど、非同期のFuture(asymc/await), FutureBuilderといったキーワードと組み合わせてよく利用されます。

intl

• カンマ区切りにしたい
• 日時をフォーマットしたい
• 通貨単位を付加したい

import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';　// initializeDateFormatting('ja');でローケルを初期化する場合

カンマ区切りのフォーマットでよく利用されます。

var price = 1000;

var f1 = NumberFormat("#,###");
Text(f1.format(price) + '円'); // 1,000円

var f2 = NumberFormat.simpleCurrency(locale: 'ja');
Text(f2.format(price)); // ¥1,000

DateFormatの方法はいろいろアプローチがあるので一例です。

DateTime now = DateTime.parse('2022-04-01');
DateFormat df = DateFormat('yyyy年MM月dd日'); // 月日を0埋めする
Text(df.format(now)); // 2022年04月01日

sprintf

• 文字列をフォーマットしたい

import 'package:sprintf/sprintf.dart';

日付をフォーマットする。

String now = '2022-04-01';
String formatDate = sprintf('%s年%s月%s日', now.split('-'));
Text(formatDate);

各パッケージの以下ページを一読し、インストールや実装について概要把握することをおすすめします。

• Readme
• Example
• Installing

最後に

アプリ開発で共通的によく利用されるパッケージについて、今後も引き続きまとめていきます。