未経験から最短3カ月でプログラマーへ！！【０円スクール】
この記事はで読むことができます。
この記事でわかること
- Cupertinoとは何か
- iOS風のデザインを実現するための基本的なCupertinoウィジェットの使い方
Flutterでは、AndroidとiOSの両方に対応したアプリを簡単に作成できますが、iOS風のデザインを特に意識したアプリを作成する場合、「Cupertino（クパチーノ）」というコンポーネントが役立ちます。この記事では、Flutter初心者向けにCupertinoウィジェットの使い方やiOS風デザインの実現方法を紹介します。この記事を読めば、簡単にiOS風のインターフェースを作成できるようになります。
Cupertinoとは？
Cupertino（クパチーノ）は、FlutterでiOS風のユーザーインターフェースを提供するウィジェット群のことを指します。通常、Flutterでは「マテリアルデザイン」が主流ですが、Cupertinoウィジェットを使うと、iOSアプリのような見た目や操作感を簡単に再現することができます。たとえば、iOS特有のナビゲーションバーやボタン、アニメーションをサポートしています。
ちなみにCupertinoという名称は、Appleの本社所在地であるカリフォルニア州の「クパチーノ市」に由来しています。
ポイント1：CupertinoウィジェットでiOS風ボタンを作成する
Cupertinoボタンは、iOSスタイルのシンプルなボタンを作成するためのウィジェットです。見た目はiOSアプリでよく見られるシンプルなデザインで、触感フィードバックもiOS風になります。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('Cupertino ボタン'),
),
child: Center(
child: CupertinoButton(
child: Text('押してみよう'),
color: CupertinoColors.activeBlue, // iOS風の青色ボタン
onPressed: () {
// ボタンが押されたときの処理
print('ボタンが押されました');
},
),
),
),
);
}
}
iOS風のクリーンでフラットなデザインが特徴です。
ポイント2：CupertinoナビゲーションバーでiOS風のヘッダーを追加する
Cupertinoナビゲーションバーを使えば、iOS風のヘッダーを簡単に追加できます。これにより、アプリのタイトルやボタンをiOSスタイルで表示できます。
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('iOS風ヘッダー'),
trailing: CupertinoButton(
padding: EdgeInsets.zero,
child: Icon(CupertinoIcons.add), // 右上にアイコンボタンを追加
onPressed: () {
// ボタンが押されたときの処理
print('追加ボタンが押されました');
},
),
),
child: Center(
child: Text('CupertinoウィジェットでiOS風デザインを再現'),
),
),
);
}
}
中央にタイトルを配置し、右側にボタンを追加できるなど、iOSの標準的なレイアウトに対応しています。
Cupertinoウィジェットを使うことで、Flutterで簡単にiOS風のユーザーインターフェースを作成することができます。ボタンやナビゲーションバーなどの基本的なコンポーネントから、iOSらしい洗練されたデザインを実現できます。iOS向けアプリを開発する場合や、iOSユーザーに親しみやすいUIを提供したい場合は、Cupertinoウィジェットを活用してみましょう。
【この記事で紹介したCupertinoのポイント】
CupertinoButtonでiOS風のシンプルなボタンを作成
CupertinoNavigationBarでiOS風のナビゲーションバーを追加
ご質問があれば、どうぞお気軽にお尋ねください。
それでは、Happy Fluttering！
