cupertino_timer_picker.0.dart 4.17 KB
Newer Older
1 2 3 4
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
/// Flutter code sample for [CupertinoTimerPicker].
6 7 8

import 'package:flutter/cupertino.dart';

9
void main() => runApp(const TimerPickerApp());
10

11
class TimerPickerApp extends StatelessWidget {
12
  const TimerPickerApp({super.key});
13 14 15 16

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
17 18
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: TimerPickerExample(),
19 20 21 22
    );
  }
}

23
class TimerPickerExample extends StatefulWidget {
24
  const TimerPickerExample({super.key});
25 26

  @override
27
  State<TimerPickerExample> createState() => _TimerPickerExampleState();
28 29
}

30
class _TimerPickerExampleState extends State<TimerPickerExample> {
31 32
  Duration duration = const Duration(hours: 1, minutes: 23);

33 34
  // This shows a CupertinoModalPopup with a reasonable fixed height which hosts
  // a CupertinoTimerPicker.
35 36 37 38 39 40
  void _showDialog(Widget child) {
    showCupertinoModalPopup<void>(
      context: context,
      builder: (BuildContext context) => Container(
        height: 216,
        padding: const EdgeInsets.only(top: 6.0),
41 42
        // The bottom margin is provided to align the popup above the system
        // navigation bar.
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
        margin: EdgeInsets.only(
          bottom: MediaQuery.of(context).viewInsets.bottom,
        ),
        // Provide a background color for the popup.
        color: CupertinoColors.systemBackground.resolveFrom(context),
        // Use a SafeArea widget to avoid system overlaps.
        child: SafeArea(
          top: false,
          child: child,
        ),
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
60 61 62
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoTimerPicker Sample'),
      ),
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
      child: DefaultTextStyle(
        style: TextStyle(
          color: CupertinoColors.label.resolveFrom(context),
          fontSize: 22.0,
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              _TimerPickerItem(
                children: <Widget>[
                  const Text('Timer'),
                  CupertinoButton(
                    // Display a CupertinoTimerPicker with hour/minute mode.
                    onPressed: () => _showDialog(
                      CupertinoTimerPicker(
                        mode: CupertinoTimerPickerMode.hm,
                        initialTimerDuration: duration,
81 82
                        // This is called when the user changes the timer's
                        // duration.
83 84 85 86 87
                        onTimerDurationChanged: (Duration newDuration) {
                          setState(() => duration = newDuration);
                        },
                      ),
                    ),
88 89 90
                    // In this example, the timer's value is formatted manually.
                    // You can use the intl package to format the value based on
                    // the user's locale settings.
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
                    child: Text('$duration',
                      style: const TextStyle(
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// This class simply decorates a row of widgets.
class _TimerPickerItem extends StatelessWidget {
  const _TimerPickerItem({required this.children});

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: const BoxDecoration(
        border: Border(
          top: BorderSide(
            color: CupertinoColors.inactiveGray,
            width: 0.0,
          ),
          bottom: BorderSide(
            color: CupertinoColors.inactiveGray,
            width: 0.0,
          ),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: children,
        ),
      ),
    );
  }
}