mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
[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.
This commit is contained in:
parent
89f206a67b
commit
57a8b03c5e
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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';
|
||||
|
|
52
examples/flutter_gallery/lib/demo/fortnightly/README.md
Normal file
52
examples/flutter_gallery/lib/demo/fortnightly/README.md
Normal file
|
@ -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)
|
236
examples/flutter_gallery/lib/demo/fortnightly/fortnightly.dart
Normal file
236
examples/flutter_gallery/lib/demo/fortnightly/fortnightly.dart
Normal file
|
@ -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: <Widget>[
|
||||
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: <Widget>[
|
||||
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: <Widget>[
|
||||
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: <Widget>[
|
||||
Row(
|
||||
children: <Widget>[
|
||||
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: <Widget>[
|
||||
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;
|
||||
}
|
|
@ -95,6 +95,14 @@ List<GalleryDemo> _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',
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -22,7 +22,8 @@ import '../runner/flutter_command.dart';
|
|||
/// package version in cases when upgrading to the latest breaks Flutter.
|
||||
const Map<String, String> _kManuallyPinnedDependencies = <String, String>{
|
||||
// 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 {
|
||||
|
|
Loading…
Reference in a new issue