Change episode detail page download button ui.
This commit is contained in:
parent
57e7bfbf3f
commit
7c828f1ee6
|
@ -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),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
@ -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: () {}),
|
|
||||||
)
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue