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

Improve group manage page animation.

This commit is contained in:
stonegate 2020-09-17 01:38:07 +08:00
parent 29f989e384
commit 74468bf35c
1 changed files with 298 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
lib/podcasts/podcast_manage.dart
View File

@ -35,29 +35,26 @@ class _PodcastManageState extends State<PodcastManage>
Animation _menuAnimation; Animation _menuAnimation;
double _fraction; double _fraction;
int _index; int _index;
double _scroll;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_showSetting = false; _showSetting = false;
_fraction = 0; _fraction = 0;
_menuValue = 0; _menuValue = 0;
_scroll = 0;
_index = 0; _index = 0;
_menuController = AnimationController( _menuController = AnimationController(
duration: const Duration(milliseconds: 300), vsync: this); duration: const Duration(milliseconds: 150), vsync: this);
_controller = AnimationController( _controller = AnimationController(
duration: const Duration(milliseconds: 500), vsync: this); duration: const Duration(milliseconds: 500), vsync: this);
_animation = Tween(begin: 0.0, end: 1.0).animate(_controller) _animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
..addListener(() { ..addListener(() {
if (mounted) { if (mounted) {
setState(() { setState(() => _fraction = _animation.value);
_fraction = _animation.value;
});
} }
}); });
_menuAnimation = Tween(begin: 0.0, end: 1.0) _menuAnimation = Tween(begin: 0.0, end: 1.0).animate(
.animate(CurvedAnimation(parent: _menuController, curve: Curves.easeIn)) CurvedAnimation(parent: _menuController, curve: Curves.elasticInOut))
..addListener(() { ..addListener(() {
if (mounted) setState(() => _menuValue = _menuAnimation.value); if (mounted) setState(() => _menuValue = _menuAnimation.value);
}); });
@ -89,7 +86,7 @@ class _PodcastManageState extends State<PodcastManage>
super.dispose(); super.dispose();
} }
Widget _saveButton(BuildContext context) { Widget _saveButton() {
final s = context.s; final s = context.s;
return Consumer<GroupList>( return Consumer<GroupList>(
builder: (_, groupList, __) { builder: (_, groupList, __) {
@ -138,8 +135,27 @@ class _PodcastManageState extends State<PodcastManage>
child: Transform( child: Transform(
alignment: FractionalOffset(0.5, 0.5), alignment: FractionalOffset(0.5, 0.5),
transform: Matrix4.rotationY(math.pi * _fraction), transform: Matrix4.rotationY(math.pi * _fraction),
child: Container(
child: InkWell( child: InkWell(
onTap: () async {
if (_fraction == 0) {
!_showSetting
? _menuController.forward()
: await _menuController.reverse();
if (mounted) {
setState(() {
_showSetting = !_showSetting;
});
}
} else {
groupList.saveOrder(groupList.groups[_index]);
groupList.drlFromOrderChanged(groupList.groups[_index].name);
Fluttertoast.showToast(
msg: context.s.toastSettingSaved,
gravity: ToastGravity.BOTTOM,
);
_controller.reverse();
}
},
child: Container( child: Container(
width: 50, width: 50,
height: 50, height: 50,
@ -165,26 +181,6 @@ class _PodcastManageState extends State<PodcastManage>
), ),
// color: Colors.white, // color: Colors.white,
), ),
onTap: () async {
if (_fraction == 0) {
!_showSetting
? _menuController.forward()
: await _menuController.reverse();
setState(() {
_showSetting = !_showSetting;
});
} else {
groupList.saveOrder(groupList.groups[_index]);
groupList
.drlFromOrderChanged(groupList.groups[_index].name);
Fluttertoast.showToast(
msg: context.s.toastSettingSaved,
gravity: ToastGravity.BOTTOM,
);
_controller.reverse();
}
},
),
), ),
), ),
); );
@ -192,6 +188,7 @@ class _PodcastManageState extends State<PodcastManage>
); );
} }
@override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final s = context.s; final s = context.s;
return AnnotatedRegion<SystemUiOverlayStyle>( return AnnotatedRegion<SystemUiOverlayStyle>(
@ -253,7 +250,7 @@ class _PodcastManageState extends State<PodcastManage>
AddGroup()), AddGroup()),
icon: Icon(Icons.add)), icon: Icon(Icons.add)),
), ),
OrderMenu(), _OrderMenu(),
], ],
), ),
body: WillPopScope( body: WillPopScope(
@ -262,7 +259,8 @@ class _PodcastManageState extends State<PodcastManage>
.clearOrderChanged(); .clearOrderChanged();
return true; return true;
}, },
child: Consumer<GroupList>(builder: (_, groupList, __) { child: Consumer<GroupList>(
builder: (_, groupList, __) {
var _isLoading = groupList.isLoading; var _isLoading = groupList.isLoading;
var _groups = groupList.groups; var _groups = groupList.groups;
return _isLoading return _isLoading
@ -276,15 +274,12 @@ class _PodcastManageState extends State<PodcastManage>
tabBuilder: (context, index) => Tab( tabBuilder: (context, index) => Tab(
child: Container( child: Container(
height: 30.0, height: 30.0,
padding: EdgeInsets.symmetric(horizontal: 10.0), padding:
EdgeInsets.symmetric(horizontal: 10.0),
alignment: Alignment.center, alignment: Alignment.center,
decoration: BoxDecoration( decoration: BoxDecoration(
color: (_scroll - index).abs() > 1 color: Colors.grey[600].withOpacity(0.3),
? Colors.grey[300] borderRadius: BorderRadius.circular(15),
: Colors.grey[300]
.withOpacity((_scroll - index).abs()),
borderRadius:
BorderRadius.all(Radius.circular(15)),
), ),
child: Text( child: Text(
_groups[index].name, _groups[index].name,
@ -307,9 +302,7 @@ class _PodcastManageState extends State<PodcastManage>
color: Colors.cyan[500], color: Colors.cyan[500],
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
child: Text(context.s.understood, child: Text(context.s.understood,
style: Theme.of(context) style: context.textTheme.button
.textTheme
.button
.copyWith(color: Colors.white)), .copyWith(color: Colors.white)),
onPressed: () async => onPressed: () async =>
FeatureDiscovery.completeCurrentStep( FeatureDiscovery.completeCurrentStep(
@ -319,9 +312,7 @@ class _PodcastManageState extends State<PodcastManage>
color: Colors.cyan[500], color: Colors.cyan[500],
padding: const EdgeInsets.all(0), padding: const EdgeInsets.all(0),
child: Text(context.s.dismiss, child: Text(context.s.dismiss,
style: Theme.of(context) style: context.textTheme.button
.textTheme
.button
.copyWith(color: Colors.white)), .copyWith(color: Colors.white)),
onPressed: () => onPressed: () =>
FeatureDiscovery.dismissAll(context), FeatureDiscovery.dismissAll(context),
@ -329,41 +320,42 @@ class _PodcastManageState extends State<PodcastManage>
], ],
), ),
child: Container( child: Container(
key: ValueKey(_groups[index].name), key: ValueKey<String>(_groups[index].name),
child: PodcastGroupList(group: _groups[index])), child:
PodcastGroupList(group: _groups[index])),
), ),
onPositionChange: (value) => onPositionChange: (value) =>
setState(() => _index = value), // setState(() =>
onScroll: (value) => setState(() => _scroll = value), _index = value,
), ),
), ),
_showSetting if (_showSetting)
? Positioned.fill( Positioned.fill(
top: 50, top: 50,
child: GestureDetector( child: GestureDetector(
onTap: () async { onTap: () async {
await _menuController.reverse(); await _menuController.reverse();
if (mounted) {
setState(() => _showSetting = false); setState(() => _showSetting = false);
}
}, },
child: Container( child: Container(
color: Theme.of(context) color: context.scaffoldBackgroundColor
.scaffoldBackgroundColor .withOpacity(0.8 *
.withOpacity(0.5 * _menuController.value), math.min(
_menuController.value * 2, 1.0)),
),
), ),
), ),
)
: Center(),
Positioned( Positioned(
right: 30, right: 30,
bottom: 30, bottom: 30,
child: _saveButton(context), child: _saveButton(),
), ),
_showSetting if (_showSetting)
? Positioned( Positioned(
right: 30 * _menuValue, right: 100 * _menuValue - 70,
bottom: 100, bottom: 100,
child: Container(
alignment: Alignment.centerRight,
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end,
@ -376,8 +368,7 @@ class _PodcastManageState extends State<PodcastManage>
setState(() => _showSetting = false); setState(() => _showSetting = false);
_index == 0 _index == 0
? Fluttertoast.showToast( ? Fluttertoast.showToast(
msg: s msg: s.toastHomeGroupNotSupport,
.toastHomeGroupNotSupport,
gravity: ToastGravity.BOTTOM, gravity: ToastGravity.BOTTOM,
) )
: showGeneralDialog( : showGeneralDialog(
@ -391,8 +382,7 @@ class _PodcastManageState extends State<PodcastManage>
transitionDuration: transitionDuration:
const Duration( const Duration(
milliseconds: 300), milliseconds: 300),
pageBuilder: (context, pageBuilder: (context, animaiton,
animaiton,
secondaryAnimation) => secondaryAnimation) =>
RenameGroup( RenameGroup(
group: _groups[_index], group: _groups[_index],
@ -402,10 +392,10 @@ class _PodcastManageState extends State<PodcastManage>
height: 30.0, height: 30.0,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.grey[700], color: Colors.grey[700],
borderRadius: BorderRadius.all( borderRadius:
Radius.circular(10.0))), BorderRadius.circular(10.0)),
padding: EdgeInsets.symmetric( padding:
horizontal: 10), EdgeInsets.symmetric(horizontal: 10),
child: Row( child: Row(
children: <Widget>[ children: <Widget>[
Icon( Icon(
@ -426,8 +416,8 @@ class _PodcastManageState extends State<PodcastManage>
), ),
), ),
Padding( Padding(
padding: EdgeInsets.symmetric( padding:
vertical: 10.0)), EdgeInsets.symmetric(vertical: 10.0)),
Material( Material(
color: Colors.transparent, color: Colors.transparent,
child: InkWell( child: InkWell(
@ -436,15 +426,14 @@ class _PodcastManageState extends State<PodcastManage>
setState(() => _showSetting = false); setState(() => _showSetting = false);
_index == 0 _index == 0
? Fluttertoast.showToast( ? Fluttertoast.showToast(
msg: s msg: s.toastHomeGroupNotSupport,
.toastHomeGroupNotSupport,
gravity: ToastGravity.BOTTOM, gravity: ToastGravity.BOTTOM,
) )
: generalDialog( : generalDialog(
context, context,
title: Text(s.removeConfirm), title: Text(s.removeConfirm),
content: Text( content:
s.groupRemoveConfirm), Text(s.groupRemoveConfirm),
actions: <Widget>[ actions: <Widget>[
FlatButton( FlatButton(
splashColor: context splashColor: context
@ -456,8 +445,8 @@ class _PodcastManageState extends State<PodcastManage>
child: Text( child: Text(
context.s.cancel, context.s.cancel,
style: TextStyle( style: TextStyle(
color: Colors color:
.grey[600]), Colors.grey[600]),
), ),
), ),
FlatButton( FlatButton(
@ -466,22 +455,19 @@ class _PodcastManageState extends State<PodcastManage>
.withAlpha(70), .withAlpha(70),
onPressed: () { onPressed: () {
if (_index == if (_index ==
groupList.groups groupList
.length - .groups.length -
1) { 1) {
setState(() { setState(() {
_index = _index - 1; _index = _index - 1;
_scroll = 0;
}); });
groupList.delGroup( groupList.delGroup(
_groups[ _groups[_index + 1]);
_index + 1]);
} else { } else {
groupList.delGroup( groupList.delGroup(
_groups[_index]); _groups[_index]);
} }
Navigator.of(context) Navigator.of(context).pop();
.pop();
}, },
child: Text( child: Text(
context.s.confirm, context.s.confirm,
@ -498,8 +484,8 @@ class _PodcastManageState extends State<PodcastManage>
color: Colors.grey[700], color: Colors.grey[700],
borderRadius: BorderRadius.all( borderRadius: BorderRadius.all(
Radius.circular(10.0))), Radius.circular(10.0))),
padding: EdgeInsets.symmetric( padding:
horizontal: 10), EdgeInsets.symmetric(horizontal: 10),
child: Row( child: Row(
children: <Widget>[ children: <Widget>[
Icon( Icon(
@ -512,8 +498,8 @@ class _PodcastManageState extends State<PodcastManage>
horizontal: 5.0), horizontal: 5.0),
), ),
Text(s.remove, Text(s.remove,
style: TextStyle( style:
color: Colors.red)), TextStyle(color: Colors.red)),
], ],
), ),
), ),
@ -522,18 +508,17 @@ class _PodcastManageState extends State<PodcastManage>
], ],
), ),
), ),
)
: Center(),
], ],
); );
}), },
),
), ),
), ),
); );
} }
} }
class OrderMenu extends StatelessWidget { class _OrderMenu extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final s = context.s; final s = context.s;