|
|
// 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 'dart:collection';
|
|
|
|
|
|
import 'package:collection/collection.dart';
|
|
|
import 'package:flutter/material.dart';
|
|
|
import 'package:flutter_localized_locales/flutter_localized_locales.dart';
|
|
|
import 'package:gallery/constants.dart';
|
|
|
import 'package:gallery/data/gallery_options.dart';
|
|
|
import 'package:gallery/l10n/gallery_localizations.dart';
|
|
|
import 'package:gallery/layout/adaptive.dart';
|
|
|
import 'package:gallery/pages/about.dart' as about;
|
|
|
import 'package:gallery/pages/backdrop.dart';
|
|
|
import 'package:gallery/pages/home.dart';
|
|
|
import 'package:gallery/pages/settings_list_item.dart';
|
|
|
import 'package:url_launcher/url_launcher.dart';
|
|
|
|
|
|
enum _ExpandableSetting {
|
|
|
textScale,
|
|
|
textDirection,
|
|
|
locale,
|
|
|
platform,
|
|
|
theme,
|
|
|
}
|
|
|
|
|
|
class SettingsPage extends StatefulWidget {
|
|
|
SettingsPage({
|
|
|
Key key,
|
|
|
@required this.openSettingsAnimation,
|
|
|
@required this.staggerSettingsItemsAnimation,
|
|
|
@required this.isSettingsOpenNotifier,
|
|
|
}) : super(key: key);
|
|
|
|
|
|
final Animation<double> openSettingsAnimation;
|
|
|
final Animation<double> staggerSettingsItemsAnimation;
|
|
|
final ValueNotifier<bool> isSettingsOpenNotifier;
|
|
|
|
|
|
@override
|
|
|
_SettingsPageState createState() => _SettingsPageState();
|
|
|
}
|
|
|
|
|
|
class _SettingsPageState extends State<SettingsPage> {
|
|
|
_ExpandableSetting expandedSettingId;
|
|
|
Map<String, String> _localeNativeNames;
|
|
|
|
|
|
void onTapSetting(_ExpandableSetting settingId) {
|
|
|
setState(() {
|
|
|
if (expandedSettingId == settingId) {
|
|
|
expandedSettingId = null;
|
|
|
} else {
|
|
|
expandedSettingId = settingId;
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@override
|
|
|
void initState() {
|
|
|
super.initState();
|
|
|
LocaleNamesLocalizationsDelegate().allNativeNames().then(
|
|
|
(data) => setState(
|
|
|
() {
|
|
|
_localeNativeNames = data;
|
|
|
},
|
|
|
),
|
|
|
);
|
|
|
|
|
|
// When closing settings, also shrink expanded setting.
|
|
|
widget.isSettingsOpenNotifier.addListener(() {
|
|
|
if (!widget.isSettingsOpenNotifier.value) {
|
|
|
setState(() {
|
|
|
expandedSettingId = null;
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
/// Given a [Locale], returns a [DisplayOption] with its native name for a
|
|
|
/// title and its name in the currently selected locale for a subtitle. If the
|
|
|
/// native name can't be determined, it is omitted. If the locale can't be
|
|
|
/// determined, the locale code is used.
|
|
|
DisplayOption _getLocaleDisplayOption(BuildContext context, Locale locale) {
|
|
|
// TODO: gsw, fil, and es_419 aren't in flutter_localized_countries' dataset
|
|
|
final localeCode = locale.toString();
|
|
|
final localeName = LocaleNames.of(context).nameOf(localeCode);
|
|
|
if (localeName != null) {
|
|
|
final localeNativeName =
|
|
|
_localeNativeNames != null ? _localeNativeNames[localeCode] : null;
|
|
|
return localeNativeName != null
|
|
|
? DisplayOption(localeNativeName, subtitle: localeName)
|
|
|
: DisplayOption(localeName);
|
|
|
} else {
|
|
|
switch (localeCode) {
|
|
|
case 'gsw':
|
|
|
return DisplayOption('Schwiizertüütsch', subtitle: 'Swiss German');
|
|
|
case 'fil':
|
|
|
return DisplayOption('Filipino', subtitle: 'Filipino');
|
|
|
case 'es_419':
|
|
|
return DisplayOption(
|
|
|
'español (Latinoamérica)',
|
|
|
subtitle: 'Spanish (Latin America)',
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return DisplayOption(localeCode);
|
|
|
}
|
|
|
|
|
|
/// Create a sorted — by native name – map of supported locales to their
|
|
|
/// intended display string, with a system option as the first element.
|
|
|
LinkedHashMap<Locale, DisplayOption> _getLocaleOptions() {
|
|
|
var localeOptions = LinkedHashMap.of({
|
|
|
systemLocaleOption: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsSystemDefault +
|
|
|
(deviceLocale != null
|
|
|
? ' - ${_getLocaleDisplayOption(context, deviceLocale).title}'
|
|
|
: ''),
|
|
|
),
|
|
|
});
|
|
|
var supportedLocales =
|
|
|
List<Locale>.from(GalleryLocalizations.supportedLocales);
|
|
|
supportedLocales.removeWhere((locale) => locale == deviceLocale);
|
|
|
|
|
|
final displayLocales = Map<Locale, DisplayOption>.fromIterable(
|
|
|
supportedLocales,
|
|
|
value: (dynamic locale) =>
|
|
|
_getLocaleDisplayOption(context, locale as Locale),
|
|
|
).entries.toList()
|
|
|
..sort((l1, l2) => compareAsciiUpperCase(l1.value.title, l2.value.title));
|
|
|
|
|
|
localeOptions.addAll(LinkedHashMap.fromEntries(displayLocales));
|
|
|
return localeOptions;
|
|
|
}
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
final options = GalleryOptions.of(context);
|
|
|
final isDesktop = isDisplayDesktop(context);
|
|
|
|
|
|
final settingsListItems = [
|
|
|
SettingsListItem<double>(
|
|
|
title: GalleryLocalizations.of(context).settingsTextScaling,
|
|
|
selectedOption: options.textScaleFactor(
|
|
|
context,
|
|
|
useSentinel: true,
|
|
|
),
|
|
|
options: LinkedHashMap.of({
|
|
|
systemTextScaleFactorOption: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsSystemDefault,
|
|
|
),
|
|
|
0.8: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsTextScalingSmall,
|
|
|
),
|
|
|
1.0: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsTextScalingNormal,
|
|
|
),
|
|
|
2.0: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsTextScalingLarge,
|
|
|
),
|
|
|
3.0: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsTextScalingHuge,
|
|
|
),
|
|
|
}),
|
|
|
onOptionChanged: (newTextScale) => GalleryOptions.update(
|
|
|
context,
|
|
|
options.copyWith(textScaleFactor: newTextScale),
|
|
|
),
|
|
|
onTapSetting: () => onTapSetting(_ExpandableSetting.textScale),
|
|
|
isExpanded: expandedSettingId == _ExpandableSetting.textScale,
|
|
|
),
|
|
|
SettingsListItem<CustomTextDirection>(
|
|
|
title: GalleryLocalizations.of(context).settingsTextDirection,
|
|
|
selectedOption: options.customTextDirection,
|
|
|
options: LinkedHashMap.of({
|
|
|
CustomTextDirection.localeBased: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsTextDirectionLocaleBased,
|
|
|
),
|
|
|
CustomTextDirection.ltr: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsTextDirectionLTR,
|
|
|
),
|
|
|
CustomTextDirection.rtl: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsTextDirectionRTL,
|
|
|
),
|
|
|
}),
|
|
|
onOptionChanged: (newTextDirection) => GalleryOptions.update(
|
|
|
context,
|
|
|
options.copyWith(customTextDirection: newTextDirection),
|
|
|
),
|
|
|
onTapSetting: () => onTapSetting(_ExpandableSetting.textDirection),
|
|
|
isExpanded: expandedSettingId == _ExpandableSetting.textDirection,
|
|
|
),
|
|
|
SettingsListItem<Locale>(
|
|
|
title: GalleryLocalizations.of(context).settingsLocale,
|
|
|
selectedOption: options.locale == deviceLocale
|
|
|
? systemLocaleOption
|
|
|
: options.locale,
|
|
|
options: _getLocaleOptions(),
|
|
|
onOptionChanged: (newLocale) {
|
|
|
if (newLocale == systemLocaleOption) {
|
|
|
newLocale = deviceLocale;
|
|
|
}
|
|
|
GalleryOptions.update(
|
|
|
context,
|
|
|
options.copyWith(locale: newLocale),
|
|
|
);
|
|
|
},
|
|
|
onTapSetting: () => onTapSetting(_ExpandableSetting.locale),
|
|
|
isExpanded: expandedSettingId == _ExpandableSetting.locale,
|
|
|
),
|
|
|
SettingsListItem<TargetPlatform>(
|
|
|
title: GalleryLocalizations.of(context).settingsPlatformMechanics,
|
|
|
selectedOption: options.platform,
|
|
|
options: LinkedHashMap.of({
|
|
|
TargetPlatform.android: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsPlatformAndroid,
|
|
|
),
|
|
|
TargetPlatform.iOS: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsPlatformIOS,
|
|
|
),
|
|
|
}),
|
|
|
onOptionChanged: (newPlatform) => GalleryOptions.update(
|
|
|
context,
|
|
|
options.copyWith(platform: newPlatform),
|
|
|
),
|
|
|
onTapSetting: () => onTapSetting(_ExpandableSetting.platform),
|
|
|
isExpanded: expandedSettingId == _ExpandableSetting.platform,
|
|
|
),
|
|
|
SettingsListItem<ThemeMode>(
|
|
|
title: GalleryLocalizations.of(context).settingsTheme,
|
|
|
selectedOption: options.themeMode,
|
|
|
options: LinkedHashMap.of({
|
|
|
ThemeMode.system: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsSystemDefault,
|
|
|
),
|
|
|
ThemeMode.dark: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsDarkTheme,
|
|
|
),
|
|
|
ThemeMode.light: DisplayOption(
|
|
|
GalleryLocalizations.of(context).settingsLightTheme,
|
|
|
),
|
|
|
}),
|
|
|
onOptionChanged: (newThemeMode) => GalleryOptions.update(
|
|
|
context,
|
|
|
options.copyWith(themeMode: newThemeMode),
|
|
|
),
|
|
|
onTapSetting: () => onTapSetting(_ExpandableSetting.theme),
|
|
|
isExpanded: expandedSettingId == _ExpandableSetting.theme,
|
|
|
),
|
|
|
SlowMotionSetting(),
|
|
|
];
|
|
|
|
|
|
return Material(
|
|
|
color: colorScheme.secondaryVariant,
|
|
|
child: _AnimatedSettingsPage(
|
|
|
animation: widget.openSettingsAnimation,
|
|
|
child: Padding(
|
|
|
padding: isDesktop
|
|
|
? EdgeInsets.zero
|
|
|
: EdgeInsets.only(
|
|
|
bottom: galleryHeaderHeight,
|
|
|
),
|
|
|
// Remove ListView top padding as it is already accounted for.
|
|
|
child: MediaQuery.removePadding(
|
|
|
removeTop: isDesktop,
|
|
|
context: context,
|
|
|
child: ListView(
|
|
|
children: [
|
|
|
if (isDesktop) SizedBox(height: firstHeaderDesktopTopPadding),
|
|
|
Focus(
|
|
|
focusNode: InheritedBackdropFocusNodes.of(context)
|
|
|
.frontLayerFocusNode,
|
|
|
child: Padding(
|
|
|
padding: EdgeInsets.symmetric(horizontal: 32),
|
|
|
child: ExcludeSemantics(
|
|
|
child: Header(
|
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
|
text: GalleryLocalizations.of(context).settingsTitle,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
if (isDesktop)
|
|
|
...settingsListItems
|
|
|
else ...[
|
|
|
_AnimateSettingsListItems(
|
|
|
animation: widget.staggerSettingsItemsAnimation,
|
|
|
children: settingsListItems,
|
|
|
),
|
|
|
SizedBox(height: 16),
|
|
|
Divider(
|
|
|
thickness: 2, height: 0, color: colorScheme.background),
|
|
|
SizedBox(height: 12),
|
|
|
SettingsAbout(),
|
|
|
SettingsFeedback(),
|
|
|
SizedBox(height: 12),
|
|
|
Divider(
|
|
|
thickness: 2, height: 0, color: colorScheme.background),
|
|
|
SettingsAttribution(),
|
|
|
],
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class SettingsAbout extends StatelessWidget {
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
return _SettingsLink(
|
|
|
title: GalleryLocalizations.of(context).settingsAbout,
|
|
|
icon: Icons.info_outline,
|
|
|
onTap: () {
|
|
|
about.showAboutDialog(context: context);
|
|
|
},
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class SettingsFeedback extends StatelessWidget {
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
return _SettingsLink(
|
|
|
title: GalleryLocalizations.of(context).settingsFeedback,
|
|
|
icon: Icons.feedback,
|
|
|
onTap: () async {
|
|
|
final url = 'https://github.com/flutter/flutter/issues/new/choose/';
|
|
|
if (await canLaunch(url)) {
|
|
|
await launch(
|
|
|
url,
|
|
|
forceSafariVC: false,
|
|
|
);
|
|
|
}
|
|
|
},
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class SettingsAttribution extends StatelessWidget {
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
final isDesktop = isDisplayDesktop(context);
|
|
|
final verticalPadding = isDesktop ? 0.0 : 28.0;
|
|
|
return MergeSemantics(
|
|
|
child: Padding(
|
|
|
padding: EdgeInsetsDirectional.only(
|
|
|
start: isDesktop ? 24 : 32,
|
|
|
end: isDesktop ? 0 : 32,
|
|
|
top: verticalPadding,
|
|
|
bottom: verticalPadding,
|
|
|
),
|
|
|
child: Text(
|
|
|
GalleryLocalizations.of(context).settingsAttribution,
|
|
|
style: Theme.of(context).textTheme.body2.copyWith(
|
|
|
fontSize: 12,
|
|
|
color: Theme.of(context).colorScheme.onSecondary,
|
|
|
),
|
|
|
textAlign: isDesktop ? TextAlign.end : TextAlign.start,
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
class _SettingsLink extends StatelessWidget {
|
|
|
final String title;
|
|
|
final IconData icon;
|
|
|
final GestureTapCallback onTap;
|
|
|
|
|
|
_SettingsLink({this.title, this.icon, this.onTap});
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
final textTheme = Theme.of(context).textTheme;
|
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
final isDesktop = isDisplayDesktop(context);
|
|
|
|
|
|
return InkWell(
|
|
|
onTap: onTap,
|
|
|
child: Padding(
|
|
|
padding: EdgeInsets.symmetric(
|
|
|
horizontal: isDesktop ? 24 : 32,
|
|
|
),
|
|
|
child: Row(
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
children: [
|
|
|
Icon(
|
|
|
icon,
|
|
|
color: colorScheme.onSecondary.withOpacity(0.5),
|
|
|
size: 24,
|
|
|
),
|
|
|
Flexible(
|
|
|
child: Padding(
|
|
|
padding: const EdgeInsetsDirectional.only(
|
|
|
start: 16,
|
|
|
top: 12,
|
|
|
bottom: 12,
|
|
|
),
|
|
|
child: Text(
|
|
|
title,
|
|
|
style: textTheme.subtitle.apply(
|
|
|
color: colorScheme.onSecondary,
|
|
|
),
|
|
|
textAlign: isDesktop ? TextAlign.end : TextAlign.start,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/// Animate the settings page to slide in from above.
|
|
|
class _AnimatedSettingsPage extends StatelessWidget {
|
|
|
const _AnimatedSettingsPage({
|
|
|
Key key,
|
|
|
@required this.animation,
|
|
|
@required this.child,
|
|
|
}) : super(key: key);
|
|
|
|
|
|
final Widget child;
|
|
|
final Animation<double> animation;
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
final isDesktop = isDisplayDesktop(context);
|
|
|
|
|
|
if (isDesktop) {
|
|
|
return child;
|
|
|
} else {
|
|
|
return LayoutBuilder(builder: (context, constraints) {
|
|
|
return Stack(
|
|
|
children: [
|
|
|
PositionedTransition(
|
|
|
rect: RelativeRectTween(
|
|
|
begin: RelativeRect.fromLTRB(0, -constraints.maxHeight, 0, 0),
|
|
|
end: RelativeRect.fromLTRB(0, 0, 0, 0),
|
|
|
).animate(
|
|
|
CurvedAnimation(
|
|
|
parent: animation,
|
|
|
curve: Curves.linear,
|
|
|
),
|
|
|
),
|
|
|
child: child,
|
|
|
),
|
|
|
],
|
|
|
);
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/// Animate the settings list items to stagger in from above.
|
|
|
class _AnimateSettingsListItems extends StatelessWidget {
|
|
|
const _AnimateSettingsListItems({
|
|
|
Key key,
|
|
|
this.animation,
|
|
|
this.children,
|
|
|
this.topPadding,
|
|
|
this.bottomPadding,
|
|
|
}) : super(key: key);
|
|
|
|
|
|
final Animation<double> animation;
|
|
|
final List<Widget> children;
|
|
|
final double topPadding;
|
|
|
final double bottomPadding;
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
final startDividingPadding = 4.0;
|
|
|
final topPaddingTween = Tween<double>(
|
|
|
begin: 0,
|
|
|
end: children.length * startDividingPadding,
|
|
|
);
|
|
|
final dividerTween = Tween<double>(
|
|
|
begin: startDividingPadding,
|
|
|
end: 0,
|
|
|
);
|
|
|
|
|
|
return Padding(
|
|
|
padding: EdgeInsets.only(top: topPaddingTween.animate(animation).value),
|
|
|
child: Column(
|
|
|
children: [
|
|
|
for (Widget child in children)
|
|
|
AnimatedBuilder(
|
|
|
animation: animation,
|
|
|
builder: (context, child) {
|
|
|
return Padding(
|
|
|
padding: EdgeInsets.only(
|
|
|
top: dividerTween.animate(animation).value,
|
|
|
),
|
|
|
child: child,
|
|
|
);
|
|
|
},
|
|
|
child: child,
|
|
|
),
|
|
|
],
|
|
|
),
|
|
|
);
|
|
|
}
|
|
|
}
|
