📱

【Flutter】device_preview を使って、様々なデバイス上でのレイアウトをサクッと確認する

Daigo Wakabayashi

2022/02/16に公開

はじめに

こんにちは、ダイゴです。
様々なデバイス上でのレイアウト確認がサクッと出来るパッケージ、「device_preview」が気になっていたので、触ってみて記事にしました。
どなたかの参考になれば幸いです。

import 'package:device_preview/device_preview.dart';

void main() => runApp(
  DevicePreview(
    enabled: !kReleaseMode,
    builder: (context) => MyApp(), // Wrap your app
  ),
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomePage(),
    );
  }
}

MaterialApp 内で以下の 3 つを指定することで、MediaQuery 内の値も DevicePreview 上のものが取れるようになっています。

MaterialApp 内の
- useInherited MediaQuery を true に変更
- builder に DevicePreview.appBuilder を指定
- locale に DevicePreview.locale(context) を指定

3. 主な機能紹介

デバイスの選択	ダーク/ライトモード

iOS・Android・macOS・windows などのデバイスから選択が可能です。	仮想デバイスのライトモード・ダークモードを切り替えることが出来ます。

縦向き / 横向き	通常ビルドとの切り替え

仮想デバイスのオリエンテーション（縦向き・横向き）を切り替えることが出来ます。	右下のトグルスイッチで、通常のビルドモードと仮想デバイスでのプレビューモードを切り替えることが出来ます。

他にも location の変更や、キーボード表示時のプレビュー等の機能もあります。
特定の環境下でのレイアウト崩れなどの検証は、環境の再現に時間がかかったりするので、上記のように手軽に環境再現が出来ると楽ですね。

さいごに

クロスプラットフォーム開発では、レイアウト等で配慮しなくてはいけない事項も必然的に増えてくるので、いちいちシュミレータをセットアップしてビルドする手間が省けるのはとても便利だなと感じました。

ただ、公式の README にも記載されているのですが、DevicePreview は全てのデバイスの動きを完全にエミュレート出来るわけではない、という点は注意が必要です。

There are some aspects of mobile devices that Device Preview will never be able to simulate. When in doubt, your best bet is to actually run your app on a real device.

あくまで開発時の参考程度にとどめ、怪しい部分は実機やシュミレータで確認するのが良さそうですね。
思ったより手軽に導入できたので、今後使っていきながら新たな発見があれば追記しようと思います。

最後までご覧頂き、ありがとうございました。