使用给定数据创建计时器

Question

我有一个应用程序可以从后端获取小时和分钟数。每次调用应用程序时，来自后端的数据都会保存在共享首选项中。当他的用户没有互联网连接时，我会显示与用户在互联网上看到的相同的屏幕，只是使用保存在共享首选项中的数据。数据的一部分是一个计时器，我从后端获取小时和分钟，每次我进行 API 调用时，小时和分钟都会更新。我现在想要的是从共享首选项中获取数据来创建一个计时器，其中的数据保存在共享首选项中。我需要更新分钟和小时，就像使用具有互联网连接的普通数据一样工作。因此，当没有互联网连接时，我们会显示数据，我需要创建计时器来更新分钟和小时，这样即使没有互联网，用户也可以看到计时器更新。因此，如果共享首选项中的分钟和小时保存为：1 小时：6 分钟。我需要做到这一点，这样时间才会继续，分钟和小时也会不断更新。所以 60 秒后分钟将是 7 分钟，54 分钟后将是 2 小时，并且在没有任何开始按钮的情况下打开屏幕时该过程立即开始。

// Saving data from api in shared preferences

 body: FutureBuilder<Response>(
        future: futureDataForStatus,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done &&
              snapshot.hasData) {
            accountInfo = WorkingLocationStatus.fromJson(
              json.decode(snapshot.data!.body),
            );

            final duration = IsoDuration.parse(
              accountInfo!.duration.toString(),
            );

            prefs.setDouble('workingHours', duration.hours);
            prefs.setDouble('workingMinutes', duration.minutes);

            return Column(

   // Displaying the saved data 

class OffilneWorkingHoursMinutes extends StatefulWidget {
  const OffilneWorkingHoursMinutes({Key? key}) : super(key: key);

  @override
  State<OffilneWorkingHoursMinutes> createState() =>
      _OffilneWorkingHoursMinutesState();
}

class _OffilneWorkingHoursMinutesState
    extends State<OffilneWorkingHoursMinutes> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '${prefs.getDouble('workingHours')!.toStringAsFixed(0)} hrs - '
        '${prefs.getDouble('workingMinutes')!.toStringAsFixed(0)} mins ',
        style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
      ),
    );
  }
}

Answer 1

看看这个例子，我认为它可能有所帮助，只需根据您的需要进行调整：

class OffilneWorkingHoursMinutes extends StatefulWidget {
  const OffilneWorkingHoursMinutes({Key? key}) : super(key: key);

  @override
  State<OffilneWorkingHoursMinutes> createState() =>
      _OffilneWorkingHoursMinutesState();
}

class _OffilneWorkingHoursMinutesState
    extends State<OffilneWorkingHoursMinutes> {
  var time = Time(hours: 1, minutes: 6, seconds: 0); // pass your time from backend here
  @override
  void initState() {
    Timer.periodic(const Duration(seconds: 1), (timer) { // use timer when you are offline and cancel it when you are back online
      setState(() {
        if (time.seconds < 59) {
          time.seconds++;
        } else {
          if (time.minutes < 59) {
            time.minutes++;
          } else {
            time.minutes = 0;
            time.hours++;
          }
          time.seconds = 0;
        }
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '${time.hours} hrs - '
        '${time.minutes} mins - '
        '${time.seconds} sec ',
        style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
      ),
    );
  }
}

class Time {
  int hours;
  int minutes;
  int seconds;
  Time({
    this.hours = 0,
    this.minutes = 0,
    this.seconds = 0,
  });
}

使用给定数据创建计时器

Create Timer With Given Data

flutter

dart

flutter-layout

flutter-dependencies