Skip to content

Commit d03ada6

Browse files
solid-yuriiprykhodkosolid-vovabeloded
solid-yuriiprykhodko
and
solid-vovabeloded
authored
Fix render overflows for top control bar and controls overlay in the example app. (#206)
* Fix render overflows for top control bar and controls overlay in the example app. * Use Padding instead of Container, extract variables and functions from layout code. * Add FittedBox to avoid overflows, add one more Wrap to top controls bar. * Remove unnecessary return Co-authored-by: solid-vovabeloded <[email protected]> * Don't use a callback builder for seeking in video overlay. Co-authored-by: solid-vovabeloded <[email protected]>
1 parent c19ccde commit d03ada6

File tree

2 files changed

+150
-147
lines changed

2 files changed

+150
-147
lines changed

‎flutter_vlc_player/example/lib/controls_overlay.dart‎

Lines changed: 101 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -6,112 +6,114 @@ class ControlsOverlay extends StatelessWidget {
66

77
final VlcPlayerController controller;
88

9+
static const double _playButtonIconSize = 80;
10+
static const double _replayButtonIconSize = 100;
11+
static const double _seekButtonIconSize = 48;
12+
13+
static const Duration _seekStepForward = Duration(seconds: 10);
14+
static const Duration _seekStepBackward = Duration(seconds: -10);
15+
16+
static const Color _iconColor = Colors.white;
17+
918
@override
1019
Widget build(BuildContext context) {
11-
return Stack(
12-
fit: StackFit.expand,
13-
children: <Widget>[
14-
AnimatedSwitcher(
15-
duration: Duration(milliseconds: 50),
16-
reverseDuration: Duration(milliseconds: 200),
17-
child: Builder(
18-
builder: (ctx) {
19-
if (controller.value.isEnded) {
20-
return Center(
21-
child: IconButton(
22-
onPressed: () async {
23-
await controller.stop();
24-
await controller.play();
25-
},
26-
color: Colors.white,
27-
iconSize: 100.0,
28-
icon: Icon(Icons.replay),
29-
),
30-
);
31-
} else {
32-
switch (controller.value.playingState) {
33-
case PlayingState.initializing:
34-
return CircularProgressIndicator();
20+
return AnimatedSwitcher(
21+
duration: Duration(milliseconds: 50),
22+
reverseDuration: Duration(milliseconds: 200),
23+
child: Builder(
24+
builder: (ctx) {
25+
if (controller.value.isEnded) {
26+
return Center(
27+
child: FittedBox(
28+
child: IconButton(
29+
onPressed: _replay,
30+
color: _iconColor,
31+
iconSize: _replayButtonIconSize,
32+
icon: Icon(Icons.replay),
33+
),
34+
),
35+
);
36+
}
3537

36-
case PlayingState.initialized:
37-
case PlayingState.stopped:
38-
case PlayingState.paused:
39-
return SizedBox.expand(
40-
child: Container(
41-
color: Colors.black45,
42-
child: Row(
43-
crossAxisAlignment: CrossAxisAlignment.center,
44-
mainAxisAlignment: MainAxisAlignment.spaceAround,
45-
children: [
46-
IconButton(
47-
onPressed: () async {
48-
if (controller.value.duration != null) {
49-
await controller.seekTo(
50-
controller.value.position -
51-
Duration(seconds: 10));
52-
}
53-
},
54-
color: Colors.white,
55-
iconSize: 60.0,
56-
icon: Icon(Icons.replay_10),
57-
),
58-
IconButton(
59-
onPressed: () async {
60-
await controller.play();
61-
},
62-
color: Colors.white,
63-
iconSize: 100.0,
64-
icon: Icon(Icons.play_arrow),
65-
),
66-
IconButton(
67-
onPressed: () async {
68-
if (controller.value.duration != null) {
69-
await controller.seekTo(
70-
controller.value.position +
71-
Duration(seconds: 10));
72-
}
73-
},
74-
color: Colors.white,
75-
iconSize: 60.0,
76-
icon: Icon(Icons.forward_10),
77-
),
78-
],
38+
switch (controller.value.playingState) {
39+
case PlayingState.initialized:
40+
case PlayingState.stopped:
41+
case PlayingState.paused:
42+
return SizedBox.expand(
43+
child: Container(
44+
color: Colors.black45,
45+
child: FittedBox(
46+
child: Row(
47+
crossAxisAlignment: CrossAxisAlignment.center,
48+
mainAxisAlignment: MainAxisAlignment.spaceAround,
49+
children: [
50+
IconButton(
51+
onPressed: () => _seekRelative(_seekStepBackward),
52+
color: _iconColor,
53+
iconSize: _seekButtonIconSize,
54+
icon: Icon(Icons.replay_10),
55+
),
56+
IconButton(
57+
onPressed: _play,
58+
color: _iconColor,
59+
iconSize: _playButtonIconSize,
60+
icon: Icon(Icons.play_arrow),
61+
),
62+
IconButton(
63+
onPressed: () => _seekRelative(_seekStepForward),
64+
color: _iconColor,
65+
iconSize: _seekButtonIconSize,
66+
icon: Icon(Icons.forward_10),
7967
),
80-
),
81-
);
68+
],
69+
),
70+
),
71+
),
72+
);
8273

83-
case PlayingState.buffering:
84-
case PlayingState.playing:
85-
return SizedBox.shrink();
74+
case PlayingState.buffering:
75+
case PlayingState.playing:
76+
return GestureDetector(onTap: _pause);
8677

87-
case PlayingState.ended:
88-
case PlayingState.error:
89-
return Center(
90-
child: IconButton(
91-
onPressed: () async {
92-
await controller.play();
93-
},
94-
color: Colors.white,
95-
iconSize: 100.0,
96-
icon: Icon(Icons.replay),
97-
),
98-
);
99-
}
100-
}
78+
case PlayingState.ended:
79+
case PlayingState.error:
80+
return Center(
81+
child: FittedBox(
82+
child: IconButton(
83+
onPressed: _replay,
84+
color: _iconColor,
85+
iconSize: _replayButtonIconSize,
86+
icon: Icon(Icons.replay),
87+
),
88+
),
89+
);
90+
default:
10191
return SizedBox.shrink();
102-
},
103-
),
104-
),
105-
GestureDetector(
106-
onTap: !controller.value.isPlaying
107-
? null
108-
: () async {
109-
if (controller.value.isPlaying) {
110-
await controller.pause();
111-
}
112-
},
113-
),
114-
],
92+
}
93+
},
94+
),
11595
);
11696
}
97+
98+
Future<void> _play() {
99+
return controller.play();
100+
}
101+
102+
Future<void> _replay() async {
103+
await controller.stop();
104+
await controller.play();
105+
}
106+
107+
Future<void> _pause() async {
108+
if (controller.value.isPlaying) {
109+
await controller.pause();
110+
}
111+
}
112+
113+
/// Returns a callback which seeks the video relative to current playing time.
114+
Future<void> _seekRelative(Duration seekStep) async {
115+
if (controller.value.duration != null) {
116+
await controller.seekTo(controller.value.position + seekStep);
117+
}
118+
}
117119
}

0 commit comments

Comments
 (0)