Change episode detail page download button ui.

This commit is contained in:
stonegate 2020-07-25 16:59:27 +08:00
parent 57e7bfbf3f
commit 7c828f1ee6
5 changed files with 163 additions and 68 deletions

View File

@ -8,6 +8,7 @@ import 'package:flutter_downloader/flutter_downloader.dart';
import 'package:permission_handler/permission_handler.dart'; import 'package:permission_handler/permission_handler.dart';
import 'package:fluttertoast/fluttertoast.dart'; import 'package:fluttertoast/fluttertoast.dart';
import 'package:connectivity/connectivity.dart'; import 'package:connectivity/connectivity.dart';
import 'package:tsacdop/util/custom_widget.dart';
import '../state/download_state.dart'; import '../state/download_state.dart';
import '../state/audio_state.dart'; import '../state/audio_state.dart';
@ -166,10 +167,18 @@ class _DownloadButtonState extends State<DownloadButton> {
return Selector<SettingState, bool>( return Selector<SettingState, bool>(
selector: (_, settings) => settings.downloadUsingData, selector: (_, settings) => settings.downloadUsingData,
builder: (_, data, __) => _buttonOnMenu( builder: (_, data, __) => _buttonOnMenu(
Icon( Center(
LineIcons.download_solid, child: SizedBox(
//size: 15, height: 18,
color: Colors.grey[700], width: 18,
child: CustomPaint(
painter: DownloadPainter(
color: Colors.grey[700],
fraction: 0,
progressColor: context.accentColor,
),
),
),
), ),
() => _requestDownload(task.episode, data)), () => _requestDownload(task.episode, data)),
); );
@ -185,15 +194,19 @@ class _DownloadButtonState extends State<DownloadButton> {
height: 50.0, height: 50.0,
alignment: Alignment.center, alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 18.0), padding: EdgeInsets.symmetric(horizontal: 18.0),
child: SizedBox( child: TweenAnimationBuilder(
height: 18, duration: Duration(milliseconds: 1000),
width: 18, tween: Tween(begin: 0.0, end: 1.0),
child: CircularProgressIndicator( builder: (context, fraction, child) => SizedBox(
backgroundColor: Colors.grey[500], height: 18,
strokeWidth: 2, width: 18,
valueColor: AlwaysStoppedAnimation<Color>( child: CustomPaint(
Theme.of(context).accentColor), painter: DownloadPainter(
value: task.progress / 100, color: Colors.grey[700],
fraction: fraction,
progressColor: context.accentColor,
progress: task.progress / 100),
),
), ),
), ),
), ),
@ -211,14 +224,20 @@ class _DownloadButtonState extends State<DownloadButton> {
height: 50.0, height: 50.0,
alignment: Alignment.center, alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 18), padding: EdgeInsets.symmetric(horizontal: 18),
child: SizedBox( child: TweenAnimationBuilder(
height: 18, duration: Duration(milliseconds: 500),
width: 18, tween: Tween(begin: 0.0, end: 1.0),
child: CircularProgressIndicator( builder: (context, fraction, child) => SizedBox(
backgroundColor: Colors.grey[500], height: 18,
strokeWidth: 2, width: 18,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red), child: CustomPaint(
value: task.progress / 100, painter: DownloadPainter(
color: Colors.grey[700],
fraction: 1,
progressColor: context.accentColor,
progress: task.progress / 100,
pauseProgress: fraction),
),
), ),
), ),
), ),

View File

@ -815,48 +815,43 @@ class _SearchResultDetailState extends State<SearchResultDetail>
overflow: TextOverflow.fade, overflow: TextOverflow.fade,
style: TextStyle(color: context.accentColor), style: TextStyle(color: context.accentColor),
), ),
Padding( !_isSubscribed
padding: const EdgeInsets.only(top: 8), ? OutlineButton(
child: !_isSubscribed highlightedBorderColor:
? OutlineButton( context.accentColor,
highlightedBorderColor: shape: RoundedRectangleBorder(
context.accentColor, borderRadius:
shape: RoundedRectangleBorder( BorderRadius.circular(100.0),
borderRadius: side: BorderSide(
BorderRadius.circular(100.0), color: context.accentColor)),
side: BorderSide( splashColor:
color: context.accentColor)), context.accentColor.withOpacity(0.5),
splashColor: context.accentColor child: Text(s.subscribe,
.withOpacity(0.5), style: TextStyle(
child: Text(s.subscribe, color: context.accentColor)),
style: TextStyle( onPressed: () {
color: context.accentColor)), subscribePodcast(widget.onlinePodcast);
onPressed: () { setState(() {
subscribePodcast( _isSubscribed = true;
widget.onlinePodcast); });
setState(() { Fluttertoast.showToast(
_isSubscribed = true; msg: s.podcastSubscribed,
}); gravity: ToastGravity.BOTTOM,
Fluttertoast.showToast( );
msg: s.podcastSubscribed, })
gravity: ToastGravity.BOTTOM, : OutlineButton(
); color:
}) context.accentColor.withOpacity(0.5),
: OutlineButton( shape: RoundedRectangleBorder(
color: context.accentColor borderRadius:
.withOpacity(0.5), BorderRadius.circular(100.0),
shape: RoundedRectangleBorder( side: BorderSide(
borderRadius: color: Colors.grey[500])),
BorderRadius.circular(100.0), highlightedBorderColor: Colors.grey[500],
side: BorderSide( disabledTextColor: Colors.grey[500],
color: Colors.grey[500])), child: Text(s.subscribe),
highlightedBorderColor: disabledBorderColor: Colors.grey[500],
Colors.grey[500], onPressed: () {})
disabledTextColor: Colors.grey[500],
child: Text(s.subscribe),
disabledBorderColor: Colors.grey[500],
onPressed: () {}),
)
], ],
), ),
), ),

