From 57a8b03c5e7b5a14ba4648e209bece3c4173a83c Mon Sep 17 00:00:00 2001 From: Will Larche Date: Sun, 24 Feb 2019 11:53:43 +0100 Subject: [PATCH] [Gallery] Fortnightly demo moved from flutter/samples. (#28125) * [Gallery] Fortnightly demo moved from flutter/samples. * [Gallery] Fortnightly analysis corrections. * [Gallery] Minor rename. * [Gallery] Making floats ints. * [Gallery] Fortnightly minor visual polish. * [Gallery] Formatting. * [Gallery] Upping package version for gallery to support fortnightly demo. * [Gallery] Fortnightly copy correction. * [Gallery] Fortnightly study polish. * [Gallery] Fortnightly polish. * [Gallery] Fortnightly copy correction. * [Gallery] Fortnightly copy now held in '''. * [Gallery] Fortnightly comment. * [Gallery] Updates necessary when flutter_gallery_assets updates. * [Gallery] Updating macrobenchmarks because we updated flutter_gallery_assets. * [Gallery] Moving spaces to beginning of copy lines. * [Gallery] Copy correction. * [Gallery] Adding tooltip to satisfy smoke test. * [Gallery] Minor pr feedback. * [Gallery] Forced upgrade. --- dev/benchmarks/complex_layout/pubspec.yaml | 4 +- dev/benchmarks/macrobenchmarks/pubspec.yaml | 4 +- examples/flutter_gallery/lib/demo/all.dart | 1 + .../lib/demo/fortnightly/README.md | 52 ++++ .../lib/demo/fortnightly/fortnightly.dart | 236 ++++++++++++++++++ .../flutter_gallery/lib/gallery/demos.dart | 8 + examples/flutter_gallery/pubspec.yaml | 18 +- .../lib/src/commands/update_packages.dart | 3 +- 8 files changed, 319 insertions(+), 7 deletions(-) create mode 100644 examples/flutter_gallery/lib/demo/fortnightly/README.md create mode 100644 examples/flutter_gallery/lib/demo/fortnightly/fortnightly.dart diff --git a/dev/benchmarks/complex_layout/pubspec.yaml b/dev/benchmarks/complex_layout/pubspec.yaml index 524c28dd8c..69b37b566e 100644 --- a/dev/benchmarks/complex_layout/pubspec.yaml +++ b/dev/benchmarks/complex_layout/pubspec.yaml @@ -15,7 +15,7 @@ dependencies: # //packages/flutter_tools/lib/src/commands/update_packages.dart # and run # flutter update-packages --force-upgrade - flutter_gallery_assets: 0.1.6 + flutter_gallery_assets: 0.1.8 async: 2.0.8 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade" charcode: 1.1.2 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade" @@ -85,4 +85,4 @@ flutter: - packages/flutter_gallery_assets/people/square/ali.png - packages/flutter_gallery_assets/places/india_chettinad_silk_maker.png -# PUBSPEC CHECKSUM: 10f8 +# PUBSPEC CHECKSUM: 6efa diff --git a/dev/benchmarks/macrobenchmarks/pubspec.yaml b/dev/benchmarks/macrobenchmarks/pubspec.yaml index 503716842d..04ba5b28ce 100644 --- a/dev/benchmarks/macrobenchmarks/pubspec.yaml +++ b/dev/benchmarks/macrobenchmarks/pubspec.yaml @@ -15,7 +15,7 @@ dependencies: # //packages/flutter_tools/lib/src/commands/update_packages.dart # and run # flutter update-packages --force-upgrade - flutter_gallery_assets: 0.1.6 + flutter_gallery_assets: 0.1.8 async: 2.0.8 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade" charcode: 1.1.2 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade" @@ -82,4 +82,4 @@ dev_dependencies: flutter: uses-material-design: true -# PUBSPEC CHECKSUM: 10f8 +# PUBSPEC CHECKSUM: 6efa diff --git a/examples/flutter_gallery/lib/demo/all.dart b/examples/flutter_gallery/lib/demo/all.dart index 93d03fe0d1..e2a6d05632 100644 --- a/examples/flutter_gallery/lib/demo/all.dart +++ b/examples/flutter_gallery/lib/demo/all.dart @@ -7,6 +7,7 @@ export 'calculator_demo.dart'; export 'colors_demo.dart'; export 'contacts_demo.dart'; export 'cupertino/cupertino.dart'; +export 'fortnightly/fortnightly.dart'; export 'images_demo.dart'; export 'material/material.dart'; export 'pesto_demo.dart'; diff --git a/examples/flutter_gallery/lib/demo/fortnightly/README.md b/examples/flutter_gallery/lib/demo/fortnightly/README.md new file mode 100644 index 0000000000..45c2203348 --- /dev/null +++ b/examples/flutter_gallery/lib/demo/fortnightly/README.md @@ -0,0 +1,52 @@ +# Fortnightly + +A Flutter sample app based on the Material study Fortnightly (a hypothetical, online newspaper.) It +showcases print-quality, custom typography, Material Theming, and text-heavy UI design and layout. + +For info on the Fortnightly Material Study, see: https://material.io/design/material-studies/fortnightly.html + +## Goals for this sample + +* Help you understand how to customize and layout text. +* Provide you with example code for + * Text + * A short app bar (the menu button top left.) + * Avatar images + +## Widgets / APIs + +* BeveledRectangleBorder +* BoxConstraints on Container +* CircleAvatar +* ExactAssetImage +* Fonts +* SafeArea +* Stack +* SingleChildScrollView +* Text +* TextStyle +* TextTheme + +## Notice + +* Theming is passed as a parameter in the constructor of `MaterialApp` (`theme:`). +* `SafeArea` adds padding around notches and virtual home buttons on screens that have them (like + iPhone X+). Here, it protects the `ShortAppBar` from overlapping with the status bar (time) + and makes sure the bottom of the newspaper article has padding beneath it if necessary. +* The entire newspaper article is wrapped in a `SingleChildScrollView` widget which ensures that the + entire article can be viewed no matter what the screen's size or orientation is. +* The `Text` widget with text ' ¬ ' has a `TextStyle` that changes one parameter of an inherited + `TextStyle` using `.apply()``. +* The `Text` widget with text 'Connor Eghan' has a `TextStyle` created explicitly instead of + inheriting from theming. +* You can break up long strings in your source files by putting them on multiple lines. +* Fonts are imported with multiple files expressing their weights (Bold, Light, Medium, Regular) + but are accessed with a `FontWeight` value like `FontWeight.w800` for Merriweather-Bold.ttf. + +## Questions/issues + +If you have a general question about developing in Flutter, the best places to go are: + +* [The FlutterDev Google Group](https://groups.google.com/forum/#!forum/flutter-dev) +* [The Flutter Gitter channel](https://gitter.im/flutter/flutter) +* [StackOverflow](https://stackoverflow.com/questions/tagged/flutter) diff --git a/examples/flutter_gallery/lib/demo/fortnightly/fortnightly.dart b/examples/flutter_gallery/lib/demo/fortnightly/fortnightly.dart new file mode 100644 index 0000000000..3e86547c07 --- /dev/null +++ b/examples/flutter_gallery/lib/demo/fortnightly/fortnightly.dart @@ -0,0 +1,236 @@ +// Copyright 2019 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'package:flutter/material.dart'; + +class FortnightlyDemo extends StatelessWidget { + static const String routeName = '/fortnightly'; + + @override + Widget build(BuildContext context) { + return MaterialApp( + title: 'Fortnightly Demo', + theme: _fortnightlyTheme, + home: Scaffold( + body: Stack( + children: [ + FruitPage(), + SafeArea( + child: ShortAppBar( + onBackPressed: () { + Navigator.pop(context); + }, + ), + ), + ], + ), + ), + ); + } +} + +class ShortAppBar extends StatelessWidget { + const ShortAppBar({ this.onBackPressed }); + + final VoidCallback onBackPressed; + + @override + Widget build(BuildContext context) { + return SizedBox( + width: 96, + height: 50, + child: Material( + color: Theme.of(context).colorScheme.surface, + elevation: 4, + shape: const BeveledRectangleBorder( + borderRadius: BorderRadius.only(bottomRight: Radius.circular(22)), + ), + child: Row( + children: [ + IconButton( + icon: const Icon(Icons.arrow_back), + tooltip: 'Back', + onPressed: onBackPressed, + ), + const SizedBox(width: 12), + Image.asset( + 'logos/fortnightly/fortnightly_logo.png', + package: 'flutter_gallery_assets', + ), + ], + ), + ), + ); + } +} + +class FruitPage extends StatelessWidget { + static final String paragraph1 = '''Have you ever held a quince? It\'s strange; + covered in a fuzz somewhere between peach skin and a spider web. And it\'s + hard as soft lumber. You\'d be forgiven for thinking it\'s veneered Larch-wood. + But inhale the aroma and you\'ll instantly know you have something wonderful. + Its scent can fill a room for days. And all this before you\'ve even cooked it. +'''.replaceAll('\n', ''); + + static final String paragraph2 = '''Pomegranates on the other hand have become + almost ubiquitous. You can find its juice in any bodega, Walmart, and even some + gas stations. But at what cost? The pomegranate juice craze of the aughts made + \"megafarmers\" Lynda and Stewart Resnick billions. Unfortunately, it takes a lot + of water to make that much pomegranate juice. Water the Resnicks get from their + majority stake in the Kern Water Bank. How did one family come to hold control + over water meant for the whole central valley of California? The story will shock you. +'''.replaceAll('\n', ''); + + @override + Widget build(BuildContext context) { + final TextTheme textTheme = Theme.of(context).primaryTextTheme; + + return SingleChildScrollView( + child: SafeArea( + top: false, + child: Container( + color: Theme.of(context).colorScheme.surface, + child: Column( + children: [ + Container( + constraints: const BoxConstraints.expand(height: 248), + child: Image.asset( + 'food/fruits.png', + package: 'flutter_gallery_assets', + fit: BoxFit.fitWidth, + ), + ), + const SizedBox(height: 17), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 8), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Text( + 'US', + style: textTheme.overline, + ), + Text( + ' ¬ ', + // TODO(larche): Replace textTheme.display3.color with a ColorScheme value when known. + style: textTheme.overline.apply(color: textTheme.display3.color) + ), + Text( + 'CULTURE', + style: textTheme.overline, + ), + ], + ), + const SizedBox(height: 10), + Text( + 'Quince for Wisdom, Persimmon for Luck, Pomegranate for Love', + style: textTheme.display1, + ), + const SizedBox(height: 10), + Text( + 'How these crazy fruits sweetened our hearts, relationships,' + 'and puffed pastries', + style: textTheme.body1, + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 16), + child: Row( + children: [ + CircleAvatar( + backgroundImage: ExactAssetImage( + 'people/square/trevor.png', + package: 'flutter_gallery_assets', + ), + radius: 20, + ), + const SizedBox(width: 12), + Text( + 'by', + style: textTheme.display3, + ), + const SizedBox(width: 4), + Text( + 'Connor Eghan', + style: TextStyle( + fontFamily: 'Merriweather', + fontSize: 18, + fontWeight: FontWeight.w500, + color: Colors.black, + ), + ) + ], + ), + ), + Text( + '$paragraph1\n\n$paragraph2', + style: textTheme.body2, + ), + ], + ), + ) + ], + ), + ), + ), + ); + } +} + +final ThemeData _fortnightlyTheme = _buildFortnightlyTheme(); + +ThemeData _buildFortnightlyTheme() { + final ThemeData base = ThemeData.light(); + return base.copyWith( + primaryTextTheme: _buildTextTheme(base.primaryTextTheme), + scaffoldBackgroundColor: Colors.white, + ); +} + +TextTheme _buildTextTheme(TextTheme base) { + TextTheme theme = base.apply(bodyColor: Colors.black); + theme = theme.apply(displayColor: Colors.black); + + theme = theme.copyWith( + display1: base.display1.copyWith( + fontFamily: 'Merriweather', + fontStyle: FontStyle.italic, + fontSize: 28, + fontWeight: FontWeight.w800, + color: Colors.black, + height: .88, + ), + display3: base.display3.copyWith( + fontFamily: 'LibreFranklin', + fontSize: 18, + fontWeight: FontWeight.w500, + color: Colors.black.withAlpha(153), + ), + headline: base.headline.copyWith(fontWeight: FontWeight.w500), + body1: base.body1.copyWith( + fontFamily: 'Merriweather', + fontSize: 14, + fontWeight: FontWeight.w300, + color: const Color(0xFF666666), + height: 1.11, + ), + body2: base.body2.copyWith( + fontFamily: 'Merriweather', + fontSize: 16, + fontWeight: FontWeight.w300, + color: const Color(0xFF666666), + height: 1.4, + letterSpacing: .25, + ), + overline: TextStyle( + fontFamily: 'LibreFranklin', + fontSize: 10, + fontWeight: FontWeight.w700, + color: Colors.black, + ), + ); + + return theme; +} diff --git a/examples/flutter_gallery/lib/gallery/demos.dart b/examples/flutter_gallery/lib/gallery/demos.dart index 63b8934ece..bc5c36b5ae 100644 --- a/examples/flutter_gallery/lib/gallery/demos.dart +++ b/examples/flutter_gallery/lib/gallery/demos.dart @@ -95,6 +95,14 @@ List _buildGalleryDemos() { routeName: ShrineDemo.routeName, buildRoute: (BuildContext context) => const ShrineDemo(), ), + GalleryDemo( + title: 'Fortnightly', + subtitle: 'Newspaper typography app', + icon: GalleryIcons.custom_typography, + category: _kDemos, + routeName: FortnightlyDemo.routeName, + buildRoute: (BuildContext context) => FortnightlyDemo(), + ), GalleryDemo( title: 'Contact profile', subtitle: 'Address book entry with a flexible appbar', diff --git a/examples/flutter_gallery/pubspec.yaml b/examples/flutter_gallery/pubspec.yaml index c5041a8f8f..fa9bdada1b 100644 --- a/examples/flutter_gallery/pubspec.yaml +++ b/examples/flutter_gallery/pubspec.yaml @@ -19,7 +19,7 @@ dependencies: shrine_images: 1.1.1 # Also update dev/benchmarks/complex_layout/pubspec.yaml - flutter_gallery_assets: 0.1.6 + flutter_gallery_assets: 0.1.8 charcode: 1.1.2 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade" meta: 1.1.6 # THIS LINE IS AUTOGENERATED - TO UPDATE USE "flutter update-packages --force-upgrade" @@ -92,6 +92,7 @@ flutter: - lib/gallery/example_code.dart - packages/flutter_gallery_assets/people/ali_landscape.png - packages/flutter_gallery_assets/logos/flutter_white/logo.png + - packages/flutter_gallery_assets/logos/fortnightly/fortnightly_logo.png - packages/flutter_gallery_assets/videos/bee.mp4 - packages/flutter_gallery_assets/videos/butterfly.mp4 - packages/flutter_gallery_assets/animated_images/animated_flutter_lgtm.gif @@ -99,6 +100,7 @@ flutter: - packages/flutter_gallery_assets/food/butternut_squash_soup.png - packages/flutter_gallery_assets/food/cherry_pie.png - packages/flutter_gallery_assets/food/chopped_beet_leaves.png + - packages/flutter_gallery_assets/food/fruits.png - packages/flutter_gallery_assets/food/pesto_pasta.png - packages/flutter_gallery_assets/food/roasted_chicken.png - packages/flutter_gallery_assets/food/spanakopita.png @@ -241,5 +243,17 @@ flutter: weight: 500 - asset: packages/flutter_gallery_assets/fonts/private/googlesans/GoogleSansDisplay-Regular.ttf weight: 400 + - family: LibreFranklin + fonts: + - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Bold.ttf + - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Light.ttf + - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Medium.ttf + - asset: packages/flutter_gallery_assets/fonts/librefranklin/LibreFranklin-Regular.ttf + - family: Merriweather + fonts: + - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-BlackItalic.ttf + - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Italic.ttf + - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Regular.ttf + - asset: packages/flutter_gallery_assets/fonts/merriweather/Merriweather-Light.ttf -# PUBSPEC CHECKSUM: 7b5d +# PUBSPEC CHECKSUM: 8f5f diff --git a/packages/flutter_tools/lib/src/commands/update_packages.dart b/packages/flutter_tools/lib/src/commands/update_packages.dart index cfd678a4c7..af01cd4f25 100644 --- a/packages/flutter_tools/lib/src/commands/update_packages.dart +++ b/packages/flutter_tools/lib/src/commands/update_packages.dart @@ -22,7 +22,8 @@ import '../runner/flutter_command.dart'; /// package version in cases when upgrading to the latest breaks Flutter. const Map _kManuallyPinnedDependencies = { // Add pinned packages here. - 'flutter_gallery_assets': '0.1.6', // See //examples/flutter_gallery/pubspec.yaml + 'flutter_gallery_assets': '0.1.8', // See //examples/flutter_gallery/pubspec.yaml + 'json_schema': '1.0.10', }; class UpdatePackagesCommand extends FlutterCommand {