fix: speed selector wheel was not visible (#41)

This commit is contained in:
Dr.Blank 2024-09-30 04:19:15 -04:00 committed by GitHub
parent a790a7e583
commit 90913162cc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 59 additions and 48 deletions

View file

@ -29,9 +29,6 @@ class PlayerSpeedAdjustButton extends HookConsumerWidget {
await showModalBottomSheet<bool>( await showModalBottomSheet<bool>(
context: context, context: context,
barrierLabel: 'Select Speed', barrierLabel: 'Select Speed',
constraints: const BoxConstraints(
maxHeight: 225,
),
builder: (context) { builder: (context) {
return SpeedSelector( return SpeedSelector(
onSpeedSelected: (speed) { onSpeedSelected: (speed) {

View file

@ -57,23 +57,34 @@ class SpeedSelector extends HookConsumerWidget {
initialItem: availableSpeedsList.indexOf(currentSpeed), initialItem: availableSpeedsList.indexOf(currentSpeed),
); );
const double itemExtent = 25; const double itemExtent = 25;
return Padding( return Column(
padding: const EdgeInsets.all(8.0), mainAxisSize: MainAxisSize.min,
child: Column( children: [
children: [ // the title
// the title Padding(
Padding( padding: const EdgeInsets.only(top: 16.0, bottom: 8.0),
padding: const EdgeInsets.all(8.0), child: Center(
child: Center( child: Text(
child: Text( 'Playback Speed: ${speedState.value}x',
'Playback Speed: ${speedState.value}x', style: Theme.of(context).textTheme.titleLarge,
style: Theme.of(context).textTheme.titleLarge,
),
), ),
), ),
),
// the speed selector // a inverted triangle to indicate the speed selector
Flexible( Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Icon(
Icons.arrow_drop_down,
color: Theme.of(context).colorScheme.onSurface,
),
),
// the speed selector
Padding(
padding: const EdgeInsets.only(bottom: 8.0, right: 8.0, left: 8.0),
child: SizedBox(
height: 80,
child: SpeedWheel( child: SpeedWheel(
availableSpeedsList: availableSpeedsList, availableSpeedsList: availableSpeedsList,
speedState: speedState, speedState: speedState,
@ -81,9 +92,12 @@ class SpeedSelector extends HookConsumerWidget {
itemExtent: itemExtent, itemExtent: itemExtent,
), ),
), ),
),
// the speed buttons // the speed buttons
Wrap( Padding(
padding: const EdgeInsets.all(8.0),
child: Wrap(
spacing: 8.0, spacing: 8.0,
alignment: WrapAlignment.center, alignment: WrapAlignment.center,
runAlignment: WrapAlignment.center, runAlignment: WrapAlignment.center,
@ -133,8 +147,8 @@ class SpeedSelector extends HookConsumerWidget {
) )
.toList(), .toList(),
), ),
], ),
), ],
); );
} }
} }
@ -178,7 +192,7 @@ class SpeedWheel extends StatelessWidget {
}, },
), ),
// the speed selector wheel // the speed selector wheel
Expanded( Flexible(
child: ListWheelScrollViewX( child: ListWheelScrollViewX(
controller: scrollController, controller: scrollController,
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
@ -189,9 +203,7 @@ class SpeedWheel extends StatelessWidget {
physics: const FixedExtentScrollPhysics(), physics: const FixedExtentScrollPhysics(),
children: availableSpeedsList children: availableSpeedsList
.map( .map(
(speed) => Expanded( (speed) => SpeedLine(itemExtent: itemExtent, speed: speed),
child: SpeedLine(itemExtent: itemExtent, speed: speed),
),
) )
.toList(), .toList(),
onSelectedItemChanged: (index) { onSelectedItemChanged: (index) {
@ -236,34 +248,36 @@ class SpeedLine extends StatelessWidget {
return Column( return Column(
children: [ children: [
// a vertical line // a vertical line
Container( Expanded(
height: itemExtent * 2, child: Container(
// thick if multiple of 1, thin if multiple of 0.5 and transparent if multiple of 0.05 // height: itemExtent,
width: speed % 0.5 == 0 // thick if multiple of 1, thin if multiple of 0.5 and transparent if multiple of 0.05
? 3 width: speed % 0.5 == 0
: speed % 0.25 == 0 ? 3
? 2 : speed % 0.25 == 0
: 0.5, ? 2
color: Theme.of(context).colorScheme.onSurface, : 0.5,
color: Theme.of(context).colorScheme.onSurface,
),
), ),
// the speed text but only at .5 increments of speed // the speed text but only at .5 increments of speed
if (speed % 0.25 == 0) // if (speed % 0.25 == 0)
Expanded( Opacity(
child: Text.rich( opacity: speed % 0.25 == 0 ? 1 : 0,
TextSpan( child: Text.rich(
text: speed.floor().toString(), TextSpan(
children: [ text: speed.floor().toString(),
TextSpan( children: [
text: '.${speed.toStringAsFixed(2).split('.').last}', TextSpan(
style: TextStyle( text: '.${speed.toStringAsFixed(2).split('.').last}',
fontSize: style: TextStyle(
Theme.of(context).textTheme.labelSmall?.fontSize, fontSize: Theme.of(context).textTheme.labelSmall?.fontSize,
),
), ),
], ),
), ],
), ),
), ),
),
], ],
); );
} }