mirror of
https://github.com/flutter/samples.git
synced 2025-11-10 14:58:34 +00:00
Update web/ samples to work with Flutter SDK (#134)
* add package:http dependency in dad_jokes * add package:http dependency in filipino_cuisine * don't build package:http demos until flutter/flutter#34858 is resolved * update gallery * update github_dataviz * update particle_background * don't build github_dataviz (uses package:http) * update slide_puzzle * update spinning_square * update timeflow * update vision_challenge * update charts * update dad_jokes * update filipino cuisine * ignore build output * update timeflow and vision_challenge * update slide_puzzle * don't commit build/ directory * move preview.png images to assets * fix path url join * update readme * update web/readme.md
This commit is contained in:
John Ryan
GitHub
52
web/gallery/lib/demo/fortnightly/README.md
Normal file
52
web/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
web/gallery/lib/demo/fortnightly/fortnightly.dart
Normal file
236
web/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),
|
||||
const 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: const TextStyle(
|
||||
fontFamily: 'LibreFranklin',
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Colors.black,
|
||||
),
|
||||
);
|
||||
|
||||
return theme;
|
||||
}
|
||||
Reference in New Issue
Block a user