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:fluttertoast/fluttertoast.dart';
import 'package:connectivity/connectivity.dart';
import 'package:tsacdop/util/custom_widget.dart';
import '../state/download_state.dart';
import '../state/audio_state.dart';
@ -166,10 +167,18 @@ class _DownloadButtonState extends State<DownloadButton> {
return Selector<SettingState, bool>(
selector: (_, settings) => settings.downloadUsingData,
builder: (_, data, __) => _buttonOnMenu(
Icon(
LineIcons.download_solid,
//size: 15,
color: Colors.grey[700],
Center(
child: SizedBox(
height: 18,
width: 18,
child: CustomPaint(
painter: DownloadPainter(
color: Colors.grey[700],
fraction: 0,
progressColor: context.accentColor,
),
),
),
),
() => _requestDownload(task.episode, data)),
);
@ -185,15 +194,19 @@ class _DownloadButtonState extends State<DownloadButton> {
height: 50.0,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 18.0),
child: SizedBox(
height: 18,
width: 18,
child: CircularProgressIndicator(
backgroundColor: Colors.grey[500],
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).accentColor),
value: task.progress / 100,
child: TweenAnimationBuilder(
duration: Duration(milliseconds: 1000),
tween: Tween(begin: 0.0, end: 1.0),
builder: (context, fraction, child) => SizedBox(
height: 18,
width: 18,
child: CustomPaint(
painter: DownloadPainter(
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,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 18),
child: SizedBox(
height: 18,
width: 18,
child: CircularProgressIndicator(
backgroundColor: Colors.grey[500],
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
value: task.progress / 100,
child: TweenAnimationBuilder(
duration: Duration(milliseconds: 500),
tween: Tween(begin: 0.0, end: 1.0),
builder: (context, fraction, child) => SizedBox(
height: 18,
width: 18,
child: CustomPaint(
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,
style: TextStyle(color: context.accentColor),
),
Padding(
padding: const EdgeInsets.only(top: 8),
child: !_isSubscribed
? OutlineButton(
highlightedBorderColor:
context.accentColor,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(100.0),
side: BorderSide(
color: context.accentColor)),
splashColor: context.accentColor
.withOpacity(0.5),
child: Text(s.subscribe,
style: TextStyle(
color: context.accentColor)),
onPressed: () {
subscribePodcast(
widget.onlinePodcast);
setState(() {
_isSubscribed = true;
});
Fluttertoast.showToast(
msg: s.podcastSubscribed,
gravity: ToastGravity.BOTTOM,
);
})
: OutlineButton(
color: context.accentColor
.withOpacity(0.5),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(100.0),
side: BorderSide(
color: Colors.grey[500])),
highlightedBorderColor:
Colors.grey[500],
disabledTextColor: Colors.grey[500],
child: Text(s.subscribe),
disabledBorderColor: Colors.grey[500],
onPressed: () {}),
)
!_isSubscribed
? OutlineButton(
highlightedBorderColor:
context.accentColor,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(100.0),
side: BorderSide(
color: context.accentColor)),
splashColor:
context.accentColor.withOpacity(0.5),
child: Text(s.subscribe,
style: TextStyle(
color: context.accentColor)),
onPressed: () {
subscribePodcast(widget.onlinePodcast);
setState(() {
_isSubscribed = true;
});
Fluttertoast.showToast(
msg: s.podcastSubscribed,
gravity: ToastGravity.BOTTOM,
);
})
: OutlineButton(
color:
context.accentColor.withOpacity(0.5),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(100.0),
side: BorderSide(
color: Colors.grey[500])),
highlightedBorderColor: Colors.grey[500],
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)
.listen((event) async {
_current = DateTime.now();
_audioState = event?.processingState;
if (event.processingState != AudioProcessingState.none)
_audioState = event.processingState;
_playing = event?.playing;
_currentSpeed = event.speed;
_currentPosition = event.currentPosition.inMilliseconds ?? 0;

View File

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

View File

@ -832,7 +832,7 @@ class _HeartOpenState extends State<HeartOpen>
}
}
/// Icon painter.
/// Icon using a painter.
class IconPainter extends StatelessWidget {
const IconPainter(this.painter, {this.height = 10, this.width = 30, Key key})
: super(key: key);
@ -851,7 +851,7 @@ class IconPainter extends StatelessWidget {
}
}
/// A dot.
/// A dot just a dot.
class DotIndicator extends StatelessWidget {
DotIndicator({this.radius = 8, Key key})
: assert(radius > 0),
@ -867,3 +867,83 @@ class DotIndicator extends StatelessWidget {
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;
}
}