繁体   English   中英

Flutter 圆形倒数计时器

[英]Flutter Circular Countdown Timer

我正在尝试创建一个计时器应用程序,它具有针对不同任务的多个倒计时计时器。 我面临的问题是,如果我启动一次性计时器并按下后退按钮,计时器就会停止。 所以我希望,该计时器一直运行直到它被暂停或计时器结束并提醒用户,或者应用程序被销毁。 帮助我如何使用 Flutter 执行此操作? 任何示例代码都会受到赞赏? 请帮帮我,伙计们。 我被这个问题困扰了一个月。 不知道如何摆脱它的家伙。

import 'dart:async';
import 'dart:convert';
  import 'package:awesome_notifications/awesome_notifications.dart';
 import 'package:circular_countdown_timer/circular_countdown_timer.dart';
   import 'package:flash_chat/components/button.dart';
  import 'package:flash_chat/screens/promotersDetails.dart';
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;

  class ViewPromoters extends StatefulWidget {
 final String a_id, s_id;
    ViewPromoters({Key key, @required this.a_id, @required this.s_id})
   : super(key: key);

  @override
 _ViewPromotersState createState() => _ViewPromotersState(a_id, s_id);
   }

   class _ViewPromotersState extends State<ViewPromoters> {
    CountDownController _controller = CountDownController();

  var descList = [
"Engagement Selfie = 5",
"Engagement Selfie = 7",
"Engagement Selfie = 9",
"Engagement Selfie = 7",
 "Engagement Selfie = 3",
];
 var selfieList = [
"Sampling Selfie = 5",
"Sampling Selfie = 7",
"Sampling Selfie = 9",
"Sampling Selfie = 7",
"Sampling Selfie = 3",
];
var dataList = [
"Data Collection = 5",
"Data Collection = 7",
"Data Collection = 9",
"Data Collection = 7",
"Data Collection = 3",
];
 var timeList = [
"Last Selfie Time = 04:25 PM",
"Last Selfie Time = 04:20 PM",
"Last Selfie Time = 05:10 PM",
"Last Selfie Time = 03:20 PM",
"Last Selfie Time = 04:00 PM",
 ];

// Image Name List Here
 var imgList = [
"images/img1.jpg",
"images/img2.jpg",
"images/img3.jpg",
"images/img4.jpg",
"images/img5.jpg",
 ];
String p_id, p_name;
Map mapResponse;
List listResponse;
String a_id, s_id;
_ViewPromotersState(this.a_id, this.s_id);
Future fetchdata() async {
print(s_id); // Supervisor Id
var url = await http.get(Uri.parse(
    "http://demo.likemyfiles.com/DS/api/api_supervisor/supervisor/$s_id"));
setState(() {
  mapResponse = json.decode(url.body);
  print(mapResponse);
  listResponse = mapResponse['promoters'];
  print(listResponse);
});
}

@override
void initState() {
fetchdata();
super.initState();
}

@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width * 0.6;
return Scaffold(
  appBar: AppBar(
    // App Bar
    title: Text(
      "Promoters Detail",
      style: TextStyle(color: Colors.white),
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(
          Icons.notifications_active,
          color: Colors.white,
        ),
        onPressed: () {
          Notify();
        },
      )
    ],
    elevation: 5,
    backgroundColor: Colors.green,
  ),
  // Main List View With Builder
  body: ListView.builder(
    itemCount: 3,
    itemBuilder: (context, index) {
      return GestureDetector(
        onTap: () {
          p_id = listResponse[index]['id'].toString();
          print(p_id);
          p_name = listResponse[index]['name'].toString();
          showDialogFunc(context, imgList[index], p_name, descList[index],
              timeList[index], p_id, a_id);
        },
        // Card Which Holds Layout Of ListView Item
        child: Card(
          color: Colors.white,
          elevation: 5,
          child: Column(
            children: [
              **CircularCountDownTimer(
                width: MediaQuery.of(context).size.width / 6,
                height: MediaQuery.of(context).size.width / 6,
                duration: 120,
                fillColor: Colors.green,
                ringColor: Colors.white,
                controller: _controller,
                backgroundColor: Colors.white54,
                strokeWidth: 10.0,
                strokeCap: StrokeCap.round,
                isTimerTextShown: true,
                isReverse: false,
                onComplete: () {
                  Notify();
                },
                textStyle: TextStyle(fontSize: 20.0, color: Colors.black),
              ),**
              Row(
                children: <Widget>[
                  CircleAvatar(
                    radius: 60,
                    backgroundImage: AssetImage(imgList[index]),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          child: listResponse == null
                              ? Container()
                              : Text(
                                  listResponse[index]['name'].toString(),
                                  style: TextStyle(
                                    color: Colors.grey.shade500,
                                    fontSize: 20.0,
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Container(
                          width: width,
                          child: Row(
                            children: [
                              Icon(
                                Icons.add_task_sharp,
                                color: Colors.grey[500],
                                size: 20.0,
                              ),
                              SizedBox(
                                width: 7,
                              ),
                              Text(
                                descList[index],
                                maxLines: 3,
                                style: TextStyle(
                                    fontSize: 15,
                                    color: Colors.grey[500],
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          width: width,
                          child: Row(
                            children: [
                              Icon(
                                Icons.add_photo_alternate_outlined,
                                color: Colors.grey[500],
                                size: 20.0,
                              ),
                              SizedBox(
                                width: 7,
                              ),
                              Text(
                                selfieList[index],
                                maxLines: 3,
                                style: TextStyle(
                                    fontSize: 15,
                                    color: Colors.grey[500],
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          width: width,
                          child: Row(
                            children: [
                              Icon(
                                Icons.dashboard_customize,
                                color: Colors.grey[500],
                                size: 20.0,
                              ),
                              SizedBox(
                                width: 7,
                              ),
                              Text(
                                dataList[index],
                                maxLines: 3,
                                style: TextStyle(
                                    fontSize: 15,
                                    color: Colors.grey[500],
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          width: width,
                          child: Row(
                            children: [
                              Icon(
                                Icons.assignment_ind_sharp,
                                color: Colors.grey[500],
                                size: 20.0,
                              ),
                              SizedBox(
                                width: 7,
                              ),
                              Text(
                                timeList[index],
                                maxLines: 3,
                                style: TextStyle(
                                    fontSize: 15,
                                    color: Colors.grey[500],
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      );
    },
  ),
);
 }
 }

 // This is a block of Model Dialog
showDialogFunc(context, img, title, desc, time, promoter_id, activity_id) {
return showDialog(
context: context,
builder: (context) {
  return Center(
    child: Material(
      type: MaterialType.transparency,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
        ),
        padding: EdgeInsets.all(15),
        height: 400,
        width: MediaQuery.of(context).size.width * 0.7,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(5),
              child: Image.asset(
                img,
                width: 140,
                height: 140,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              title,
              style: TextStyle(
                fontSize: 20,
                color: Colors.grey,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 2,
            ),
            Container(
              // width: 200,
              child: Align(
                alignment: Alignment.center,
                child: Text(
                  time,
                  maxLines: 3,
                  style: TextStyle(fontSize: 15, color: Colors.grey[500]),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
            Button(
                title: 'Attendance Photos',
                colour: Colors.green,
                onPressed: () {
                  print(activity_id);
                  print(promoter_id);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => PromotersDetails(
                              url:
                                  URL,
                              title: "Attendance Selfie",
                            )),
                  );
                }),
            Button(
                title: 'Engagement Photos',
                colour: Colors.green,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => PromotersDetails(
                              url:
                                  URL,
                              title: "Engagement Selfie",
                            )),
                  );
                }),
            Button(
                title: '  Sampling Photos  ',
                colour: Colors.green,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => PromotersDetails(
                              url:
                                  URL,  
                              title: "Sampling Photos",
                            )),
                  );
                }),
          ],
        ),
      ),
    ),
  );
  },
);
 }

 void Notify() async {
 await AwesomeNotifications().createNotification(
  content: NotificationContent(
      id: 1,
      channelKey: 'key1',
      title: 'This is Notification',
      body: 'T His is body of Notify'));
  }

tbh。 我知道这是一种糟糕的方法,设备性能可能会受到影响。 但是你可以在app的state中定义一个controller。 然后在你的计时器中传递 controller。 这是一种非常糟糕的方法,您需要处理何时处理它。 但如果没有任何效果,这是一种解决方法。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM