HyperNet/Surface
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Dynamic generate color to fit user background image

Browse Source
This commit is contained in:
LittleSheep 2025-06-11 00:47:26 +08:00
parent 280c261ea1
commit 61e61866d7
8 changed files with 338 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
lib/screens/account/profile.dart
View File

@ -4,13 +4,16 @@ import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/models/user.dart';
import 'package:island/pods/config.dart';
import 'package:island/pods/network.dart';
import 'package:island/pods/userinfo.dart';
import 'package:island/services/color.dart';
import 'package:island/widgets/account/badge.dart';
import 'package:island/widgets/account/leveling_progress.dart';
import 'package:island/widgets/account/status.dart';
import 'package:island/widgets/app_scaffold.dart';
import 'package:island/widgets/content/cloud_files.dart';
import 'package:palette_generator/palette_generator.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:styled_widget/styled_widget.dart';
@ -38,6 +41,21 @@ Future<List<SnAccountBadge>> accountBadges(Ref ref, String uname) async {
);
}
@riverpod
Future<Color?> accountAppbarForcegroundColor(Ref ref, String uname) async {
final account = await ref.watch(accountProvider(uname).future);
if (account.profile.background == null) return null;
final palette = await PaletteGenerator.fromImageProvider(
CloudImageWidget.provider(
fileId: account.profile.background!.id,
serverUrl: ref.watch(serverUrlProvider),
),
);
final dominantColor = palette.dominantColor?.color;
if (dominantColor == null) return null;
return dominantColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;
}
@RoutePage()
class AccountProfileScreen extends HookConsumerWidget {
final String name;
@ -49,11 +67,12 @@ class AccountProfileScreen extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final account = ref.watch(accountProvider(name));
final appbarColor = ref.watch(accountAppbarForcegroundColorProvider(name));
final iconShadow = Shadow(
color: Colors.black54,
final appbarShadow = Shadow(
color: appbarColor.value?.invert ?? Colors.black54,
blurRadius: 5.0,
offset: const Offset(1.0, 1.0),
offset: Offset(1.0, 1.0),
);
return account.when(
@ -62,9 +81,13 @@ class AccountProfileScreen extends HookConsumerWidget {
body: CustomScrollView(
slivers: [
SliverAppBar(
foregroundColor: appbarColor.value,
expandedHeight: 180,
pinned: true,
leading: PageBackButton(shadows: [iconShadow]),
leading: PageBackButton(
color: appbarColor.value,
shadows: [appbarShadow],
),
flexibleSpace: Stack(
children: [
Positioned.fill(
@ -85,8 +108,9 @@ class AccountProfileScreen extends HookConsumerWidget {
data.nick,
style: TextStyle(
color:
appbarColor.value ??
Theme.of(context).appBarTheme.foregroundColor,
shadows: [iconShadow],
shadows: [appbarShadow],
),
),
),

128
lib/screens/account/profile.g.dart
View File

@ -267,5 +267,133 @@ class _AccountBadgesProviderElement
String get uname => (origin as AccountBadgesProvider).uname;
}
String _$accountAppbarForcegroundColorHash() =>
r'f654a7a5594eda1500906e9ad023c22772257a9b';
/// See also [accountAppbarForcegroundColor].
@ProviderFor(accountAppbarForcegroundColor)
const accountAppbarForcegroundColorProvider =
AccountAppbarForcegroundColorFamily();
/// See also [accountAppbarForcegroundColor].
class AccountAppbarForcegroundColorFamily extends Family<AsyncValue<Color?>> {
/// See also [accountAppbarForcegroundColor].
const AccountAppbarForcegroundColorFamily();
/// See also [accountAppbarForcegroundColor].
AccountAppbarForcegroundColorProvider call(String uname) {
return AccountAppbarForcegroundColorProvider(uname);
}
@override
AccountAppbarForcegroundColorProvider getProviderOverride(
covariant AccountAppbarForcegroundColorProvider provider,
) {
return call(provider.uname);
}
static const Iterable<ProviderOrFamily>? _dependencies = null;
@override
Iterable<ProviderOrFamily>? get dependencies => _dependencies;
static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
@override
Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
_allTransitiveDependencies;
@override
String? get name => r'accountAppbarForcegroundColorProvider';
}
/// See also [accountAppbarForcegroundColor].
class AccountAppbarForcegroundColorProvider
extends AutoDisposeFutureProvider<Color?> {
/// See also [accountAppbarForcegroundColor].
AccountAppbarForcegroundColorProvider(String uname)
: this._internal(
(ref) => accountAppbarForcegroundColor(
ref as AccountAppbarForcegroundColorRef,
uname,
),
from: accountAppbarForcegroundColorProvider,
name: r'accountAppbarForcegroundColorProvider',
debugGetCreateSourceHash:
const bool.fromEnvironment('dart.vm.product')
? null
: _$accountAppbarForcegroundColorHash,
dependencies: AccountAppbarForcegroundColorFamily._dependencies,
allTransitiveDependencies:
AccountAppbarForcegroundColorFamily._allTransitiveDependencies,
uname: uname,
);
AccountAppbarForcegroundColorProvider._internal(
super._createNotifier, {
required super.name,
required super.dependencies,
required super.allTransitiveDependencies,
required super.debugGetCreateSourceHash,
required super.from,
required this.uname,
}) : super.internal();
final String uname;
@override
Override overrideWith(
FutureOr<Color?> Function(AccountAppbarForcegroundColorRef provider) create,
) {
return ProviderOverride(
origin: this,
override: AccountAppbarForcegroundColorProvider._internal(
(ref) => create(ref as AccountAppbarForcegroundColorRef),
from: from,
name: null,
dependencies: null,
allTransitiveDependencies: null,
debugGetCreateSourceHash: null,
uname: uname,
),
);
}
@override
AutoDisposeFutureProviderElement<Color?> createElement() {
return _AccountAppbarForcegroundColorProviderElement(this);
}
@override
bool operator ==(Object other) {
return other is AccountAppbarForcegroundColorProvider &&
other.uname == uname;
}
@override
int get hashCode {
var hash = _SystemHash.combine(0, runtimeType.hashCode);
hash = _SystemHash.combine(hash, uname.hashCode);
return _SystemHash.finish(hash);
}
}
@Deprecated('Will be removed in 3.0. Use Ref instead')
// ignore: unused_element
mixin AccountAppbarForcegroundColorRef on AutoDisposeFutureProviderRef<Color?> {
/// The parameter `uname` of this provider.
String get uname;
}
class _AccountAppbarForcegroundColorProviderElement
extends AutoDisposeFutureProviderElement<Color?>
with AccountAppbarForcegroundColorRef {
_AccountAppbarForcegroundColorProviderElement(super.provider);
@override
String get uname => (origin as AccountAppbarForcegroundColorProvider).uname;
}
// ignore_for_file: type=lint
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

36
lib/screens/posts/pub_profile.dart
View File

@ -7,13 +7,16 @@ import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:island/models/post.dart';
import 'package:island/models/user.dart';
import 'package:island/pods/config.dart';
import 'package:island/pods/network.dart';
import 'package:island/services/color.dart';
import 'package:island/widgets/account/badge.dart';
import 'package:island/widgets/account/status.dart';
import 'package:island/widgets/alert.dart';
import 'package:island/widgets/app_scaffold.dart';
import 'package:island/widgets/content/cloud_files.dart';
import 'package:island/widgets/post/post_list.dart';
import 'package:palette_generator/palette_generator.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:styled_widget/styled_widget.dart';
@ -47,6 +50,21 @@ Future<SnSubscriptionStatus> publisherSubscriptionStatus(
return SnSubscriptionStatus.fromJson(resp.data);
}
@riverpod
Future<Color?> publisherAppbarForcegroundColor(Ref ref, String pubName) async {
final publisher = await ref.watch(publisherProvider(pubName).future);
if (publisher.background == null) return null;
final palette = await PaletteGenerator.fromImageProvider(
CloudImageWidget.provider(
fileId: publisher.background!.id,
serverUrl: ref.watch(serverUrlProvider),
),
);
final dominantColor = palette.dominantColor?.color;
if (dominantColor == null) return null;
return dominantColor.computeLuminance() > 0.5 ? Colors.black : Colors.white;
}
@RoutePage()
class PublisherProfileScreen extends HookConsumerWidget {
final String name;
@ -60,6 +78,9 @@ class PublisherProfileScreen extends HookConsumerWidget {
final publisher = ref.watch(publisherProvider(name));
final badges = ref.watch(publisherBadgesProvider(name));
final subStatus = ref.watch(publisherSubscriptionStatusProvider(name));
final appbarColor = ref.watch(
publisherAppbarForcegroundColorProvider(name),
);
final subscribing = useState(false);
@ -91,8 +112,8 @@ class PublisherProfileScreen extends HookConsumerWidget {
}
}
final iconShadow = Shadow(
color: Colors.black54,
final appbarShadow = Shadow(
color: appbarColor.value?.invert ?? Colors.black54,
blurRadius: 5.0,
offset: Offset(1.0, 1.0),
);
@ -103,9 +124,13 @@ class PublisherProfileScreen extends HookConsumerWidget {
body: CustomScrollView(
slivers: [
SliverAppBar(
foregroundColor: appbarColor.value,
expandedHeight: 180,
pinned: true,
leading: PageBackButton(shadows: [iconShadow]),
leading: PageBackButton(
color: appbarColor.value,
shadows: [appbarShadow],
),
flexibleSpace: Stack(
children: [
Positioned.fill(
@ -124,8 +149,9 @@ class PublisherProfileScreen extends HookConsumerWidget {
data.nick,
style: TextStyle(
color:
appbarColor.value ??
Theme.of(context).appBarTheme.foregroundColor,
shadows: [iconShadow],
shadows: [appbarShadow],
),
),
background:
@ -147,7 +173,7 @@ class PublisherProfileScreen extends HookConsumerWidget {
status.isSubscribed
? Icons.remove_circle
: Icons.add_circle,
shadows: [iconShadow],
shadows: [appbarShadow],
),
),
error: (_, _) => const SizedBox(),

131
lib/screens/posts/pub_profile.g.dart
View File

@ -399,5 +399,136 @@ class _PublisherSubscriptionStatusProviderElement
String get pubName => (origin as PublisherSubscriptionStatusProvider).pubName;
}
String _$publisherAppbarForcegroundColorHash() =>
r'3ff2eebb48d3f3af1907052f471e648f5b14b13c';
/// See also [publisherAppbarForcegroundColor].
@ProviderFor(publisherAppbarForcegroundColor)
const publisherAppbarForcegroundColorProvider =
PublisherAppbarForcegroundColorFamily();
/// See also [publisherAppbarForcegroundColor].
class PublisherAppbarForcegroundColorFamily extends Family<AsyncValue<Color?>> {
/// See also [publisherAppbarForcegroundColor].
const PublisherAppbarForcegroundColorFamily();
/// See also [publisherAppbarForcegroundColor].
PublisherAppbarForcegroundColorProvider call(String pubName) {
return PublisherAppbarForcegroundColorProvider(pubName);
}
@override
PublisherAppbarForcegroundColorProvider getProviderOverride(
covariant PublisherAppbarForcegroundColorProvider provider,
) {
return call(provider.pubName);
}
static const Iterable<ProviderOrFamily>? _dependencies = null;
@override
Iterable<ProviderOrFamily>? get dependencies => _dependencies;
static const Iterable<ProviderOrFamily>? _allTransitiveDependencies = null;
@override
Iterable<ProviderOrFamily>? get allTransitiveDependencies =>
_allTransitiveDependencies;
@override
String? get name => r'publisherAppbarForcegroundColorProvider';
}
/// See also [publisherAppbarForcegroundColor].
class PublisherAppbarForcegroundColorProvider
extends AutoDisposeFutureProvider<Color?> {
/// See also [publisherAppbarForcegroundColor].
PublisherAppbarForcegroundColorProvider(String pubName)
: this._internal(
(ref) => publisherAppbarForcegroundColor(
ref as PublisherAppbarForcegroundColorRef,
pubName,
),
from: publisherAppbarForcegroundColorProvider,
name: r'publisherAppbarForcegroundColorProvider',
debugGetCreateSourceHash:
const bool.fromEnvironment('dart.vm.product')
? null
: _$publisherAppbarForcegroundColorHash,
dependencies: PublisherAppbarForcegroundColorFamily._dependencies,
allTransitiveDependencies:
PublisherAppbarForcegroundColorFamily._allTransitiveDependencies,
pubName: pubName,
);
PublisherAppbarForcegroundColorProvider._internal(
super._createNotifier, {
required super.name,
required super.dependencies,
required super.allTransitiveDependencies,
required super.debugGetCreateSourceHash,
required super.from,
required this.pubName,
}) : super.internal();
final String pubName;
@override
Override overrideWith(
FutureOr<Color?> Function(PublisherAppbarForcegroundColorRef provider)
create,
) {
return ProviderOverride(
origin: this,
override: PublisherAppbarForcegroundColorProvider._internal(
(ref) => create(ref as PublisherAppbarForcegroundColorRef),
from: from,
name: null,
dependencies: null,
allTransitiveDependencies: null,
debugGetCreateSourceHash: null,
pubName: pubName,
),
);
}
@override
AutoDisposeFutureProviderElement<Color?> createElement() {
return _PublisherAppbarForcegroundColorProviderElement(this);
}
@override
bool operator ==(Object other) {
return other is PublisherAppbarForcegroundColorProvider &&
other.pubName == pubName;
}
@override
int get hashCode {
var hash = _SystemHash.combine(0, runtimeType.hashCode);
hash = _SystemHash.combine(hash, pubName.hashCode);
return _SystemHash.finish(hash);
}
}
@Deprecated('Will be removed in 3.0. Use Ref instead')
// ignore: unused_element
mixin PublisherAppbarForcegroundColorRef
on AutoDisposeFutureProviderRef<Color?> {
/// The parameter `pubName` of this provider.
String get pubName;
}
class _PublisherAppbarForcegroundColorProviderElement
extends AutoDisposeFutureProviderElement<Color?>
with PublisherAppbarForcegroundColorRef {
_PublisherAppbarForcegroundColorProviderElement(super.provider);
@override
String get pubName =>
(origin as PublisherAppbarForcegroundColorProvider).pubName;
}
// ignore_for_file: type=lint
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

7
lib/services/color.dart Normal file
View File

@ -0,0 +1,7 @@
import 'package:flutter/widgets.dart';
extension ColorInversion on Color {
Color get invert {
return Color.fromARGB(alpha, 255 - red, 255 - green, 255 - blue);
}
}

4
lib/widgets/app_scaffold.dart
View File

@ -167,9 +167,10 @@ class AppScaffold extends StatelessWidget {
}
class PageBackButton extends StatelessWidget {
final Color? color;
final List<Shadow>? shadows;
final VoidCallback? onWillPop;
const PageBackButton({super.key, this.shadows, this.onWillPop});
const PageBackButton({super.key, this.shadows, this.onWillPop, this.color});
@override
Widget build(BuildContext context) {
@ -179,6 +180,7 @@ class PageBackButton extends StatelessWidget {
context.router.maybePop();
},
icon: Icon(
color: color,
(!kIsWeb && (Platform.isMacOS || Platform.isIOS))
? Symbols.arrow_back_ios_new
: Symbols.arrow_back,

8
pubspec.lock
View File

@ -1398,6 +1398,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "3.2.0"
palette_generator:
dependency: "direct main"
description:
name: palette_generator
sha256: "4420f7ccc3f0a4a906144e73f8b6267cd940b64f57a7262e95cb8cec3a8ae0ed"
url: "https://pub.dev"
source: hosted
version: "0.3.3+7"
pasteboard:
dependency: "direct main"
description:

1
pubspec.yaml
View File

@ -108,6 +108,7 @@ dependencies:
record: ^6.0.0
qr_flutter: ^4.1.0
flutter_otp_text_field: ^1.5.1+1
palette_generator: ^0.3.3+7
dev_dependencies:
flutter_test: