FlutterのCupertinoAppは、iOSのUIスタイルに基づいたウィジェットを提供するFlutterのフレームワークの一部です。これらのウィジェットは、iOSアプリケーションを構築する際に便利であり、別のウィジットである、MaterialAppと同様、Flutterアプリケーションの最上位に配置されます。
Cupertinoアプリケーションの作成
Cupertinoアプリケーションを作成するには、CupertinoAppウィジェットを使用します。これは、標準のMaterialAppウィジェットと似ていますが、Cupertinoスタイルでレンダリングされます。
以下は、基本的なCupertinoアプリケーションの例です。
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'My App',
home: CupertinoPageScaffold(
child: Center(
child: Text('Hello, World!'),
),
),
);
}
}
Cupertinoのウィジェット
Cupertinoには、iOSアプリケーションに必要なさまざまなウィジェットが用意されています。以下に、いくつかの例を示します。
CupertinoButton
CupertinoButtonウィジェットは、iOSスタイルのボタンを作成するために使用されます。以下は、基本的なCupertinoButtonウィジェットの例です。
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoApp(
title: 'My App',
home: CupertinoPageScaffold(
child: Center(
child: CupertinoButton(
child: Text('Button'),
onPressed: () {
// ボタンがタップされたときに行われる処理
},
)),
),
);
}
}
CupertinoTextField
CupertinoTextFieldウィジェットは、iOSスタイルのテキスト入力フィールドを作成するために使用されます。以下は、基本的なCupertinoTextFieldウィジェットの例です。
CupertinoTextField(
placeholder: 'Enter your text here',
onChanged: (value) {
// テキストが変更されたときに行われる処理
},
)
CupertinoSwitch
CupertinoSwitchウィジェットは、iOSスタイルのスイッチを作成するために使用されます。以下は、基本的なCupertinoSwitchウィジェットの例です。
CupertinoSwitch(
value: true,
onChanged: (value) {
// スイッチの値が変更されたときに行われる処理
},
)
CupertinoNavigationBar
CupertinoNavigationBarウィジェットは、iOSスタイルのナビゲーションバーを作成するために使用されます。以下は、基本的なCupertinoNavigationBarウィジェットの例です。
CupertinoNavigationBar(
middle: Text('Title'),
trailing: CupertinoButton(
child: Text('Button'),
onPressed: () {
// ボタンがタップされたときに行われる処理
},
),
)
CupertinoTabBar
CupertinoTabBarウィジェットは、iOSスタイルのタブバーを作成するために使用されます。以下は、基本的なCupertinoTabBarウィジェットの例です。
CupertinoTabBar(
items: [
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.profile_circled),
label: 'Profile',
),
],
onTap: (index) {
// タブがタップされたときに行われる処理
},
)
Cupertinoのテーマ
Cupertinoアプリケーションで使用されるテーマを変更することもできます。以下は、Cupertinoテーマを変更する方法の例です。
return CupertinoApp(
title: 'My App',
theme: CupertinoThemeData(
brightness: Brightness.light,
primaryColor: Colors.blue,
scaffoldBackgroundColor: Colors.white,
),
home: CupertinoPageScaffold(
child: Center(
child: Text('Hello, World!'),
),
),
);
まとめ
FlutterのCupertinoフレームワークを使用すると、iOSアプリケーションの開発が簡単になります。Cupertinoウィジェットを使用してiOSスタイルのUIを作成し、Cupertinoテーマを使用してアプリケーションの見た目を変更できます。FlutterのCupertinoは、iOSアプリケーションを作成するための重要なツールの1つです。