Как установить длительность таймера, используя вход из виджета TextField во Flutter? - PullRequest
Новая
       17

Как установить длительность таймера, используя вход из виджета TextField во Flutter?

0 голосов
/ 02 апреля 2019

Я использую анимированный таймер от Tensor Programming. Можно найти здесь: https://github.com/tensor-programming/flutter_timer_example.

Я реализовал виджет TextField на другой странице программы, а не там, где находится анимированный таймер. У меня вопрос, как я мог бы передать ввод TextField, например, в свойстве onSubmitted с помощью использование TextEditingController до значения Duration в анимированном таймере? Анимированный таймер уже использует AnimationController, и как мне нужно интегрировать TextEditingController в класс FirstPage, где реализован таймер; чтобы входное значение текстового поля было передано в значение продолжительности timerString.

Спасибо! Любая помощь будет принята с благодарностью. Вот мой репозиторий Github для дальнейшего использования: https://github.com/dscognitif/Sati_App.

Это исходный код анимированного виджета таймера: 

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,
        ),
      ),
    );
  }
}

1 Ответ

0 голосов
/ 02 апреля 2019

Вы можете изменить на Отправлено: 

onSubmitted: (v) => Navigator.pop(context, v),

Тогда вы получите значение по этому маршруту, позвонив по номеру: 

String text = _await_ Navigator.of(context).push(MaterialPageRoute(builder: (_) => TextFieldInput());
...