Funkwhale
/
tsacdop-podcast-app-android
mirror of https://github.com/stonega/tsacdop
1
0
Fork 0
Code Issues Releases Wiki Activity

modified: lib/home/audio_player.dart 

modified:   lib/home/audiopanel.dart
	modified:   lib/home/home.dart
	modified:   lib/home/homescroll.dart
Improved audio widget
This commit is contained in:
stonegate 2020-02-14 19:52:03 +08:00
parent 28595bc8da
commit 05d2390b01
4 changed files with 247 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

304
lib/home/audio_player.dart
View File

@ -370,138 +370,150 @@ class _PlayerWidgetState extends State<PlayerWidget> {
} }
Widget _expandedPanel() => Container( Widget _expandedPanel() => Container(
height: 300, height: 300,
color: Colors.grey[100], color: Colors.grey[100],
padding: EdgeInsets.symmetric(horizontal: 10.0), padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: <Widget>[ children: <Widget>[
Container( Container(
padding: EdgeInsets.all(30), height: 100.0,
alignment: Alignment.center, padding: EdgeInsets.all(30),
child: (_title.length > 50) alignment: Alignment.center,
? Marquee( child: (_title.length > 10)
text: _title, ? Marquee(
style: TextStyle( text: _title,
fontWeight: FontWeight.bold, fontSize: 35), style: TextStyle(
scrollAxis: Axis.horizontal, fontWeight: FontWeight.bold, fontSize: 20),
crossAxisAlignment: CrossAxisAlignment.start, scrollAxis: Axis.horizontal,
blankSpace: 30.0, crossAxisAlignment: CrossAxisAlignment.start,
velocity: 50.0, blankSpace: 30.0,
pauseAfterRound: Duration(seconds: 1), velocity: 50.0,
startPadding: 30.0, pauseAfterRound: Duration(seconds: 1),
accelerationDuration: Duration(seconds: 1), startPadding: 30.0,
accelerationCurve: Curves.linear, accelerationDuration: Duration(seconds: 1),
decelerationDuration: Duration(milliseconds: 500), accelerationCurve: Curves.linear,
decelerationCurve: Curves.easeOut, decelerationDuration: Duration(milliseconds: 500),
) decelerationCurve: Curves.easeOut,
: Text( )
_title, : Text(
style: TextStyle( _title,
fontWeight: FontWeight.bold, fontSize: 20), style: TextStyle(
), fontWeight: FontWeight.bold, fontSize: 20),
),
),
Container(
padding: EdgeInsets.only(left: 40, right: 40, top: 20),
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.blue[100],
inactiveTrackColor: Colors.grey[300],
trackHeight: 3.0,
thumbColor: Colors.blue[400],
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 6.0),
overlayColor: Colors.blue.withAlpha(32),
overlayShape: RoundSliderOverlayShape(overlayRadius: 14.0),
),
child: Slider(
value: _seekSliderValue,
onChanged: (double val) {
setState(() => _seekSliderValue = val);
final double positionSeconds =
val * _backgroundAudioDurationSeconds;
_backgroundAudio.seek(positionSeconds);
AudioSystem.instance
.setPlaybackState(true, positionSeconds);
}),
), ),
Container( ),
padding: EdgeInsets.only(left: 40, right: 40, top: 20), Container(
child: SliderTheme( height: 20.0,
data: SliderTheme.of(context).copyWith( padding: EdgeInsets.symmetric(horizontal: 50.0),
activeTrackColor: Colors.blue[100], child: Row(
inactiveTrackColor: Colors.grey[300], children: <Widget>[
trackHeight: 3.0, Text(
thumbColor: Colors.blue[400], _stringForSeconds(_backgroundAudioPositionSeconds) ?? '',
thumbShape: style: TextStyle(fontSize: 10),
RoundSliderThumbShape(enabledThumbRadius: 6.0),
overlayColor: Colors.blue.withAlpha(32),
overlayShape:
RoundSliderOverlayShape(overlayRadius: 14.0),
), ),
child: Slider( Expanded(
value: _seekSliderValue, child: Container(
onChanged: (double val) { alignment: Alignment.center,
setState(() => _seekSliderValue = val); child: _remoteErrorMessage != null
final double positionSeconds = ? Text(_remoteErrorMessage,
val * _backgroundAudioDurationSeconds; style: const TextStyle(
_backgroundAudio.seek(positionSeconds); color: const Color(0xFFFF0000)))
AudioSystem.instance : Text(
.setPlaybackState(true, positionSeconds); _remoteAudioLoading ? 'Buffring...' : '',
}), style: TextStyle(color: Colors.blue),
), ),
),
Container(
height: 20.0,
padding: EdgeInsets.symmetric(horizontal: 50.0),
child: Row(
children: <Widget>[
Text(
_stringForSeconds(_backgroundAudioPositionSeconds) ??
'',
style: TextStyle(fontSize: 10),
), ),
Expanded( ),
child: Container( Text(
alignment: Alignment.center, _stringForSeconds(_backgroundAudioDurationSeconds) ?? '',
child: _remoteErrorMessage != null style: TextStyle(fontSize: 10),
? Text(_remoteErrorMessage, ),
style: const TextStyle(
color: const Color(0xFFFF0000)))
: Text(
_remoteAudioLoading ? 'Buffring...' : '',
style: TextStyle(color: Colors.blue),
),
),
),
Text(
_stringForSeconds(_backgroundAudioDurationSeconds) ??
'',
style: TextStyle(fontSize: 10),
),
],
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
padding: EdgeInsets.symmetric(horizontal: 30.0),
onPressed: _backgroundAudioPlaying
? () => _forwardBackgroundAudio(-10)
: null,
iconSize: 32.0,
icon: Icon(Icons.replay_10),
color: Colors.black),
_backgroundAudioPlaying
? IconButton(
padding: EdgeInsets.symmetric(horizontal: 30.0),
onPressed: _backgroundAudioPlaying
? () {
_pauseBackgroundAudio();
}
: null,
iconSize: 40.0,
icon: Icon(Icons.pause_circle_filled),
color: Colors.black)
: IconButton(
padding: EdgeInsets.symmetric(horizontal: 30.0),
onPressed: _backgroundAudioPlaying
? null
: () {
_resumeBackgroundAudio();
},
iconSize: 40.0,
icon: Icon(Icons.play_circle_filled),
color: Colors.black),
IconButton(
padding: EdgeInsets.symmetric(horizontal: 30.0),
onPressed: _backgroundAudioPlaying
? () => _forwardBackgroundAudio(30)
: null,
iconSize: 32.0,
icon: Icon(Icons.forward_30),
color: Colors.black),
], ],
), ),
]), ),
Container(
height: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Material(
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.symmetric(horizontal: 30.0),
onPressed: _backgroundAudioPlaying
? () => _forwardBackgroundAudio(-10)
: null,
iconSize: 32.0,
icon: Icon(Icons.replay_10),
color: Colors.black),
),
_backgroundAudioPlaying
? Material(
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.symmetric(horizontal: 30.0),
onPressed: _backgroundAudioPlaying
? () {
_pauseBackgroundAudio();
}
: null,
iconSize: 40.0,
icon: Icon(Icons.pause_circle_filled),
color: Colors.black),
)
: Material(
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.symmetric(horizontal: 30.0),
onPressed: _backgroundAudioPlaying
? null
: () {
_resumeBackgroundAudio();
},
iconSize: 40.0,
icon: Icon(Icons.play_circle_filled),
color: Colors.black),
),
Material(
color: Colors.transparent,
child: IconButton(
padding: EdgeInsets.symmetric(horizontal: 30.0),
onPressed: _backgroundAudioPlaying
? () => _forwardBackgroundAudio(30)
: null,
iconSize: 32.0,
icon: Icon(Icons.forward_30),
color: Colors.black),
),
],
),
),
]),
); );
Widget _miniPanel() => Container( Widget _miniPanel() => Container(
height: 60, height: 60,
@ -524,12 +536,13 @@ class _PlayerWidgetState extends State<PlayerWidget> {
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[ children: <Widget>[
Container( Container(
alignment: Alignment.centerLeft,
width: 220, width: 220,
child: (_title.length > 30) child: (_title.length > 30)
? Marquee( ? Marquee(
text: _title, text: _title,
style: TextStyle(fontWeight: FontWeight.bold), style: TextStyle(fontWeight: FontWeight.bold),
scrollAxis: Axis.horizontal, scrollAxis: Axis.vertical,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
blankSpace: 30.0, blankSpace: 30.0,
velocity: 50.0, velocity: 50.0,
@ -543,25 +556,32 @@ class _PlayerWidgetState extends State<PlayerWidget> {
: Text( : Text(
_title, _title,
style: TextStyle(fontWeight: FontWeight.bold), style: TextStyle(fontWeight: FontWeight.bold),
maxLines: 2,
), ),
), ),
Spacer(), Spacer(),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 20.0), padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row( child: _remoteAudioLoading
children: <Widget>[ ? Text(
Text( 'Buffring...',
_stringForSeconds(_backgroundAudioDurationSeconds - style: TextStyle(color: Colors.blue),
_backgroundAudioPositionSeconds) ?? )
'', : Row(
style: TextStyle(color: _c), children: <Widget>[
), Text(
Text( _stringForSeconds(
' Left', _backgroundAudioDurationSeconds -
style: TextStyle(color: _c), _backgroundAudioPositionSeconds) ??
), '',
], style: TextStyle(color: _c),
), ),
Text(
' Left',
style: TextStyle(color: _c),
),
],
),
), ),
Row( Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,

109
lib/home/audiopanel.dart
View File

@ -20,7 +20,6 @@ class _AudioPanelState extends State<AudioPanel>
@override @override
void initState() { void initState() {
super.initState();
initSize = minSize; initSize = minSize;
_controller = _controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 100)) AnimationController(vsync: this, duration: Duration(milliseconds: 100))
@ -29,6 +28,7 @@ class _AudioPanelState extends State<AudioPanel>
}); });
_animation = _animation =
Tween<double>(begin: initSize, end: initSize).animate(_controller); Tween<double>(begin: initSize, end: initSize).animate(_controller);
super.initState();
} }
@override @override
@ -39,63 +39,81 @@ class _AudioPanelState extends State<AudioPanel>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return GestureDetector( return Stack(children: <Widget>[
onVerticalDragStart: (event) => _start(event), Container(
onVerticalDragUpdate: (event) => _update(event), child: (_animation.value > minSize + 30)
onVerticalDragEnd: (event) => _end(), ? Positioned.fill(
child: Container( child: GestureDetector(
height: (_animation.value >= maxSize) onTap: () => _backToMini(),
? maxSize child: Container(
: (_animation.value <= minSize) ? minSize : _animation.value, color: Colors.white.withOpacity(0.5),
child: _animation.value < minSize + 30
? Opacity(
opacity: _animation.value > minSize
? (minSize + 30 - _animation.value) / 40
: 1,
child: Container(
child: widget.miniPanel,
),
)
: Container(
decoration: BoxDecoration(
color: Colors.grey[100],
boxShadow: [
BoxShadow(
color: Colors.grey[400].withOpacity(0.8),
spreadRadius: 3,
blurRadius: 6,
offset: Offset(0, -1),
)
],
),
child: SingleChildScrollView(
child: Opacity(
opacity: _animation.value < (maxSize - 50)
? (_animation.value - minSize) /
(maxSize - minSize - 50)
: 1,
child: Container(
height: maxSize,
child: widget.expandedPanel,
),
), ),
), ),
), )
: Center(),
), ),
); Container(
alignment: Alignment.bottomCenter,
child: GestureDetector(
onVerticalDragStart: (event) => _start(event),
onVerticalDragUpdate: (event) => _update(event),
onVerticalDragEnd: (event) => _end(),
child: Container(
height: (_animation.value >= maxSize)
? maxSize
: (_animation.value <= minSize) ? minSize : _animation.value,
child: _animation.value < minSize + 30
? Container(
color: Colors.grey[100],
child: Opacity(
opacity: _animation.value > minSize
? (minSize + 30 - _animation.value) / 40
: 1,
child: Container(
child: widget.miniPanel,
),
),
)
: Container(
color: Colors.grey[100],
child: SingleChildScrollView(
child: Opacity(
opacity: _animation.value < (maxSize - 50)
? (_animation.value - minSize) /
(maxSize - minSize - 50)
: 1,
child: Container(
height: maxSize,
child: widget.expandedPanel,
),
),
),
),
),
),
),
]);
}
_backToMini() {
setState(() {
_animation =
Tween<double>(begin: initSize, end: minSize).animate(_controller);
initSize = minSize;
});
_controller.forward();
} }
_start(DragStartDetails event) { _start(DragStartDetails event) {
print(event.localPosition.dy);
setState(() { setState(() {
_startdy = event.localPosition.dy; _startdy = event.localPosition.dy;
_animation =
Tween<double>(begin: initSize, end: initSize).animate(_controller);
}); });
_controller.forward(); _controller.forward();
} }
_update(DragUpdateDetails event) { _update(DragUpdateDetails event) {
print(event.localPosition.dy);
setState(() { setState(() {
_move = _startdy - event.localPosition.dy; _move = _startdy - event.localPosition.dy;
_animation = Tween<double>(begin: initSize, end: initSize + _move) _animation = Tween<double>(begin: initSize, end: initSize + _move)
@ -105,7 +123,6 @@ class _AudioPanelState extends State<AudioPanel>
} }
_end() { _end() {
print(_animation.value);
if (_animation.value >= (maxSize + minSize) / 2.2 && if (_animation.value >= (maxSize + minSize) / 2.2 &&
_animation.value < maxSize) { _animation.value < maxSize) {
setState(() { setState(() {

6
lib/home/home.dart
View File

@ -16,6 +16,11 @@ class Home extends StatefulWidget {
} }
class _HomeState extends State<Home> { class _HomeState extends State<Home> {
@override
void initState(){
super.initState();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Stack(children: <Widget>[ return Stack(children: <Widget>[
@ -53,7 +58,6 @@ class _HomeState extends State<Home> {
], ],
), ),
Container( Container(
alignment: Alignment.bottomCenter,
child: PlayerWidget()), child: PlayerWidget()),
]); ]);
} }

31
lib/home/homescroll.dart
View File

@ -170,19 +170,22 @@ class _PodcastPreviewState extends State<PodcastPreview> {
Text(widget.podcastLocal.title, Text(widget.podcastLocal.title,
style: TextStyle(fontWeight: FontWeight.bold, color: _c)), style: TextStyle(fontWeight: FontWeight.bold, color: _c)),
Spacer(), Spacer(),
IconButton( Material(
icon: Icon(Icons.arrow_forward), color: Colors.transparent,
splashColor: Colors.transparent, child: IconButton(
tooltip: 'See All', icon: Icon(Icons.arrow_forward),
onPressed: () { splashColor: Colors.transparent,
Navigator.push( tooltip: 'See All',
context, onPressed: () {
SlideLeftRoute( Navigator.push(
page: PodcastDetail( context,
podcastLocal: widget.podcastLocal, SlideLeftRoute(
)), page: PodcastDetail(
); podcastLocal: widget.podcastLocal,
}, )),
);
},
),
), ),
], ],
), ),
@ -228,7 +231,7 @@ class ShowEpisode extends StatelessWidget {
ScaleRoute( ScaleRoute(
page: EpisodeDetail( page: EpisodeDetail(
episodeItem: podcast[index], episodeItem: podcast[index],
heroTag: 'scroll', heroTag: 'scroll',
//unique hero tag //unique hero tag
)), )),
); );