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.

なぜCupertinoアプリを書くのでしょう？Materialデザイン言語は、Androidだけでなく、あらゆるプラットフォームのために作られました。

 

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

FlutterでMaterialアプリを書くと、iOSを含むすべてのデバイスでMaterialのルック＆フィールを実現します。

 

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

もし、アプリを標準的なiOSスタイルのアプリのように見せたいのであれば、Cupertinoライブラリを使用することになるでしょう。

 

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.

技術的には、CupertinoのアプリはAndroidでもiOSでも実行できますが、（ライセンスの問題で）CupertinoはAndroidでは正しいフォントを持ちません。

 

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

このため、Cupertinoのアプリを書くときは、iOS専用のデバイスを使用してください。

 

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.

商品リスト、商品検索、ショッピングカートの3つのタブを含むCupertinoスタイルのショッピングアプリを実装しましょう。

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.

iOSスタイルのFlutterアプリの作り方。

複数のタブの設置とページ遷移の方法。

複数画面間での状態(state)の管理方法。

---

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.

あなたのパソコンと接続されたiOS実機

• The iOS simulator.

iOSシミュレーター。

You’ll also need:

• A Mac configured with Xcode.

MacとXcode。

---

3. Create the initial Cupertino app

Create the initial app using a CupertinoPageScaffold.

CupertinoPageScaffoldを使ってスタート時点のアプリを作ります。

 

Create a Flutter project called cupertino_store as follows.

下記のようにコマンドを実行してcupertino_storeという名前のFlutterプロジェクトを作ります。

$ 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.

lib/main.dartのコードを置き換えます。Materialテーマのカウンターアプリを生成するデフォルトのlib/main.dartにある全てのコードを消して、下記のコードをコピペしてください。

lib/main.dart

import 'package:flutter/cupertino.dart';

import 'app.dart';

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

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 で全内容を取得できます。

lib/styles.dart

// 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.

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.

lib/app.dartを新規作成し、CupertinoStoreAppクラスを定義します。

lib/app.dart

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

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

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

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

Observations

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

servicesライブラリをインポートします。これによりプラットフォームサービス、つまりクリップボードやデバイスの向きの指定などが可能になります。

 

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

CupertinoAppをインスタンス化します。CupertinoAppはtheme、navigation(ページ遷移)、テキストの方向、など、iOSユーザーが期待するようなアプリを作るために必要なものを提供します。

 

• Instantiates a CupertinoStoreHomePage as the homepage.

CupertinoStoreHomePageをホームページとしてインスタンス化します。

 

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

このアプリは縦向き方向のみで実行させたいので、デバイスの方向(orientation)をportraitに指定します。

---

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

下記のCupertinoStoreHomePageクラスの定義をlib/app.dartに追加します。

lib/app.dart

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

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

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.

このページはタイトルと空のコンテナ(SizedBox)を保持しています。

---

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

Flutterのパッケージ依存関係をアップデートします。下記のコマンドをプロジェクトのトップレベルで実行してください。

$ flutter pub add intl

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

intlパッケージは最後のステップでフォーマットに使用されます。

 

$ flutter pub add provider

providerパッケージは状態管理で使用されます。

 

$ flutter pub add shrine_images

shrine_imagesパッケージは画像アセットとして使用されます。

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

画像にアクセスするためにpubspec.yamlファイルのflutterセクションに下記のコードを記述してください。

pubspec.yaml

Observations

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

これは、店舗に配置するための製品を含む、shrine_imagesを含むいくつかのパッケージをインストールします。

 

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

providerパッケージはシンプルな状態管理の方法を提供します。

 

• The intl package provides internationalization and localization facilities.

intlパッケージは国際化とlocalizationの機能を提供します。

 

• 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:

実行すると、Cupertinoナビゲーションバーとタイトルを含む下記の画面が表示されるはずです。

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

もし正しく動かない場合は、誤植(typo)を探しましょう。必要なら下記のリンクのコードを利用して正しい道に復帰しましょう。

• pubspec.yaml
• lib/app.dart
• lib/main.dart
• lib/styles.dart

工事中🏗

参考

https://codelabs.developers.google.com/codelabs/flutter-cupertino#0