Flutter Cupertino (iOS風格) Widgets

https://flutterchina.club/widgets/cupertino/

 

Building a Cupertino app with Flutter

Build a version of the Shrine shopping app (used in the Material Design codelabs) using the Cupertino package to create an iOS style look and feel. Create multiple tabs and navigate between them. Use the provider package to manage state between screens.

 

https://github.com/googlecodelabs/flutter-cupertino-store

 

示例

name: cupertino_store
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  intl: ^0.15.7
  provider: ^2.0.0+1
  shrine_images: ^1.0.0

dev_dependencies:
  pedantic: ^1.4.0
  flutter_test:
    sdk: flutter

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
  - packages/shrine_images/0-0.jpg
  - packages/shrine_images/1-0.jpg
  - packages/shrine_images/2-0.jpg
  - packages/shrine_images/3-0.jpg
  - packages/shrine_images/4-0.jpg
  - packages/shrine_images/5-0.jpg
  - packages/shrine_images/6-0.jpg
  - packages/shrine_images/7-0.jpg
  - packages/shrine_images/8-0.jpg
  - packages/shrine_images/9-0.jpg
  - packages/shrine_images/10-0.jpg
  - packages/shrine_images/11-0.jpg
  - packages/shrine_images/12-0.jpg
  - packages/shrine_images/13-0.jpg
  - packages/shrine_images/14-0.jpg
  - packages/shrine_images/15-0.jpg
  - packages/shrine_images/16-0.jpg
  - packages/shrine_images/17-0.jpg
  - packages/shrine_images/18-0.jpg
  - packages/shrine_images/19-0.jpg
  - packages/shrine_images/20-0.jpg
  - packages/shrine_images/21-0.jpg
  - packages/shrine_images/22-0.jpg
  - packages/shrine_images/23-0.jpg
  - packages/shrine_images/24-0.jpg
  - packages/shrine_images/25-0.jpg
  - packages/shrine_images/26-0.jpg
  - packages/shrine_images/27-0.jpg
  - packages/shrine_images/28-0.jpg
  - packages/shrine_images/29-0.jpg
  - packages/shrine_images/30-0.jpg
  - packages/shrine_images/31-0.jpg
  - packages/shrine_images/32-0.jpg
  - packages/shrine_images/33-0.jpg
  - packages/shrine_images/34-0.jpg
  - packages/shrine_images/35-0.jpg
  - packages/shrine_images/36-0.jpg
  - packages/shrine_images/37-0.jpg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

 

main.dart

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

import 'app.dart';
import 'model/app_state_model.dart';

void main() {
  // This app is designed only to work vertically, so we limit
  // orientations to portrait up and down.
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);

  return runApp(
    ChangeNotifierProvider<AppStateModel>(
      builder: (context) => AppStateModel()..loadProducts(),
      child: CupertinoStoreApp(),
    ),
  );
}

 

app.dart

import 'package:flutter/cupertino.dart';
import 'product_list_tab.dart';   // NEW
import 'search_tab.dart';         // NEW
import 'shopping_cart_tab.dart';  // NEW

class CupertinoStoreApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoStoreHomePage(),
    );
  }
}

class CupertinoStoreHomePage extends StatelessWidget {
  _createNavBarItem(IconData icon, String title) {
    return BottomNavigationBarItem(icon: Icon(icon), title: Text(title));
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: <BottomNavigationBarItem>[
          _createNavBarItem(CupertinoIcons.home, 'Products'),
          _createNavBarItem(CupertinoIcons.search, 'Search'),
          _createNavBarItem(CupertinoIcons.shopping_cart, 'Cart'),
        ],
      ),
      // ignore: missing_return
      tabBuilder: (_, index) {
        switch (index) {
          case 0:
            return CupertinoTabView(builder: (context) {
              return CupertinoPageScaffold(
                child: ProductListTab(),
              );
            });
          case 1:
            return CupertinoTabView(builder: (context) {
              return CupertinoPageScaffold(
                child: SearchTab(),
              );
            });
          case 2:
            return CupertinoTabView(builder: (context) {
              return CupertinoPageScaffold(
                child: ShoppingCartTab(),
              );
            });
        }
      },
    );
  }
}