Flutter開発入門14 Cupertinoデザイン

Flutter

はじめに

　Flutterは、クロスプラットフォームで美しいアプリケーションを開発するための強力なフレームワークです。特に、iOSデバイス向けのアプリを開発する際には、Cupertinoデザインのコンポーネントを活用することで、ネイティブのiOSらしいUIを簡単に実現できます。本記事では、Flutterで使用できるCupertinoデザインコンポーネントについて、その基本的な使い方と具体例を解説します。

Cupertinoデザインとは

　Cupertinoデザインは、Appleが提供するiOSアプリのデザインガイドラインに基づいたスタイルです。Flutterには、このCupertinoデザインを簡単に実装するためのWidgetが多数用意されています。これにより、AndroidやiOSといった異なるプラットフォーム間での一貫性を保ちながら、各プラットフォームに最適化されたUIを提供することが可能です。

主なCupertinoデザインコンポーネント

　Flutterには、多数のCupertinoデザインコンポーネントが用意されていますが、ここでは特に重要なものをピックアップして紹介します。

CupertinoApp

　CupertinoAppは、iOS向けのアプリケーションを構築するための基本的なウィジェットです。MaterialAppと同様に、アプリ全体のルートウィジェットとして使用します。

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino App'),
      ),
      child: Center(
        child: Text('Hello, Tech Grow Up!'),
      ),
    );
  }
}

　この例では、CupertinoAppを使って、基本的なiOS風のアプリケーションを作成していす。CupertinoNavigationBarを使って、iOS風のナビゲーションバーを実装しています。

CupertinoPageScaffold

　CupertinoPageScaffoldは、iOSアプリの基本的なレイアウトを構築するためのWidgetです。CupertinoNavigationBarとchildを組み合わせて、ページ全体のレイアウトを設定します。

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('ホーム'),
      ),
      child: Center(
        child: Text('Welcome to Cupertino ページ'),
      ),
    );
  }
}

　この例では、ページ上部にナビゲーションバーを配置し、ページ中央にテキストを表示するレイアウトを作成しています。

CupertinoNavigationBar

　CupertinoNavigationBarは、iOSアプリのトップに表示されるナビゲーションバーを構成するために使用されます。タイトルやナビゲーションボタン、アクションボタンを配置するのに適しています。

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('My Page'),
        leading: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Icon(CupertinoIcons.back),
          onPressed: () {
            // 戻るボタンの処理
          },
        ),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Icon(CupertinoIcons.add),
          onPressed: () {
            // アクションボタンの処理
          },
        ),
      ),
      child: const Center(
        child: Text('Cupertino Navigationページ'),
      ),
    );
  }
}

　ここでは、CupertinoNavigationBarを使用して、iOSスタイルのナビゲーションバーを構築しています。左右に配置されたボタンが、iOSらしい操作感を提供します。

CupertinoButton

　CupertinoButtonは、iOSスタイルのボタンを実装するためのWidgetです。iOSらしい滑らかなアニメーションやタップフィードバックを提供し、ユーザーにネイティブのiOS操作感を与えます。

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: CupertinoButton(
          color: CupertinoColors.activeBlue,
          onPressed: () {},
          child: const Text('押してね'),
        ),
      ),
    );
  }
}

　このコードでは、青い背景色を持つiOSスタイルのボタンを作成しています。ボタンを押すと、指定した処理が実行されます。

CupertinoSwitch

　CupertinoSwitchは、iOSスタイルのトグルスイッチを実装するためのWidgetです。オン/オフの切り替えを視覚的に表示し、設定画面などでよく使われます。

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: CupertinoSwitch(
          value: true,
          onChanged: (bool value) {
            // スイッチの状態が変わった時の処理
          },
        ),
      ),
    );
  }
}

　この例では、CupertinoSwitchを使ってトグルスイッチを実装しています。

CupertinoTabScaffold

　CupertinoTabScaffoldは、iOSスタイルのタブバーを持つページレイアウトを作成するためのWidgetです。複数のタブを持つアプリケーションで、各タブに異なるコンテンツを表示するのに適しています。

import 'package:flutter/cupertino.dart';

void main() {
  runApp(CupertinoApp(
    home: MyHomePage(),
  ));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: 'ホーム',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.settings),
            label: '設定',
          ),
        ],
      ),
      tabBuilder: (BuildContext context, int index) {
        return CupertinoTabView(
          builder: (BuildContext context) {
            if (index == 0) {
              return const Center(child: Text('ホーム Tab'));
            } else {
              return const Center(child: Text('設定 Tab'));
            }
          },
        );
      },
    );
  }
}

　この例では、CupertinoTabScaffoldを使用して、iOSスタイルのタブバー付きページを作成しています。タブを切り替えると、それぞれ異なるコンテンツが表示されます。

まとめ

　FlutterのCupertinoデザインコンポーネントを使うことで、iOSアプリ開発においてネイティブな見た目と操作感を提供することができます。CupertinoAppやCupertinoPageScaffold、CupertinoNavigationBarなどの基本コンポーネントを適切に活用することで、iOSユーザーに馴染み深いUIを簡単に構築できるようになります。これらのコンポーネントをうまく組み合わせて、FlutterでのiOSアプリ開発をよりスムーズに進めてください。

コメント