// 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. // Flutter code sample for CupertinoTimerPicker import 'package:flutter/cupertino.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _title = 'CupertinoTimerPicker Sample'; @override Widget build(BuildContext context) { return const CupertinoApp( title: _title, home: CupertinoTimerPickerSample(), ); } } class CupertinoTimerPickerSample extends StatefulWidget { const CupertinoTimerPickerSample({Key? key}) : super(key: key); @override State createState() => _CupertinoTimerPickerSampleState(); } class _CupertinoTimerPickerSampleState extends State { Duration duration = const Duration(hours: 1, minutes: 23); // This shows a CupertinoModalPopup with a reasonable fixed height which hosts CupertinoTimerPicker. void _showDialog(Widget child) { showCupertinoModalPopup( context: context, builder: (BuildContext context) => Container( height: 216, padding: const EdgeInsets.only(top: 6.0), // The Bottom margin is provided to align the popup above the system navigation bar. 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( child: DefaultTextStyle( style: TextStyle( color: CupertinoColors.label.resolveFrom(context), fontSize: 22.0, ), child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ _TimerPickerItem( children: [ const Text('Timer'), CupertinoButton( // Display a CupertinoTimerPicker with hour/minute mode. onPressed: () => _showDialog( CupertinoTimerPicker( mode: CupertinoTimerPickerMode.hm, initialTimerDuration: duration, // This is called when the user changes the timer duration. onTimerDurationChanged: (Duration newDuration) { setState(() => duration = newDuration); }, ), ), // In this example, the timer value is formatted manually. You can use intl package // to format the value based on user's locale settings. 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 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, ), ), ); } }