✨ Background image & appearance settings
This commit is contained in:
@ -37,25 +37,7 @@ class SolianApp extends StatelessWidget {
|
||||
ChangeNotifierProvider(create: (ctx) => UserProvider(ctx)),
|
||||
ChangeNotifierProvider(create: (_) => ThemeProvider()),
|
||||
],
|
||||
child: Builder(builder: (context) {
|
||||
// Initialize some providers
|
||||
context.read<UserProvider>();
|
||||
|
||||
final th = context.watch<ThemeProvider>();
|
||||
|
||||
return MaterialApp.router(
|
||||
theme: th.theme.light,
|
||||
darkTheme: th.theme.dark,
|
||||
locale: context.locale,
|
||||
supportedLocales: context.supportedLocales,
|
||||
localizationsDelegates: [
|
||||
CroppyLocalizations.delegate,
|
||||
RelativeTimeLocalizations.delegate,
|
||||
...context.localizationDelegates,
|
||||
],
|
||||
routerConfig: appRouter,
|
||||
);
|
||||
}),
|
||||
child: AppMainContent(),
|
||||
),
|
||||
),
|
||||
breakpoints: [
|
||||
@ -66,3 +48,27 @@ class SolianApp extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AppMainContent extends StatelessWidget {
|
||||
const AppMainContent({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
context.read<UserProvider>();
|
||||
|
||||
final th = context.watch<ThemeProvider>();
|
||||
|
||||
return MaterialApp.router(
|
||||
theme: th.theme?.light,
|
||||
darkTheme: th.theme?.dark,
|
||||
locale: context.locale,
|
||||
supportedLocales: context.supportedLocales,
|
||||
localizationsDelegates: [
|
||||
CroppyLocalizations.delegate,
|
||||
RelativeTimeLocalizations.delegate,
|
||||
...context.localizationDelegates,
|
||||
],
|
||||
routerConfig: appRouter,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -2,9 +2,19 @@ import 'package:flutter/foundation.dart';
|
||||
import 'package:surface/theme.dart';
|
||||
|
||||
class ThemeProvider extends ChangeNotifier {
|
||||
late ThemeSet theme;
|
||||
ThemeSet? theme;
|
||||
|
||||
ThemeProvider() {
|
||||
theme = createAppThemeSet();
|
||||
createAppThemeSet().then((value) {
|
||||
theme = value;
|
||||
notifyListeners();
|
||||
});
|
||||
}
|
||||
|
||||
void reloadTheme({bool? useMaterial3}) {
|
||||
createAppThemeSet().then((value) {
|
||||
theme = value;
|
||||
notifyListeners();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -9,6 +9,7 @@ import 'package:surface/screens/auth/register.dart';
|
||||
import 'package:surface/screens/explore.dart';
|
||||
import 'package:surface/screens/home.dart';
|
||||
import 'package:surface/screens/post/post_editor.dart';
|
||||
import 'package:surface/screens/settings.dart';
|
||||
import 'package:surface/widgets/navigation/app_scaffold.dart';
|
||||
|
||||
final appRouter = GoRouter(
|
||||
@ -99,5 +100,18 @@ final appRouter = GoRouter(
|
||||
),
|
||||
],
|
||||
),
|
||||
ShellRoute(
|
||||
builder: (context, state, child) => AppScaffold(
|
||||
body: child,
|
||||
autoImplyAppBar: true,
|
||||
),
|
||||
routes: [
|
||||
GoRoute(
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
builder: (context, state) => const SettingsScreen(),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
|
@ -20,6 +20,14 @@ class AccountScreen extends StatelessWidget {
|
||||
return AppScaffold(
|
||||
appBar: AppBar(
|
||||
title: Text("screenAccount").tr(),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Symbols.settings, fill: 1),
|
||||
onPressed: () {
|
||||
GoRouter.of(context).pushNamed('settings');
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
child: ua.isAuthorized
|
||||
|
@ -1,3 +1,4 @@
|
||||
import 'package:collection/collection.dart';
|
||||
import 'package:dio/dio.dart';
|
||||
import 'package:dropdown_button2/dropdown_button2.dart';
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
@ -468,8 +469,17 @@ class _PostEditorScreenState extends State<PostEditorScreen> {
|
||||
onTapOutside: (_) =>
|
||||
FocusManager.instance.primaryFocus?.unfocus(),
|
||||
)
|
||||
].expand((ele) => [ele, const Gap(8)]).toList()
|
||||
..removeLast(),
|
||||
]
|
||||
.expandIndexed(
|
||||
(idx, ele) => [
|
||||
if (idx != 0 ||
|
||||
![_editingOg, _replyingTo, _repostingTo]
|
||||
.any((x) => x != null))
|
||||
const Gap(8),
|
||||
ele,
|
||||
],
|
||||
)
|
||||
.toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
137
lib/screens/settings.dart
Normal file
137
lib/screens/settings.dart
Normal file
@ -0,0 +1,137 @@
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:path_provider/path_provider.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
import 'package:surface/providers/theme.dart';
|
||||
import 'package:surface/theme.dart';
|
||||
import 'package:surface/widgets/navigation/app_scaffold.dart';
|
||||
|
||||
class SettingsScreen extends StatefulWidget {
|
||||
const SettingsScreen({super.key});
|
||||
|
||||
@override
|
||||
State<SettingsScreen> createState() => _SettingsScreenState();
|
||||
}
|
||||
|
||||
class _SettingsScreenState extends State<SettingsScreen> {
|
||||
SharedPreferences? _prefs;
|
||||
String _docBasepath = '/';
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
getApplicationDocumentsDirectory().then((dir) {
|
||||
_docBasepath = dir.path;
|
||||
if (mounted) {
|
||||
setState(() {});
|
||||
}
|
||||
});
|
||||
SharedPreferences.getInstance().then((prefs) {
|
||||
setState(() {
|
||||
_prefs = prefs;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return AppScaffold(
|
||||
body: SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('settingsAppearance')
|
||||
.bold()
|
||||
.fontSize(17)
|
||||
.tr()
|
||||
.padding(horizontal: 20),
|
||||
if (!kIsWeb)
|
||||
ListTile(
|
||||
title: Text('settingsBackgroundImage').tr(),
|
||||
subtitle: Text('settingsBackgroundImageDescription').tr(),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
leading: const Icon(Symbols.image),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
onTap: () async {
|
||||
final image = await ImagePicker()
|
||||
.pickImage(source: ImageSource.gallery);
|
||||
if (image == null) return;
|
||||
|
||||
await File(image.path)
|
||||
.copy('$_docBasepath/app_background_image');
|
||||
|
||||
setState(() {});
|
||||
},
|
||||
),
|
||||
if (!kIsWeb)
|
||||
FutureBuilder<bool>(
|
||||
future:
|
||||
File('$_docBasepath/app_background_image').exists(),
|
||||
builder: (context, snapshot) {
|
||||
if (!snapshot.hasData || !snapshot.data!) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return ListTile(
|
||||
title: Text('settingsBackgroundImageClear').tr(),
|
||||
subtitle:
|
||||
Text('settingsBackgroundImageClearDescription')
|
||||
.tr(),
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: 24),
|
||||
leading: const Icon(Symbols.texture),
|
||||
trailing: const Icon(Symbols.chevron_right),
|
||||
onTap: () {
|
||||
File('$_docBasepath/app_background_image')
|
||||
.deleteSync();
|
||||
setState(() {});
|
||||
},
|
||||
);
|
||||
}),
|
||||
if (_prefs != null)
|
||||
CheckboxListTile(
|
||||
title: Text('settingsThemeMaterial3').tr(),
|
||||
subtitle: Text('settingsThemeMaterial3Description').tr(),
|
||||
contentPadding: const EdgeInsets.only(left: 24, right: 17),
|
||||
secondary: const Icon(Symbols.new_releases),
|
||||
value: _prefs!.getBool(kMaterialYouToggleStoreKey) ?? false,
|
||||
onChanged: (value) {
|
||||
setState(() {
|
||||
_prefs!.setBool(
|
||||
kMaterialYouToggleStoreKey,
|
||||
value ?? false,
|
||||
);
|
||||
});
|
||||
final th = context.watch<ThemeProvider>();
|
||||
th.reloadTheme(useMaterial3: value ?? false);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('settingsNetwork')
|
||||
.bold()
|
||||
.fontSize(17)
|
||||
.tr()
|
||||
.padding(horizontal: 20),
|
||||
],
|
||||
),
|
||||
].expand((ele) => [ele, const Gap(16)]).toList(),
|
||||
).padding(vertical: 20),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -1,4 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
|
||||
const kMaterialYouToggleStoreKey = 'app_theme_material_you';
|
||||
|
||||
class ThemeSet {
|
||||
ThemeData light;
|
||||
@ -7,21 +10,28 @@ class ThemeSet {
|
||||
ThemeSet({required this.light, required this.dark});
|
||||
}
|
||||
|
||||
ThemeSet createAppThemeSet() {
|
||||
Future<ThemeSet> createAppThemeSet({bool? useMaterial3}) async {
|
||||
return ThemeSet(
|
||||
light: createAppTheme(Brightness.light),
|
||||
dark: createAppTheme(Brightness.dark),
|
||||
light: await createAppTheme(Brightness.light, useMaterial3: useMaterial3),
|
||||
dark: await createAppTheme(Brightness.dark, useMaterial3: useMaterial3),
|
||||
);
|
||||
}
|
||||
|
||||
ThemeData createAppTheme(Brightness brightness) {
|
||||
Future<ThemeData> createAppTheme(
|
||||
Brightness brightness, {
|
||||
bool? useMaterial3,
|
||||
}) async {
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
|
||||
return ThemeData(
|
||||
useMaterial3: false,
|
||||
useMaterial3:
|
||||
useMaterial3 ?? (prefs.getBool(kMaterialYouToggleStoreKey) ?? false),
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: Colors.indigo,
|
||||
brightness: brightness,
|
||||
),
|
||||
brightness: brightness,
|
||||
iconTheme: const IconThemeData(fill: 0, weight: 400, opticalSize: 20),
|
||||
scaffoldBackgroundColor: Colors.transparent,
|
||||
);
|
||||
}
|
||||
|
@ -1,4 +1,8 @@
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:path_provider/path_provider.dart';
|
||||
|
||||
class AppBackground extends StatelessWidget {
|
||||
final Widget child;
|
||||
@ -6,6 +10,39 @@ class AppBackground extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ScaffoldMessenger(child: child);
|
||||
return ScaffoldMessenger(
|
||||
child: FutureBuilder(
|
||||
future:
|
||||
kIsWeb ? Future.value(null) : getApplicationDocumentsDirectory(),
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.hasData) {
|
||||
final path = '${snapshot.data!.path}/app_background_image';
|
||||
final file = File(path);
|
||||
if (file.existsSync()) {
|
||||
return Container(
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
backgroundBlendMode: BlendMode.darken,
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
image: DecorationImage(
|
||||
opacity: 0.2,
|
||||
image: FileImage(file),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return Material(
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -21,10 +21,59 @@ class PostItem extends StatelessWidget {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_PostContentHeader(data: data),
|
||||
_PostContentHeader(data: data).padding(horizontal: 12, vertical: 8),
|
||||
_PostContentBody(data: data.body).padding(horizontal: 16, bottom: 6),
|
||||
if (data.preload?.attachments?.isNotEmpty ?? true)
|
||||
AttachmentList(data: data.preload!.attachments!, bordered: true),
|
||||
_PostBottomAction(data: data)
|
||||
.padding(left: 20, right: 26, top: 8, bottom: 2),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _PostBottomAction extends StatelessWidget {
|
||||
final SnPost data;
|
||||
const _PostBottomAction({super.key, required this.data});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final iconColor = Theme.of(context).colorScheme.onSurface.withAlpha(
|
||||
(255 * 0.8).round(),
|
||||
);
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
InkWell(
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Symbols.add_reaction, size: 20, color: iconColor),
|
||||
const Gap(8),
|
||||
Text('postReact').tr(),
|
||||
],
|
||||
),
|
||||
onTap: () {},
|
||||
),
|
||||
const Gap(16),
|
||||
InkWell(
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Symbols.comment, size: 20, color: iconColor),
|
||||
const Gap(8),
|
||||
Text('postComments').plural(data.metric.replyCount),
|
||||
],
|
||||
),
|
||||
onTap: () {},
|
||||
),
|
||||
].expand((ele) => [ele, const Gap(8)]).toList()
|
||||
..removeLast(),
|
||||
),
|
||||
InkWell(
|
||||
child: Icon(Symbols.share, size: 20, color: iconColor),
|
||||
onTap: () {},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
@ -139,7 +188,7 @@ class _PostContentHeader extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
],
|
||||
).padding(horizontal: 12, vertical: 8);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user