feat(mobile): use material design 3 slider (#26829)

* feat(mobile): use material design 3 slider

The new slider is easier to use, and looks more modern.

* chore: add shadow to button and text for better visibility

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Thomas
2026-03-11 01:58:01 +00:00
committed by GitHub
parent 4571940a4e
commit 9fc32b6f7a
2 changed files with 14 additions and 10 deletions
-2
View File
@@ -62,8 +62,6 @@ ThemeData getThemeData({required ColorScheme colorScheme, required Locale locale
), ),
chipTheme: const ChipThemeData(side: BorderSide.none), chipTheme: const ChipThemeData(side: BorderSide.none),
sliderTheme: const SliderThemeData( sliderTheme: const SliderThemeData(
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 7),
trackHeight: 2.0,
// ignore: deprecated_member_use // ignore: deprecated_member_use
year2023: false, year2023: false,
), ),
@@ -14,6 +14,8 @@ import 'package:immich_mobile/widgets/asset_viewer/animated_play_pause.dart';
class VideoControls extends HookConsumerWidget { class VideoControls extends HookConsumerWidget {
final String videoPlayerName; final String videoPlayerName;
static const List<Shadow> _controlShadows = [Shadow(color: Colors.black87, blurRadius: 6, offset: Offset(0, 1))];
const VideoControls({super.key, required this.videoPlayerName}); const VideoControls({super.key, required this.videoPlayerName});
void _toggle(WidgetRef ref, bool isCasting) { void _toggle(WidgetRef ref, bool isCasting) {
@@ -70,7 +72,9 @@ class VideoControls extends HookConsumerWidget {
children: [ children: [
Row( Row(
children: [ children: [
IconButton( IconTheme(
data: const IconThemeData(shadows: _controlShadows),
child: IconButton(
iconSize: 32, iconSize: 32,
padding: const EdgeInsets.all(12), padding: const EdgeInsets.all(12),
constraints: const BoxConstraints(), constraints: const BoxConstraints(),
@@ -79,6 +83,7 @@ class VideoControls extends HookConsumerWidget {
: AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying), : AnimatedPlayPause(color: Colors.white, size: 32, playing: isPlaying),
onPressed: () => _toggle(ref, isCasting), onPressed: () => _toggle(ref, isCasting),
), ),
),
const Spacer(), const Spacer(),
Text( Text(
"${position.format()} / ${duration.format()}", "${position.format()} / ${duration.format()}",
@@ -86,6 +91,7 @@ class VideoControls extends HookConsumerWidget {
color: Colors.white, color: Colors.white,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontFeatures: [FontFeature.tabularFigures()], fontFeatures: [FontFeature.tabularFigures()],
shadows: _controlShadows,
), ),
), ),
const SizedBox(width: 16), const SizedBox(width: 16),