2022/5/23/Flutter/Building a Cupertino app with Flutterの訳



Cupertino app with Flutter

1. Introduction

Welcome to the Flutter Cupertino codelab!

In this codelab, you’ll create a Cupertino (iOS-style) app using Flutter. The Flutter SDK ships with two styled widget libraries (in addition to the basic widget library):

Flutter Cupertinoコードラボへようこそ。

このコードラボでは、FlutterでのCupertino(iOSスタイル)アプリを作ります。Flutter SDKは(基本のwidgetライブラリに加えて)二つのスタイルのweidgetライブラリを提供しています。

  • Material widgets implements the Material design language for iOS, Android, web, and desktop.

Material widgetsはiOS、Android、web、そしてdesktop向けのMaterial design言語を実装しています。


  • Cupertino widgets implements the current iOS design language based on Apple’s Human Interface Guidelines.

Cupertino widgetsはAppleのHuman interface Guidelinesに則った現在のiOSデザイン言語を実装しています。


Why write a Cupertino app? The Material design language was created for any platform, not just Android.



When you write a Material app in Flutter, it has the Material look and feel on all devices, even iOS.



If you want your app to look like a standard iOS-styled app, then you would use the Cupertino library.



You can technically run a Cupertino app on either Android or iOS, but (due to licensing issues) Cupertino won’t have the correct fonts on Android.



For this reason, use an iOS-specific device when writing a Cupertino app.



You’ll implement a Cupertino style shopping app containing three tabs: one for the product list, one for a product search, and one for the shopping cart.



What you’ll learn in this codelab

  • How to build a Flutter app with an iOS style look and feel.
  • How to create multiple tabs and navigate between them.
  • How to use the provider package to manage state between screens.




2. Set up your Flutter environment

You need two pieces of software to complete this lab: the Flutter SDK and an editor. You can use your preferred editor, such as Android Studio or IntelliJ with the Flutter and Dart plugins installed, or Visual Studio Code with the Dart Code and Flutter extensions.

このラボを完了するには、Flutter SDKとエディターの2つのソフトウェアが必要です。FlutterとDartプラグインをインストールしたAndroid StudioやIntelliJ、Dart CodeとFlutter拡張をインストールしたVisual Studio Codeなど、お好みのエディターを使用することができます。


You can run this codelab using one of the following devices:


  • A physical iOS device connected to your computer.



You’ll also need:

  • A Mac configured with Xcode.


3. Create the initial Cupertino app

Create the initial app using a CupertinoPageScaffold.



Create a Flutter project called cupertino_store as follows.


$ flutter create cupertino_store
$ cd cupertino_store

Replace the contents of lib/main.dart. Delete all of the code from lib/main.dart, which creates a Material-themed button counting app. Replace with the following code, which initializes a Cupertino app.



import 'package:flutter/cupertino.dart';

import 'app.dart';

void main() {
  return runApp(const CupertinoStoreApp());

71dd22da186608e5.png Observations

  • Import the Cupertino package. This makes all the Cupertino widgets and constants available to your app.

Cupertinoパッケージをインポートしましょう。これで全てのCupertino widgetsと定数をあなたのアプリで利用できるようになります。

Create lib/styles.dart. Add a file to the lib directory called styles.dart. The Styles class defines the text and color styling to customize the app. Here is a sample of the file, but you can get the full content on GitHub:

lib/styles.dartを作成します。lib ディレクトリに styles.dart という名前のファイルを追加します。Styles クラスは、アプリをカスタマイズするためのテキストと色のスタイリングを定義します。以下はファイルのサンプルですが、GitHub で全内容を取得できます。


// THIS IS A SAMPLE FILE. Get the full content at the link above.
import 'package:flutter/cupertino.dart';
import 'package:flutter/widgets.dart';

abstract class Styles {
  static const TextStyle productRowItemName = TextStyle(
    color: Color.fromRGBO(0, 0, 0, 0.8),
    fontSize: 18,
    fontStyle: FontStyle.normal,
    fontWeight: FontWeight.normal,
 // ...
// THIS IS A SAMPLE FILE. Get the full content at the link above.

71dd22da186608e5.png Observations

  • We can centralize style definitions in a way that is similar to how web developers centralize their style markup in CSS files by grouping all of our definitions in a single file. This gives us the easiest way to reuse and redefine styles across the whole app.

Web 開発者がスタイル マークアップを CSS ファイルに一元化する方法と同様に、すべての定義を 1 つのファイルにまとめて、スタイル定義を一元化することができます。これにより、アプリ全体にわたってスタイルを再利用したり再定義したりするための最も簡単な方法が提供されます。

Create lib/app.dart and add the CupertinoStoreApp class. Add the following CupertinoStoreApp class to lib/app.dart.



import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';

class CupertinoStoreApp extends StatelessWidget {
  const CupertinoStoreApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    // This app is designed only to work vertically, so we limit
    // orientations to portrait up and down.
        [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: CupertinoStoreHomePage(),

71dd22da186608e5.png Observations

  • Import the services library. This makes the platform services, like the clipboard and setting the device orientation, available to your app.



  • Instantiates CupertinoApp, which provides theming, navigation, text direction, and other defaults required to create an app that an iOS user expects.



  • Instantiates a CupertinoStoreHomePage as the homepage.



  • The app is designed to only work vertically, so the device orientation is limited to portrait.


Add the CupertinoStoreHomePage class. Add the following CupertinoStoreHomePage class to lib/app.dartto create the layout for the homepage.



class CupertinoStoreHomePage extends StatelessWidget {
  const CupertinoStoreHomePage({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Cupertino Store'),
      child: SizedBox(),

71dd22da186608e5.png Observations

  • The Cupertino package provides two types of page scaffolds. CupertinoPageScaffold supports single pages and accepts a Cupertino-style navigation bar, background color, and holds the widget tree for the page. You’ll learn about the second type of scaffold in the next step.

Cupertinoパッケージは2種類のページ・Scaffoldを提供します。CupertinoPageScaffold は単一ページをサポートし、Cupertino スタイルのナビゲーションバー、背景色を受け入れ、ページのウィジェットツリーを保持します。次のステップでは、2つ目のタイプのScaffoldについて学びます。


  • This page has a title, and the widget tree contains a single empty container.


Update the Flutter package dependencies. Add Flutter package dependencies by running the following commands at the top level of your project.


$ flutter pub add intl

The intl package will be used in the last step for formatting.



$ flutter pub add provider



$ flutter pub add shrine_images


To access the images, add the following lines to the flutter section of your pubspec.yaml file.



71dd22da186608e5.png Observations

  • This pulls in several packages, including shrine_images, containing products for populating the store.



  • The provider package provides a simple way to manage state across screens.



  • The intl package provides internationalization and localization facilities.



  • The cupertino_icons package contains icon assets for the Cupertino widgets.

cupertino_iconsパッケージはCupertino widgets用のiconアセットのパッケージです。


Run the app. You should see the following white screen containing the Cupertino navbar and a title:



If your app is not running correctly, look for typos. If needed, use the code at the following links to get back on track.






メールアドレスが公開されることはありません。 が付いている欄は必須項目です