23
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

FlutterAdvent Calendar 2021

Day 20

【Flutter】自分的、開発で使いたいパッケージ2選

Posted at

はじめに

本記事はFlutter Advent Calendar 2021の20日目の記事です。
(遅れてごめんなさい。)

この記事では私がFlutterでアプリ開発をする上で、好んで使っているパッケージを2つに絞ってご紹介します。
※有名なパッケージは他の方の記事を見ればいいので、そこまで有名ではないけどオススメであるパッケージを選んだら2つだけになりました。

Drift

1つ目はDriftというSQLiteのORMです。
最近Flutter Favoriteの仲間入りをしたので、流行るといいなと思っています。

一度使うと、ローカルDBを使うときDriftは手放せない存在になります。

何が凄いか

DriftはSQLiteのORMです。
SQLiteでできることはカバーしつつ、ORMとして便利な機能を兼ね揃えています。

Daoをサポートしている

DriftではDao(Data Access Object)の機能が標準で組み込まれています。
Daoを使うことで、良い感じにコードを管理することができます。

何も考えずにデータベース関連の処理を作成すると、一つのファイルでDatabaseの初期化や、テーブルの定義、SELECT,INSERT,UPDATE,DELETE文などが作成され、肥大化したファイルが生まれがちです。(私だけ?)

しかし、Driftが用意したルールに従えば、自ずと各役割ごとにファイルを分割するように書きたくなるので、肥大化を機械的に回避することができます。

一例ですが、以下のような構成にしたくなってきます。

model/db/
 ├ dao/
 │ └ todo_dao.dart
 │ └ user_dao.dart
 ├ entity/
 │ └ todo_records.dart
 │ └ user_records.dart
 └ database.dart

変更の監視/通知ができる

Driftを使っていて、これが一番最高な機能だと思うのが、変更の監視からの通知機能です。
イメージとしてはfirestoreのリアルタイムリスナーのような感じです。

Streamを使い、監視しているテーブルに対して変更があった場合、通知を受け取ることができます。
実装も非常に簡単で、以下のような記述だけで済んでしまいます。

points_dao.dart
Stream<List<PointsRecord>> watchPoints() {
  return select(pointsRecords).watch();
}

一度監視しておけば、テーブルを更新したときなどに再取得処理などを書かなくてもいいので、とても楽です。

備考

旧称は「moor」というAndroidの「Room」をもじった名前でしたが、一部地域で蔑称として使用される事がある単語であったため、「Drift」に変わりました。

なお、「moor」時代から機能として変わったところはなく、名称だけの変更です。
ただし、パッケージは変わってしまったので、最新版を追いかけるには「Drift」を使用するほうが良いでしょう。
(一応しばらくの間は、moorも更新されるようです。)

「moor」から「Drift」へ切り替えには自動移行ツールが用意されています。

flutter_screenutil

Flutterでアプリを作るときに個人的時間がかかるランキング上位に君臨するのが、
端末ごとのWidgetサイズやテキストサイズがいい感じにならない問題です。

iPhone13では良い感じだな!
Galaxy S21はどうかな? なんか下の方が空白だけどまあ良いか!
じゃあ昔のちょっと小さいXperiaは?
→__A RenderFlex overflowed!!!__

私も昔はExpandedやFlexible、Spacerで試行錯誤してみたり、
MediaQuery.of(context).sizeを使って、size.height * 0.2とか指定してみたりして戦っていました(テキストサイズが大変なんですよね)。

しかしflutter_screenutilに出会ってからは世界が変わりました。

今ではMediaQueryのサイズは使わなくなりました。
(ExpandedやFlexibleたちは今でも大活躍です。)

何ができる?

基本となる端末のサイズでflutter_screenutilを初期化し、例えばテキストサイズであれば"24.sp"のように指定するだけで、他の端末では基本となる端末のサイズとの差を自動で計算したサイズがテキストサイズとして設定されます。
つまり、基本となる端末と同じ表示になるように自動で計算してくれるようになります。

使い方

まず、以下のように通常MaterialApp等を返すときに、ScreenUtilInitクラスで囲います。
その際に基本としたい端末のサイズを設定します。ここではiPhone13 Pro MAXのサイズを指定してみます。

app.dart
import 'package:flutter_screenutil/flutter_screenutil.dart';

return ScreenUtilInit(
  designSize: const Size(428, 926), // iPhone13 Pro MAX
  builder: () {
    return MaterialApp(
      title: 'screen util',
      theme: ThemeData(
        primaryColor: kPrimaryColor,
        fontFamily: fontRegular,
      ),
      home: HomeScreen(),
    );
  },
);

そして、サイズを指定したい各地では以下のように指定します。
すると、基本となるiPhone13 Pro MAXでは指定した数値通りのサイズになりますが、
別の大きさの端末ではiPhone13 Pro Maxとのサイズ差から計算して、自動的にいい感じのサイズにしてくれます。

home_screen.dart
import 'package:flutter_screenutil/flutter_screenutil.dart';

Container(
  height: 100.h,
  width: 200.w,
  color: Colors.blueAccent,
  child: Text(
    'サンプル',
    style: TextStyle(
      fontSize: 24.sp,
    ),
  ),
)

終わりに

私がFlutterを使い始めたのは1年ほど前ですが、良いパッケージが続々と作成されているので、日々楽しく楽に開発させてもらえています。
今後も感謝しつつ、パッケージを使わせてもらおうと思います。

23
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?