1
0
mirror of https://github.com/flutter/samples.git synced 2026-06-03 04:48:50 +00:00

[Gallery] Fix directory structure (#312)

This commit is contained in:
Pierre-Louis
2020-02-05 20:11:54 +01:00
committed by GitHub
parent 082592e9a9
commit cee267cf88
762 changed files with 12 additions and 12 deletions

View File

@@ -0,0 +1,163 @@
// 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/adaptive.dart';
import 'package:gallery/layout/text_scale.dart';
import 'package:gallery/l10n/gallery_localizations.dart';
import 'package:gallery/studies/fortnightly/shared.dart';
const fortnightlyTitle = 'Fortnightly';
class FortnightlyApp extends StatelessWidget {
const FortnightlyApp({Key key, this.navigatorKey}) : super(key: key);
final GlobalKey<NavigatorState> navigatorKey;
@override
Widget build(BuildContext context) {
final home = isDisplayDesktop(context)
? _FortnightlyHomeDesktop()
: _FortnightlyHomeMobile();
return MaterialApp(
navigatorKey: navigatorKey,
debugShowCheckedModeBanner: false,
theme: buildTheme(context).copyWith(
platform: GalleryOptions.of(context).platform,
),
home: ApplyTextOptions(child: home),
// L10n settings.
localizationsDelegates: GalleryLocalizations.localizationsDelegates,
supportedLocales: GalleryLocalizations.supportedLocales,
locale: GalleryOptions.of(context).locale,
);
}
}
class _FortnightlyHomeMobile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
child: SafeArea(
child: NavigationMenu(isCloseable: true),
),
),
appBar: AppBar(
title: Semantics(
label: fortnightlyTitle,
child: Image.asset(
'assets/fortnightly/fortnightly_title.png',
excludeFromSemantics: true,
),
),
actions: [
IconButton(
icon: const Icon(Icons.search),
tooltip: GalleryLocalizations.of(context).shrineTooltipSearch,
onPressed: () {},
),
],
),
body: SafeArea(
child: ListView(
children: [
HashtagBar(),
for (final item in buildArticlePreviewItems(context))
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: item,
),
],
),
),
);
}
}
class _FortnightlyHomeDesktop extends StatelessWidget {
@override
Widget build(BuildContext context) {
final menuWidth = 200.0;
final spacer = SizedBox(width: 20);
final headerHeight = 40 * reducedTextScale(context);
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
SizedBox(
height: headerHeight,
child: Row(
children: [
Container(
width: menuWidth,
alignment: AlignmentDirectional.centerStart,
margin: EdgeInsets.only(left: 12),
child: Semantics(
label: fortnightlyTitle,
child: Image.asset(
'assets/fortnightly/fortnightly_title.png',
excludeFromSemantics: true,
),
),
),
spacer,
Flexible(
flex: 2,
child: HashtagBar(),
),
spacer,
Flexible(
fit: FlexFit.tight,
child: Container(
alignment: AlignmentDirectional.centerEnd,
child: IconButton(
icon: const Icon(Icons.search),
tooltip: GalleryLocalizations.of(context)
.shrineTooltipSearch,
onPressed: () {},
),
),
),
],
),
),
Flexible(
child: Row(
children: [
SizedBox(
width: menuWidth,
child: NavigationMenu(),
),
spacer,
Flexible(
flex: 2,
child: ListView(
children: buildArticlePreviewItems(context),
),
),
spacer,
Flexible(
flex: 1,
fit: FlexFit.tight,
child: ListView(
children: [
...buildStockItems(context),
SizedBox(height: 32),
...buildVideoPreviewItems(context),
],
),
),
],
),
),
],
),
),
);
}
}

View 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,
),
),
);
}