さまざまなデバイスサイズに対応するレスポンシブなUIをFlutterで実装する方法

アプリを開発する際、さまざまなデバイスサイズや画面の向きに対応するレスポンシブなデザインは欠かせません。Flutterでは、柔軟なレイアウトウィジェットと便利なツールを使うことで、簡単にレスポンシブUIを実装できます。この記事では、初心者向けに以下のポイントを解説します。

---

1. MediaQueryの活用法

MediaQueryを使うと、デバイスの画面サイズや向き、解像度にアクセスできます。

基本的な使い方

@override
Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  final screenHeight = MediaQuery.of(context).size.height;

  return Container(
    width: screenWidth * 0.8, // 画面幅の80%
    height: screenHeight * 0.3, // 画面高さの30%
    color: Colors.blue,
    child: Center(child: Text('レスポンシブUI')),
  );
}

ポイント

• 画面サイズに基づいて、動的にウィジェットのサイズや位置を変更できます。
• 例: スマホでは縦に並べるが、タブレットでは横に並べるレイアウトの切り替え。

---

2. FlexibleとExpandedの使い方

FlexibleやExpandedを使うと、親ウィジェットのスペースを効率的に分割できます。

例: Flexible

Flexibleは子ウィジェットがスペースを占有する比率を調整します。

@override
Widget build(BuildContext context) {
  return Row(
    children: [
      Flexible(
        flex: 1,
        child: Container(color: Colors.red),
      ),
      Flexible(
        flex: 2,
        child: Container(color: Colors.green),
      ),
    ],
  );
}

• flex: スペースを分割する比率を指定。

例: Expanded

Expandedは、利用可能なスペースをすべて埋めるように子ウィジェットを拡張します。

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Expanded(
        child: Container(color: Colors.blue),
      ),
      Expanded(
        child: Container(color: Colors.yellow),
      ),
    ],
  );
}

---

3. デバイスの向きに応じたレイアウト変更

画面の向き（縦向き・横向き）に応じて、異なるレイアウトを実現できます。

OrientationBuilderの使用

OrientationBuilderを使うと、向きによってレイアウトを変更できます。

@override
Widget build(BuildContext context) {
  return OrientationBuilder(
    builder: (context, orientation) {
      return orientation == Orientation.portrait
          ? Column(
              children: [
                Container(height: 100, color: Colors.blue),
                Container(height: 100, color: Colors.green),
              ],
            )
          : Row(
              children: [
                Container(width: 100, color: Colors.blue),
                Container(width: 100, color: Colors.green),
              ],
            );
    },
  );
}

---

まとめ

Flutterでは、以下の手法を組み合わせることでレスポンシブUIを簡単に実現できます。

1. MediaQueryを使って画面サイズに応じたデザインを作成。
2. FlexibleやExpandedで柔軟なレイアウトを構築。
3. OrientationBuilderを活用して、デバイスの向きに応じたUI変更。

これらを使いこなせば、さまざまなデバイスに対応するアプリが作れるようになります。ぜひ試してみてください！