我正在为一个学校项目创建一个健身应用程序，我发现当我创建多个锻炼屏幕时，当您按下按钮以继续下一个锻炼时会出现动画。我怎样才能把这个动画弄出来。
事情是这样的：
这是我的代码：（其他练习的代码一样，只是内容有所变化）
import 'package:flutter/material.dart';
import 'package:flutter/material.dart' as prefix0;
import 'package:circular_countdown_timer/circular_countdown_timer.dart';
class ActivityTimer extends StatelessWidget {
final String image = 'assets/images/1.gif';
final String tag = 'imageHeader';
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: OrientationBuilder(builder: (context, orientation) {
return (MediaQuery.of(context).orientation ==
prefix0.Orientation.portrait)
? Portrait(image: this.image, tag: this.tag)
: Landscape(image: this.image, tag: this.tag);
}),
),
);
}
}
class Portrait extends StatelessWidget {
final String image, tag;
CountDownController _controller = CountDownController();
bool startStop = true;
Portrait({@required this.image, @required this.tag});
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Column(
children: <Widget>[
Stack(
children: <Widget>[
Hero(
tag: this.tag,
child: Container(
width: MediaQuery.of(context).size.width,
height: 270,
child: Image.asset(
"assets/images/1.gif",
fit: BoxFit.fitHeight,
),
),
),
Positioned(
top: 40,
right: 20,
child: GestureDetector(
child: Container(
padding: EdgeInsets.all(4.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color.fromRGBO(0, 0, 0, 0.7),
),
child: Icon(
Icons.close,
color: Colors.white,
size: 30.0,
),
),
onTap: () {
Navigator.pop(context);
},
),
),
],
),
Container(
padding: EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
height: size.height - 270.0,
width: size.width,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 15.0),
child: Text(
'Saltar à Corda',
style: TextStyle(
fontSize: 28.0,
fontWeight: FontWeight.w900,
color: Colors.grey[700],
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 20.0),
child: Text(
'Próximo: Subir à Cadeira',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w900,
color: Colors.grey[300],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 0),
child: CircularCountDownTimer(
duration: 11,
controller: _controller,
width: MediaQuery.of(context).size.width / 5,
height: MediaQuery.of(context).size.height / 5,
color: Colors.white,
fillColor: Colors.red,
backgroundColor: null,Circle
strokeWidth: 5.0,
strokeCap: StrokeCap.butt,
textStyle: TextStyle(
fontSize: 22.0,
color: Colors.black,
fontWeight: FontWeight.bold),
isReverse: true,
isReverseAnimation: true,
isTimerTextShown: true,
)),
],
),
Row(
children: <Widget>[
GestureDetector(
onTap: () => _controller.start(),
child: Container(
width: 70.0,
height: 55.0,
margin: EdgeInsets.only(right: 9.0),
decoration: BoxDecoration(
color: Color.fromRGBO(232, 242, 248, 1.0),
borderRadius: BorderRadius.circular(15.0),
),
child: Icon(
Icons.play_arrow,
color: Color.fromRGBO(82, 126, 255, 1.0),
size: 35.0,
),
),
),
GestureDetector(
onTap: () => _controller.pause(),
child: Container(
width: 70.0,
height: 55.0,
margin: EdgeInsets.only(right: 9.0),
decoration: BoxDecoration(
color: Color.fromRGBO(232, 242, 248, 1.0),
borderRadius: BorderRadius.circular(15.0),
),
child: Icon(
Icons.pause,
color: Color.fromRGBO(82, 126, 255, 1.0),
size: 35.0,
),
),
),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return SubirACadeira();
},
),
);
},
child: Container(
width: size.width - 200.0,
height: 55.0,
decoration: BoxDecoration(
color: Color.fromRGBO(232, 242, 248, 1.0),
borderRadius: BorderRadius.circular(15.0),
),
child: Center(
child: Text(
'Próximo',
style: TextStyle(
color: Color.fromRGBO(82, 126, 255, 1.0),
fontSize: 18.0,
fontWeight: FontWeight.w900,
),
)),
),
),
],
),
]),
),
],
);
}
}
class Landscape extends StatelessWidget {
final String image, tag;
Landscape({@required this.image, @required this.tag});
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Stack();
}
}
有人可以帮助我吗？
答案 0 :(得分：0)
动画是由于Navigator.push，因为当您推送新屏幕时，动画会出现。您可以尝试将所有状态保留在一个屏幕中。如果您使用 StatefulWidget 而不是 StatelessWidget，则只能更改需要更改的内容。以下是如何完成的示例：
class Screen extends StatefulWidget {
@override
_ScreenState createState() => _ScreenState();
}
class _ScreenState extends State<Screen> {
String title = "Saltar à corda";
String subtitle = "Próximo: Subir à cadeira";
Widget build(BuildContext context) {
return Column(
children: [
Text(title),
Text(subtitle),
TextButton(
child: Text("Próximo"),
onPressed: () {
setState(() {
// Here you can define the next title and subtitle
title = "Subir à cadeira";
subtitle = "Próximo: Flexões";
});
}
),
]
);
}
}
这是一个最小的示例，但它可以帮助您了解如何执行此操作。您还可以创建一个列表来跟踪所有标题和副标题：
class ScreenData {
final String title;
final String subtitle;
const ScreenData(this.title, this.subtitle);
}
class _ScreenState extends State<Screen> {
// ...
static const List<ScreenData> _data = [
ScreenData("Saltar à corda", "Próximo: Subir à cadeira"),
ScreenData("Subir à cadeira", "Próximo: Flexões"),
ScreenData("Flexões", "Próximo: Abdominais"),
ScreenData("Abdominais", "Próximo: Prancha"),
// You can add more here
];
// Start with the first element of the list
int _currentIndex = 0;
// Data containing the title and subtitle of the current screen
ScreenData get _currentData => _data[_currentIndex];
// ...
Widget build(BuildContext context) {
return Column(
children: [
Text(_currentData.title),
Text(_currentData.subtitle),
TextButton(
child: Text("Próximo"),
onPressed: () {
setState(() {
// Update the current index
// Beware when _currentIndex == _data.length
++_currentIndex;
});
}
),
]
);
}
}