mirror of
https://github.com/flutter/samples.git
synced 2025-11-11 07:18:15 +00:00
550 lines
15 KiB
Dart
550 lines
15 KiB
Dart
// Copyright 2019 The Flutter team. 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';
|
|
import 'package:gallery/data/gallery_options.dart';
|
|
import 'package:gallery/layout/text_scale.dart';
|
|
import 'package:gallery/l10n/gallery_localizations.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:intl/intl.dart';
|
|
|
|
class ArticleData {
|
|
ArticleData({this.imageUrl, this.category, this.title, this.snippet});
|
|
|
|
final String imageUrl;
|
|
final String category;
|
|
final String title;
|
|
final String snippet;
|
|
}
|
|
|
|
class HorizontalArticlePreview extends StatelessWidget {
|
|
HorizontalArticlePreview({this.data, this.minutes});
|
|
|
|
final ArticleData data;
|
|
final int minutes;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
TextTheme textTheme = Theme.of(context).textTheme;
|
|
return Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
data.category,
|
|
style: textTheme.subhead,
|
|
),
|
|
SizedBox(height: 12),
|
|
Text(
|
|
data.title,
|
|
style: textTheme.headline.copyWith(fontSize: 16),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (minutes != null) ...[
|
|
Text(
|
|
GalleryLocalizations.of(context).craneMinutes(minutes),
|
|
style: textTheme.body2,
|
|
),
|
|
SizedBox(width: 8),
|
|
],
|
|
Image.asset(
|
|
data.imageUrl,
|
|
fit: BoxFit.cover,
|
|
excludeFromSemantics: true,
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class VerticalArticlePreview extends StatelessWidget {
|
|
VerticalArticlePreview({
|
|
this.data,
|
|
this.width,
|
|
this.headlineTextStyle,
|
|
this.showSnippet = false,
|
|
});
|
|
|
|
final ArticleData data;
|
|
final double width;
|
|
final TextStyle headlineTextStyle;
|
|
final bool showSnippet;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
TextTheme textTheme = Theme.of(context).textTheme;
|
|
|
|
return SizedBox(
|
|
width: width ?? double.infinity,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: Image.asset(
|
|
data.imageUrl,
|
|
fit: BoxFit.fitWidth,
|
|
excludeFromSemantics: true,
|
|
),
|
|
),
|
|
SizedBox(height: 12),
|
|
Text(
|
|
data.category,
|
|
style: textTheme.subhead,
|
|
),
|
|
SizedBox(height: 12),
|
|
Text(
|
|
data.title,
|
|
style: headlineTextStyle ?? textTheme.headline,
|
|
),
|
|
if (showSnippet) ...[
|
|
SizedBox(height: 4),
|
|
Text(
|
|
data.snippet,
|
|
style: textTheme.body1,
|
|
),
|
|
],
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
List<Widget> buildArticlePreviewItems(BuildContext context) {
|
|
Widget articleDivider = Container(
|
|
margin: const EdgeInsets.symmetric(vertical: 16),
|
|
color: Colors.black.withOpacity(0.07),
|
|
height: 1,
|
|
);
|
|
Widget sectionDivider = Container(
|
|
margin: const EdgeInsets.symmetric(vertical: 16),
|
|
color: Colors.black.withOpacity(0.2),
|
|
height: 1,
|
|
);
|
|
TextTheme textTheme = Theme.of(context).textTheme;
|
|
|
|
return <Widget>[
|
|
VerticalArticlePreview(
|
|
data: ArticleData(
|
|
imageUrl: 'assets/fortnightly/fortnightly_healthcare.jpg',
|
|
category:
|
|
GalleryLocalizations.of(context).fortnightlyMenuWorld.toUpperCase(),
|
|
title: GalleryLocalizations.of(context).fortnightlyHeadlineHealthcare,
|
|
),
|
|
headlineTextStyle: textTheme.headline.copyWith(fontSize: 20),
|
|
),
|
|
articleDivider,
|
|
HorizontalArticlePreview(
|
|
data: ArticleData(
|
|
imageUrl: 'assets/fortnightly/fortnightly_war.png',
|
|
category: GalleryLocalizations.of(context)
|
|
.fortnightlyMenuPolitics
|
|
.toUpperCase(),
|
|
title: GalleryLocalizations.of(context).fortnightlyHeadlineWar,
|
|
),
|
|
),
|
|
articleDivider,
|
|
HorizontalArticlePreview(
|
|
data: ArticleData(
|
|
imageUrl: 'assets/fortnightly/fortnightly_gas.png',
|
|
category:
|
|
GalleryLocalizations.of(context).fortnightlyMenuTech.toUpperCase(),
|
|
title: GalleryLocalizations.of(context).fortnightlyHeadlineGasoline,
|
|
),
|
|
),
|
|
sectionDivider,
|
|
Text(
|
|
GalleryLocalizations.of(context).fortnightlyLatestUpdates,
|
|
style: textTheme.title,
|
|
),
|
|
articleDivider,
|
|
HorizontalArticlePreview(
|
|
data: ArticleData(
|
|
imageUrl: 'assets/fortnightly/fortnightly_army.png',
|
|
category: GalleryLocalizations.of(context)
|
|
.fortnightlyMenuPolitics
|
|
.toUpperCase(),
|
|
title: GalleryLocalizations.of(context).fortnightlyHeadlineArmy,
|
|
),
|
|
minutes: 2,
|
|
),
|
|
articleDivider,
|
|
HorizontalArticlePreview(
|
|
data: ArticleData(
|
|
imageUrl: 'assets/fortnightly/fortnightly_stocks.png',
|
|
category:
|
|
GalleryLocalizations.of(context).fortnightlyMenuWorld.toUpperCase(),
|
|
title: GalleryLocalizations.of(context).fortnightlyHeadlineStocks,
|
|
),
|
|
minutes: 5,
|
|
),
|
|
articleDivider,
|
|
HorizontalArticlePreview(
|
|
data: ArticleData(
|
|
imageUrl: 'assets/fortnightly/fortnightly_fabrics.png',
|
|
category:
|
|
GalleryLocalizations.of(context).fortnightlyMenuTech.toUpperCase(),
|
|
title: GalleryLocalizations.of(context).fortnightlyHeadlineFabrics,
|
|
),
|
|
minutes: 4,
|
|
),
|
|
articleDivider,
|
|
];
|
|
}
|
|
|
|
class HashtagBar extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final verticalDivider = Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
color: Colors.black.withOpacity(0.1),
|
|
width: 1,
|
|
);
|
|
final textTheme = Theme.of(context).textTheme;
|
|
final height = 32 * reducedTextScale(context);
|
|
|
|
return SizedBox(
|
|
height: height,
|
|
child: ListView(
|
|
scrollDirection: Axis.horizontal,
|
|
children: [
|
|
SizedBox(width: 16),
|
|
Center(
|
|
child: Text(
|
|
'#${GalleryLocalizations.of(context).fortnightlyTrendingTechDesign}',
|
|
style: textTheme.subtitle,
|
|
),
|
|
),
|
|
verticalDivider,
|
|
Center(
|
|
child: Text(
|
|
'#${GalleryLocalizations.of(context).fortnightlyTrendingReform}',
|
|
style: textTheme.subtitle,
|
|
),
|
|
),
|
|
verticalDivider,
|
|
Center(
|
|
child: Text(
|
|
'#${GalleryLocalizations.of(context).fortnightlyTrendingHealthcareRevolution}',
|
|
style: textTheme.subtitle,
|
|
),
|
|
),
|
|
verticalDivider,
|
|
Center(
|
|
child: Text(
|
|
'#${GalleryLocalizations.of(context).fortnightlyTrendingGreenArmy}',
|
|
style: textTheme.subtitle,
|
|
),
|
|
),
|
|
verticalDivider,
|
|
Center(
|
|
child: Text(
|
|
'#${GalleryLocalizations.of(context).fortnightlyTrendingStocks}',
|
|
style: textTheme.subtitle,
|
|
),
|
|
),
|
|
verticalDivider,
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class NavigationMenu extends StatelessWidget {
|
|
NavigationMenu({this.isCloseable = false});
|
|
|
|
final bool isCloseable;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return ListView(
|
|
children: [
|
|
if (isCloseable)
|
|
Row(
|
|
children: [
|
|
IconButton(
|
|
icon: Icon(Icons.close),
|
|
tooltip: MaterialLocalizations.of(context).closeButtonTooltip,
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
Image.asset(
|
|
'assets/fortnightly/fortnightly_title.png',
|
|
excludeFromSemantics: true,
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 32),
|
|
MenuItem(
|
|
GalleryLocalizations.of(context).fortnightlyMenuFrontPage,
|
|
header: true,
|
|
),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuWorld),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuUS),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuPolitics),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuBusiness),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuTech),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuScience),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuSports),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuTravel),
|
|
MenuItem(GalleryLocalizations.of(context).fortnightlyMenuCulture),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class MenuItem extends StatelessWidget {
|
|
MenuItem(this.title, {this.header = false});
|
|
|
|
final String title;
|
|
final bool header;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 32,
|
|
alignment: Alignment.centerLeft,
|
|
child: header ? null : Icon(Icons.arrow_drop_down),
|
|
),
|
|
Expanded(
|
|
child: Text(
|
|
title,
|
|
style: Theme.of(context).textTheme.subhead.copyWith(
|
|
fontWeight: header ? FontWeight.w700 : FontWeight.w600,
|
|
fontSize: 16,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class StockItem extends StatelessWidget {
|
|
StockItem({this.ticker, this.price, this.percent});
|
|
|
|
final String ticker;
|
|
final String price;
|
|
final double percent;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final textTheme = Theme.of(context).textTheme;
|
|
final percentFormat = NumberFormat.decimalPercentPattern(
|
|
locale: GalleryOptions.of(context).locale.toString(),
|
|
decimalDigits: 2,
|
|
);
|
|
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(ticker, style: textTheme.subhead),
|
|
SizedBox(height: 2),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Text(
|
|
price,
|
|
style: textTheme.subtitle.copyWith(
|
|
color: textTheme.subtitle.color.withOpacity(0.75),
|
|
),
|
|
),
|
|
),
|
|
Text(
|
|
percent > 0 ? '+' : '-',
|
|
style: textTheme.subtitle.copyWith(
|
|
fontSize: 12,
|
|
color: percent > 0 ? Color(0xff20CF63) : Color(0xff661FFF),
|
|
),
|
|
),
|
|
SizedBox(width: 4),
|
|
Text(
|
|
percentFormat.format(percent.abs() / 100),
|
|
style: textTheme.caption.copyWith(
|
|
fontSize: 12,
|
|
color: textTheme.subtitle.color.withOpacity(0.75),
|
|
),
|
|
),
|
|
],
|
|
)
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
List<Widget> buildStockItems(BuildContext context) {
|
|
Widget articleDivider = Container(
|
|
margin: EdgeInsets.symmetric(vertical: 16),
|
|
color: Colors.black.withOpacity(0.07),
|
|
height: 1,
|
|
);
|
|
|
|
return <Widget>[
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: Image.asset(
|
|
'assets/fortnightly/fortnightly_chart.png',
|
|
fit: BoxFit.contain,
|
|
excludeFromSemantics: true,
|
|
),
|
|
),
|
|
articleDivider,
|
|
StockItem(
|
|
ticker: 'DIJA',
|
|
price: '7,031.21',
|
|
percent: -0.48,
|
|
),
|
|
articleDivider,
|
|
StockItem(
|
|
ticker: 'SP',
|
|
price: '1,967.84',
|
|
percent: -0.23,
|
|
),
|
|
articleDivider,
|
|
StockItem(
|
|
ticker: 'Nasdaq',
|
|
price: '6,211.46',
|
|
percent: 0.52,
|
|
),
|
|
articleDivider,
|
|
StockItem(
|
|
ticker: 'Nikkei',
|
|
price: '5,891',
|
|
percent: 1.16,
|
|
),
|
|
articleDivider,
|
|
StockItem(
|
|
ticker: 'DJ Total',
|
|
price: '89.02',
|
|
percent: 0.80,
|
|
),
|
|
articleDivider,
|
|
];
|
|
}
|
|
|
|
class VideoPreview extends StatelessWidget {
|
|
VideoPreview({this.data, this.time});
|
|
|
|
final ArticleData data;
|
|
final String time;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
TextTheme textTheme = Theme.of(context).textTheme;
|
|
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: Image.asset(
|
|
data.imageUrl,
|
|
fit: BoxFit.contain,
|
|
excludeFromSemantics: true,
|
|
),
|
|
),
|
|
SizedBox(height: 4),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: Text(data.category, style: textTheme.subhead),
|
|
),
|
|
Text(time, style: textTheme.body2)
|
|
],
|
|
),
|
|
SizedBox(height: 4),
|
|
Text(data.title, style: textTheme.headline.copyWith(fontSize: 16)),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
List<Widget> buildVideoPreviewItems(BuildContext context) {
|
|
return <Widget>[
|
|
VideoPreview(
|
|
data: ArticleData(
|
|
imageUrl: 'assets/fortnightly/fortnightly_feminists.jpg',
|
|
category: GalleryLocalizations.of(context)
|
|
.fortnightlyMenuPolitics
|
|
.toUpperCase(),
|
|
title: GalleryLocalizations.of(context).fortnightlyHeadlineFeminists,
|
|
),
|
|
time: '2:31',
|
|
),
|
|
SizedBox(height: 32),
|
|
VideoPreview(
|
|
data: ArticleData(
|
|
imageUrl: 'assets/fortnightly/fortnightly_bees.jpg',
|
|
category:
|
|
GalleryLocalizations.of(context).fortnightlyMenuUS.toUpperCase(),
|
|
title: GalleryLocalizations.of(context).fortnightlyHeadlineBees,
|
|
),
|
|
time: '1:37',
|
|
),
|
|
];
|
|
}
|
|
|
|
ThemeData buildTheme(BuildContext context) {
|
|
TextTheme textTheme = Theme.of(context).textTheme;
|
|
return ThemeData(
|
|
scaffoldBackgroundColor: Colors.white,
|
|
appBarTheme: AppBarTheme(
|
|
color: Colors.white,
|
|
elevation: 0,
|
|
iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
|
|
),
|
|
highlightColor: Colors.transparent,
|
|
textTheme: textTheme.copyWith(
|
|
// preview snippet
|
|
body1: GoogleFonts.merriweather(
|
|
fontWeight: FontWeight.w300,
|
|
fontSize: 16,
|
|
textStyle: textTheme.body1,
|
|
),
|
|
// time in latest updates
|
|
body2: GoogleFonts.libreFranklin(
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 11,
|
|
color: Colors.black.withOpacity(0.5),
|
|
textStyle: textTheme.body2,
|
|
),
|
|
// preview headlines
|
|
headline: GoogleFonts.libreFranklin(
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 16,
|
|
textStyle: textTheme.headline,
|
|
),
|
|
// TODO: Use GoogleFonts.robotoCondensed when available
|
|
// (caption 2), preview category, stock ticker
|
|
subhead: textTheme.subhead.copyWith(
|
|
fontFamily: 'Roboto Condensed',
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 16,
|
|
),
|
|
subtitle: GoogleFonts.libreFranklin(
|
|
fontWeight: FontWeight.w400,
|
|
fontSize: 14,
|
|
textStyle: textTheme.subtitle,
|
|
),
|
|
// section titles: Top Highlights, Last Updated...
|
|
title: GoogleFonts.merriweather(
|
|
fontWeight: FontWeight.w700,
|
|
fontStyle: FontStyle.italic,
|
|
fontSize: 14,
|
|
textStyle: textTheme.title,
|
|
),
|
|
),
|
|
);
|
|
}
|