Flutter MaterialデザインとCupertinoデザインの比較と実装ガイド

Flutterは、Googleが開発したオープンソースのUIソフトウェア開発キットです。
そして、Android、iOS、Web、デスクトップ向けに美しいネイティブアプリケーションを構築できます。

Flutterの大きな魅力の一つは、二つの異なるデザインスタイルをサポートしている点です。
それは、MaterialデザインとCupertinoデザインです。

この記事では、これらのデザインスタイルの特徴や実装方法について解説します。
また、それぞれのベストプラクティスについても詳しく説明します。

Materialデザインとは？

概要

Materialデザインは、Googleが提唱するデザインシステムです。
このシステムは、デジタル体験を一貫して高品質に保つためのガイドラインを提供します。

また、必要なコンポーネントやツールも提供されています。
特に、視覚的な一貫性とユーザーインターフェースの使いやすさを重視しています。

Material 3デザイン

Flutterは、最新のMaterial 3デザインをサポートしています。
Material 3は、視覚的、行動的、モーションリッチな要素に重点を置いています。

さらに、より柔軟なテーマ設定やカスタマイズが可能です。
そのため、アプリケーションのデザインをより直感的に調整できます。

ベストプラクティス

レイアウトの調整
画面サイズに応じてコンポーネントの配置を調整することが重要です。
たとえば、カードの向きを変更することで、ユーザーの操作性を向上できます。

デザインとテーマ設定
テーマを共有することで、アプリケーションデザインを簡素化できます。
また、Display、Headline、Title、Body、Labelなどの役割に応じたタイプスタイルを使用します。

実装例

以下は、Materialデザインのダイアログを実装する簡単なコード例です。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp( // ここで MaterialApp を返す
      home: MyHomePage(), // 実際の画面内容は別のウィジェットに移動
    );
  }
}

// 新しく追加する HomePage クラス
class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: const Text('Material Dialog'),
                  content: const Text('This is a Material design dialog.'),
                  actions: <Widget>[
                    TextButton(
                      child: const Text('OK'),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                );
              },
            );
          },
          child: const Text('Show Dialog'),
        ),
      ),
    );
  }
}

Cupertinoデザインとは？

概要

Cupertinoデザインは、AppleのiOSデザインスタイルにインスパイアされたものです。
このデザインは、iOSアプリケーションに自然に溶け込むUIコンポーネントを提供します。

Flutterでは、CupertinoAppやCupertinoPageScaffoldなどのウィジェットを使用できます。
そして、これらを使ってiOSスタイルのアプリケーションを構築できます。

ベストプラクティス

Human Interface Guidelines (HIG)
AppleのHIGに従うことが重要です。
これにより、Appleプラットフォーム上で優れたユーザー体験を提供できます。

カスタムウィジェットの活用
Cupertinoデザインを実現するために、カスタムのスキャフォールドやウィジェットを使用します。
これは一般的な実装方法となっています。

実装例

以下は、Cupertinoデザインのアラートダイアログを実装するコード例です。

import 'package:flutter/cupertino.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp( // MaterialApp から CupertinoApp に変更
      theme: CupertinoThemeData( // Cupertino用のテーマを設定
        primaryColor: CupertinoColors.systemBlue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold( // Scaffold から CupertinoPageScaffold に変更
      navigationBar: const CupertinoNavigationBar( // AppBar から CupertinoNavigationBar に変更
        middle: Text('Cupertino Demo'),
      ),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.only(top: 70), // ナビゲーションバーの下にスペースを追加
          child: CupertinoButton( // ElevatedButton から CupertinoButton に変更
            onPressed: () {
              showCupertinoDialog(
                context: context,
                builder: (BuildContext context) {
                  return CupertinoAlertDialog(
                    title: const Text('Cupertino Dialog'),
                    content: const Text('This is a Cupertino design dialog.'),
                    actions: <Widget>[
                      CupertinoDialogAction(
                        child: const Text('OK'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
            child: const Text('Show Dialog'),
          ),
        ),
      ),
    );
  }
}