View File

@ -348,7 +348,8 @@ class AudioPlayerNotifier extends ChangeNotifier {
.where((event) => event != null) .where((event) => event != null)
.listen((event) async { .listen((event) async {
_current = DateTime.now(); _current = DateTime.now();
_audioState = event?.processingState; if (event.processingState != AudioProcessingState.none)
_audioState = event.processingState;
_playing = event?.playing; _playing = event?.playing;
_currentSpeed = event.speed; _currentSpeed = event.speed;
_currentPosition = event.currentPosition.inMilliseconds ?? 0; _currentPosition = event.currentPosition.inMilliseconds ?? 0;

View File

@ -41,8 +41,8 @@ class _AudioPanelState extends State<AudioPanel> with TickerProviderStateMixin {
..addListener(() { ..addListener(() {
if (mounted) setState(() {}); if (mounted) setState(() {});
}); });
_animation = _animation = Tween<double>(begin: 0, end: initSize).animate(_controller);
Tween<double>(begin: initSize, end: initSize).animate(_controller); _controller.forward();
super.initState(); super.initState();
} }

View File

@ -832,7 +832,7 @@ class _HeartOpenState extends State<HeartOpen>
} }
} }
/// Icon painter. /// Icon using a painter.
class IconPainter extends StatelessWidget { class IconPainter extends StatelessWidget {
const IconPainter(this.painter, {this.height = 10, this.width = 30, Key key}) const IconPainter(this.painter, {this.height = 10, this.width = 30, Key key})
: super(key: key); : super(key: key);
@ -851,7 +851,7 @@ class IconPainter extends StatelessWidget {
} }
} }
/// A dot. /// A dot just a dot.
class DotIndicator extends StatelessWidget { class DotIndicator extends StatelessWidget {
DotIndicator({this.radius = 8, Key key}) DotIndicator({this.radius = 8, Key key})
: assert(radius > 0), : assert(radius > 0),
@ -867,3 +867,83 @@ class DotIndicator extends StatelessWidget {
BoxDecoration(shape: BoxShape.circle, color: context.accentColor)); BoxDecoration(shape: BoxShape.circle, color: context.accentColor));
} }
} }
class DownloadPainter extends CustomPainter {
double fraction;
Color color;
Color progressColor;
double progress;
double pauseProgress;
DownloadPainter(
{this.fraction,
this.color,
this.progressColor,
this.progress = 0,
this.pauseProgress = 0});
@override
void paint(Canvas canvas, Size size) {
var _paint = Paint()
..color = color
..strokeWidth = 2.0
..strokeCap = StrokeCap.round;
var _linePaint = Paint()
..color = color.withAlpha(70)
..strokeWidth = 2.0
..strokeCap = StrokeCap.round;
var _circlePaint = Paint()
..color = color.withAlpha(70)
..style = PaintingStyle.stroke
..strokeWidth = 2;
var _progressPaint = Paint()
..color = progressColor
..style = PaintingStyle.stroke
..strokeWidth = 2;
double width = size.width;
double height = size.height;
var center = Offset(size.width / 2, size.height / 2);
if (pauseProgress == 0) {
canvas.drawLine(
Offset(width / 2, 0), Offset(width / 2, height * 4 / 5), _paint);
canvas.drawLine(Offset(width / 5, height / 2),
Offset(width / 2, height * 4 / 5), _paint);
canvas.drawLine(Offset(width * 4 / 5, height / 2),
Offset(width / 2, height * 4 / 5), _paint);
}
if (fraction == 0)
canvas.drawLine(
Offset(width / 5, height), Offset(width * 4 / 5, height), _paint);
else {
canvas.drawArc(Rect.fromCircle(center: center, radius: width / 2),
math.pi / 2, math.pi * fraction, false, _circlePaint);
canvas.drawArc(Rect.fromCircle(center: center, radius: width / 2),
math.pi / 2, -math.pi * fraction, false, _circlePaint);
}
if (fraction == 1) {
canvas.drawArc(Rect.fromCircle(center: center, radius: width / 2),
-math.pi / 2, math.pi * 2 * progress, false, _progressPaint);
}
if (pauseProgress > 0) {
canvas.drawLine(
Offset(width / 5 + height * 3 * pauseProgress / 20,
height / 2 - height * 3 * pauseProgress / 10),
Offset(width / 2 - height * 3 * pauseProgress / 20, height * 4 / 5),
_paint);
canvas.drawLine(
Offset(width * 4 / 5 - height * 3 * pauseProgress / 20,
height / 2 - height * 3 * pauseProgress / 10),
Offset(width / 2 + height * 3 * pauseProgress / 20, height * 4 / 5),
_paint);
}
}
@override
bool shouldRepaint(DownloadPainter oldDelegate) {
return oldDelegate.fraction != fraction ||
oldDelegate.progress != progress ||
oldDelegate.pauseProgress != pauseProgress;
}
}