我正在使用Tensor Programming的动画计时器。可以在这里找到:https://github.com/tensor-programming/flutter_timer_example。
我已经在程序的另一个页面上实现了一个TextField
小部件,而不是动画计时器所在的位置。我的问题是如何通过使用TextField
将onSubmitted
的TextEditingController
传递给Duration
属性的AnimationController
的输入在动画计时器?动画计时器已经使用了TextEditingController
,我怎么需要将FirstPage
集成到实现计时器的timerString
类中;为了将文本字段的输入值传递到https://github.com/dscognitif/Sati_App的持续时间值。
谢谢!任何帮助将不胜感激。这是我的Github回购以供进一步参考:import 'package:flutter/material.dart';
import 'dart:math' as math;
class FirstPage extends StatefulWidget {
@override
FirstPageState createState() => FirstPageState();
}
class FirstPageState extends State<FirstPage> with TickerProviderStateMixin {
AnimationController controller;
String get timerString {
Duration duration = controller.duration * controller.value;
return '${duration.inMinutes}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
}
@override
void initState() {
super.initState();
controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
}
@override
Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
return Scaffold(
body: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Align(
alignment: FractionalOffset.center,
child: AspectRatio(
aspectRatio: 1.0,
child: Stack(
children: <Widget>[
Positioned.fill(
child: AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return CustomPaint(
painter: TimerPainter(
animation: controller,
backgroundColor: Colors.white,
color: themeData.indicatorColor,
));
},
),
),
Align(
alignment: FractionalOffset.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"Count Down",
style: themeData.textTheme.subhead,
),
AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return Text(
timerString,
style: themeData.textTheme.display4,
);
}),
],
),
),
],
),
),
),
),
Container(
margin: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FloatingActionButton(
child: AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return Icon(controller.isAnimating
? Icons.pause
: Icons.play_arrow);
},
),
onPressed: () {
if (controller.isAnimating)
controller.stop();
else {
controller.reverse(
from: controller.value == 0.0
? 1.0
: controller.value);
}
},
)
],
),
)
],
),
),
);
}
}
class TimerPainter extends CustomPainter {
TimerPainter({
this.animation,
this.backgroundColor,
this.color,
}) : super(repaint: animation);
final Animation<double> animation;
final Color backgroundColor, color;
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = backgroundColor
..strokeWidth = 5.0
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke;
canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
paint.color = color;
double progress = (1.0 - animation.value) * 2 * math.pi;
canvas.drawArc(Offset.zero & size, math.pi * 1.5, -progress, false, paint);
}
@override
bool shouldRepaint(TimerPainter old) {
return animation.value != old.animation.value ||
color != old.color ||
backgroundColor != old.backgroundColor;
}
}
。
这是动画计时器小部件的源代码:
TextField
这是import 'package:flutter/material.dart';
class TextFieldInput extends StatefulWidget {
@override
TextFieldInputState createState() => TextFieldInputState();
}
class TextFieldInputState extends State<TextFieldInput> {
TextEditingController timerController;
@override
void dispose() {
timerController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Timer Picker"),
backgroundColor: Colors.deepPurple,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
icon: Icon(Icons.timer),
hintText: "Please enter timer value in minutes"
),
controller: timerController,
onSubmitted: (v) => timerController.text = v,
),
),
);
}
}
的源代码,它位于另一个dart文件和应用程序的另一个页面上:
onSubmitted: (v) => Navigator.pop(context, v),
您可以将onSubmitted更改为:
String text = _await_ Navigator.of(context).push(MaterialPageRoute(builder: (_) => TextFieldInput());
然后通过调用从该路径获取值:
qazxswpoi