mirror of
https://github.com/flutter/samples.git
synced 2025-11-11 23:39:14 +00:00
[Gallery] Fix directory structure (#312)
This commit is contained in:
Pierre-Louis
GitHub
549
gallery/lib/studies/fortnightly/shared.dart
Normal file
549
gallery/lib/studies/fortnightly/shared.dart
Normal file
@@ -0,0 +1,549 @@
|
||||
// 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,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user