fix: generate playlist page max width

This commit is contained in:
Kingkor Roy Tirtho 2023-08-15 13:13:07 +06:00
parent c69f81ec6f
commit 4adf6951d9
2 changed files with 276 additions and 255 deletions

View File

@ -1,12 +1,25 @@
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
// ignore: constant_identifier_names
const Breakpoints = (
xs: 480.0,
sm: 640.0,
md: 820.0,
lg: 1024.0,
xl: 1280.0,
);
extension ContainerBreakpoints on BoxConstraints { extension ContainerBreakpoints on BoxConstraints {
bool get isXs => biggest.width <= 480; bool get isXs => biggest.width <= Breakpoints.xs;
bool get isSm => biggest.width > 480 && biggest.width <= 640; bool get isSm =>
bool get isMd => biggest.width > 640 && biggest.width <= 820; biggest.width > Breakpoints.xs && biggest.width <= Breakpoints.sm;
bool get isLg => biggest.width > 820 && biggest.width <= 1024; bool get isMd =>
bool get isXl => biggest.width > 1024 && biggest.width <= 1280; biggest.width > Breakpoints.sm && biggest.width <= Breakpoints.md;
bool get is2Xl => biggest.width > 1280; bool get isLg =>
biggest.width > Breakpoints.md && biggest.width <= Breakpoints.lg;
bool get isXl =>
biggest.width > Breakpoints.lg && biggest.width <= Breakpoints.xl;
bool get is2Xl => biggest.width > Breakpoints.xl;
bool get smAndUp => isSm || isMd || isLg || isXl || is2Xl; bool get smAndUp => isSm || isMd || isLg || isXl || is2Xl;
bool get mdAndUp => isMd || isLg || isXl || is2Xl; bool get mdAndUp => isMd || isLg || isXl || is2Xl;
@ -20,12 +33,12 @@ extension ContainerBreakpoints on BoxConstraints {
} }
extension ScreenBreakpoints on MediaQueryData { extension ScreenBreakpoints on MediaQueryData {
bool get isXs => size.width <= 480; bool get isXs => size.width <= Breakpoints.xs;
bool get isSm => size.width > 480 && size.width <= 640; bool get isSm => size.width > Breakpoints.xs && size.width <= Breakpoints.sm;
bool get isMd => size.width > 640 && size.width <= 820; bool get isMd => size.width > Breakpoints.sm && size.width <= Breakpoints.md;
bool get isLg => size.width > 820 && size.width <= 1024; bool get isLg => size.width > Breakpoints.md && size.width <= Breakpoints.lg;
bool get isXl => size.width > 1024 && size.width <= 1280; bool get isXl => size.width > Breakpoints.lg && size.width <= Breakpoints.xl;
bool get is2Xl => size.width > 1280; bool get is2Xl => size.width > Breakpoints.xl;
bool get smAndUp => isSm || isMd || isLg || isXl || is2Xl; bool get smAndUp => isSm || isMd || isLg || isXl || is2Xl;
bool get mdAndUp => isMd || isLg || isXl || is2Xl; bool get mdAndUp => isMd || isLg || isXl || is2Xl;

View File

@ -248,7 +248,10 @@ class PlaylistGeneratorPage extends HookConsumerWidget {
title: Text(context.l10n.generate_playlist), title: Text(context.l10n.generate_playlist),
centerTitle: true, centerTitle: true,
), ),
body: SliderTheme( body: Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: Breakpoints.lg),
child: SliderTheme(
data: const SliderThemeData( data: const SliderThemeData(
overlayShape: RoundSliderOverlayShape(), overlayShape: RoundSliderOverlayShape(),
), ),
@ -463,10 +466,13 @@ class PlaylistGeneratorPage extends HookConsumerWidget {
genres.value.isEmpty genres.value.isEmpty
? null ? null
: () { : () {
final PlaylistGenerateResultRouteState routeState = ( final PlaylistGenerateResultRouteState
routeState = (
seeds: ( seeds: (
artists: artists.value.map((a) => a.id!).toList(), artists:
tracks: tracks.value.map((t) => t.id!).toList(), artists.value.map((a) => a.id!).toList(),
tracks:
tracks.value.map((t) => t.id!).toList(),
genres: genres.value genres: genres.value
), ),
market: market.value, market: market.value,
@ -499,6 +505,8 @@ class PlaylistGeneratorPage extends HookConsumerWidget {
}), }),
), ),
), ),
),
),
); );
} }
} }