Flutter の Cupertino ライブラリを使用して、iOS ネイティブアプリの外観と操作感を構築する

2年 ago
蓮, 翼
1 minute

FlutterのCupertinoライブラリは、iOSネイティブアプリの見た目を作り出すことができるウィジェットを提供しています。以下に、Cupertinoライブラリを使用する方法を示します。

  1. アプリのルートウィジェットとしてCupertinoAppを使用することで、iOSスタイルの見た目のナビゲーションバーを提供します。
import 'package:flutter/cupertino.dart';
void main() {
runApp(CupertinoApp(
home: MyApp(),
));
}
  1. iOSスタイルのページレイアウト、つまりナビゲーションバーやコンテンツ領域などを提供するCupertinoPageScaffoldをページのルートウィジェットとして使用します。
import 'package:flutter/cupertino.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('My App'),
),
child: Center(
child: Text('Hello, World!'),
),
);
}
}
  1. iOSスタイルの外観とインタラクションを備えたCupertinoButton、CupertinoTextField、CupertinoActivityIndicatorなどのウィジェットを使用します。
import 'package:flutter/cupertino.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('My App'),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CupertinoButton(
child: Text('Button'),
onPressed: () {},
),
CupertinoTextField(
placeholder: 'Enter text',
),
CupertinoActivityIndicator(),
],
),
),
);
}
}
  1. CupertinoAlertDialogを使ってiOS風のダイアログを作成する。
import 'package:flutter/cupertino.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text('My App'),
),
child: Center(
child: CupertinoButton(
child: Text('Show Alert'),
onPressed: () {
showCupertinoDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('Alert'),
content: Text('This is an alert dialog.'),
actions: [
CupertinoDialogAction(
child: Text('OK'),
onPressed: () {
Navigator.pop(context);
},
),
],
);
},
);
},
),
),
);
}
}

Cupertinoライブラリを使用すれば、見た目も動作もネイティブなiOSアプリを構築するための一般的な手法があります。開発者は、自身のニーズに合ったウィジェットやスタイルを選択することで、iOSスタイルのインターフェースを作成することができます。

bannerAds