flutter_clock_example/lib/timers_page_landscape.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

import 'constants.dart';

class MyClipper extends CustomClipper<Rect> {

  final double durationNow;
  final double duration;
  final double margin;


  MyClipper(this.durationNow, this.duration, this.margin);
  
  @override
  // Rect getClip(Size size) => Rect.fromLTWH(0, 0, width - margin, height - margin);
  Rect getClip(Size size) {
    // 计算剪切的宽度和高度
    double width = durationNow * (240-margin*2);
    double height = 80 - margin;

    // 返回剪切区域
    return Rect.fromLTWH(0, 0, width + margin, height);
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => true;
}

class TimersPageLandscape extends StatefulWidget {
  const TimersPageLandscape({
    super.key,
  });

  @override
  State<TimersPageLandscape> createState() => _TimersPageLandscapeState();
}

class _TimersPageLandscapeState extends State<TimersPageLandscape> with TickerProviderStateMixin{

  late Animation<double> animation;
  late AnimationController controller;

  double duration = 10;
  double durationNow = 0;
  late Timer timer;
  bool isRunning = false;

  double targetProgress = 1;
  double currentProgress = 0;

  int counts = 5;

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

    controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: duration.toInt()),
    );

    animation = Tween<double>(
      begin: durationNow/duration,
      end: targetProgress,
    ).animate(CurvedAnimation(
      parent: controller,
      curve: Curves.linear,
    ))
      ..addListener(() {
        setState(() {
          currentProgress = animation.value;
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    Stream<DateTime> dateTimeStream() {
      // 使用Stream.periodic创建一个每秒更新一次的时间流
      return Stream.periodic(const Duration(seconds: 1), (_) => DateTime.now());
    }

    Stream<double> _getDurationNowStream() {
    return Stream.periodic(const Duration(seconds: 1), (timer) {
      return durationNow;
    });
  }

    return Scaffold(
      body: Container(
        color: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.3),
        padding: EdgeInsets.all((MediaQuery.of(context).size.width / 20).toDouble()),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          // mainAxisAlignment: MainAxisAlignment.center, 
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center, 
              children: [
                Container(
                  margin: const EdgeInsets.all(14.0),
                  // padding: const EdgeInsets.all(12.0),
                  decoration: BoxDecoration(
                    color: Colors.transparent,
                    borderRadius: myBorderRadius,
                  ),
                  child: Column(
                    children: [
                      StreamBuilder<DateTime>(
                        stream: dateTimeStream(),
                        builder: (context, snapshot) {
                          return Text(
                              DateFormat.Hm().format(DateTime.now()),
                              style: theme.textTheme.displayLarge!.copyWith(color: theme.colorScheme.primary),
                            );
                        },
                      ),
                      Text(
                        DateFormat('EEEE, MMMM dd').format(DateTime.now()),
                        style: theme.textTheme.titleLarge!.copyWith(color: theme.colorScheme.secondary),
                      ),
                      const Divider(),
                      Text(
                        'You have $counts timers',
                        style: theme.textTheme.titleMedium!.copyWith(color: theme.colorScheme.primary),
                      ),
                      const Divider(),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            '剩余时间：${(duration-durationNow).toStringAsFixed(1)} 秒',
                            style: const TextStyle(fontSize: 20),
                          ),
                          const Divider(),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              ElevatedButton(
                                child: const Text('开始/暂停'),
                                onPressed: () {
                                  isRunning = !isRunning;
                                  if (isRunning) {
                                    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
                                      setState(() {
                                        if (durationNow < duration)
                                          durationNow++;
                                      });
                                    });
                                  }
                                  else {
                                    timer.cancel();
                                  }
                                },
                              ),
                              ElevatedButton(
                                child: Text('重置'),
                                onPressed: () {
                                  if (isRunning) {
                                    timer.cancel();
                                    isRunning = false;
                                  }
                                  durationNow = 0;
                                  controller.reset();
                                  setState(() {});
                                },
                              ),
                            ],
                          ),
                        ]
                      ),  
                    ],
                  ),
                ),
              ],
            ),
            Expanded(
              child: ListView(
                children: [ 
                  GestureDetector(
                    onTap: () {
                      controller.forward();
                      isRunning = !isRunning;
                      if (isRunning) {
                        timer = Timer.periodic(const Duration(milliseconds: 10), (timer) {
                          setState(() {
                            if (durationNow < duration)
                              {durationNow += 0.01;}
                          });
                        });
                      } else {
                        timer.cancel();
                        controller.stop();
                      }
                    },
                    onLongPress: () {
                      controller.reset();
                    },
                    child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal:16.0, vertical:4.0),
                      child: Stack(
                        children: [
                          Container( // Card background
                            width: 240,
                            height: 80,
                            decoration: BoxDecoration(
                              color: theme.colorScheme.secondaryContainer.withAlpha(60),
                              borderRadius: BorderRadius.circular(18.0),
                            ),
                          ),
                          // StreamBuilder(
                            // stream: _getDurationNowStream(),
                          AnimatedBuilder(
                            animation: animation,
                            builder: (context, snapshot) { 
                              return ClipRect(
                                clipper: MyClipper(animation.value, duration, 6),
                                child: Container( // Progress bar
                                  decoration: BoxDecoration(
                                    color: theme.colorScheme.primaryContainer.withAlpha(192),
                                    borderRadius: BorderRadius.circular(16.0),
                                  ),
                                  margin: const EdgeInsets.all(6),
                                  // duration: Duration(seconds: (duration-durationNow).toInt()),
                                  alignment: Alignment.center,
                                  width: 240 - 12,
                                  height: 80 - 12,
                                ),
                              );
                            }
                          ),
                          Container(
                            margin: const EdgeInsets.symmetric(vertical:6,horizontal:2),
                            alignment: Alignment.center,
                            width: 240,
                            height: 60,
                            child: ListTile(
                                title: Text(
                                  '${(duration-durationNow).toInt()}', 
                                  style: theme.textTheme.titleLarge!.copyWith(color: theme.colorScheme.primary),
                                  textAlign: TextAlign.right,
                                ),
                                subtitle: Text(
                                  'Countdown: $duration',
                                ),
                            ),
                          ),
                        ],
                      )
                    ),
                  ),
                  ],
                
              ),
            ),
          ],
        ),
      ),
    );
  }
}