Cupertino Timer Picker In Flutter
The most excellent portable applications up to this point we have seen had clicks and contacts and motions taps and adding these connections in a mobile application was so difficult, However, Flutter acts to the rescue and assists you with building the most Lovely application encounters across various stages with the equivalent codebase.
We can establish the point in time for a countdown timer utilizing a timer picker. Rather than using it as a picker for a countdown timer, we can on the other hand involve it as a time picker.
This article will explore the Cupertino Timer Picker In Flutter. We will see how to implement a demo program. Learn how to create an ios style CupertinoTimerPicker and also learn how to customize the style of the CupertinoTimerPicker widget using different properties.in your flutter applications.
Table Of Contents::
Introduction:
Cupertino timer picker in flutter is an ios style countdown timer picker. Utilizing the CupertinoTimerPicker widget we can add an ios style countdown timer picker to our application. A timer picker allows us to establish the point in time for a countdown timer. We can likewise involve it as a time picker for picking time as opposed to involving it as a selector for a countdown timer.
By and large, we will utilize a countdown timer to show the time left in a web-based assessment or before sending off an occasion, and so on. It will show the countdown duration in hours, minutes, and seconds. The greatest span we can set is 23 hours 59 minutes and 59 seconds.
Demo Module ::
This demo video shows how to create a Cupertino timer picker in a flutter and shows how a Cupertino timer picker will work in your flutter applications. We will show a button, when a user press a button, then show a model popup for the chosen timer. It will be shown on your device.
Constructor:
To utilize CupertinoTimerPicker, you need to call the constructor underneath:
To make a Cupertino timer picker in flutter we need to utilize CupertinoTimerPicker class. Calling the constructor and giving the necessary properties will accomplish the work. It has one required property onTimerDurationChanged. It takes a callback capability as a value.
CupertinoTimerPicker({
Key? key,
this.mode = CupertinoTimerPickerMode.hms,
this.initialTimerDuration = Duration.zero,
this.minuteInterval = 1,
this.secondInterval = 1,
this.alignment = Alignment.center,
this.backgroundColor,
required this.onTimerDurationChanged,
})
We don’t need to show a timer picker consistently like different widgets. We need to show it when an occasion triggers. For instance, on the snap of a button, or some other widget. For the most part, we will show a timer picker utilizing showCupertinoModalPopup or showModalBottomSheet.
Properties:
There are some properties of CupertinoTimerPicker are:
- > mode — This Property is utilized to change the mode of the timer picker. It accepts the CupertinotimerPickerMode consistent as a value. It has three constants hm, ms, and hms. Naturally, it is hms (hours minutes seconds).
- > initialTimeDuration — This Property is used to the InitialTimerDuration has a default value of 0 and a maximum value of 23 hours 59 minutes 59 seconds.
- > minuteInterval — This Property is used to change the interval between the minutes of the timer picker we will use this property. It takes double as value. By default, it is 1.
- > secondInterval — This Property is used to change the seconds of the timer picker we will use this property. It also takes double as a value which is 1 by default.
- > alignment — This Property is used for the Classes generated with Alignment and its variations are acceptable in a property or argument of this kind.
- > backgroundColor — This Property is utilized in this parameter to alter the picker’s background color. CupertinoColors or the colors class steady are acknowledged as values.
- > onTimerDurationChanged — This Property is used for the callback function is the value it accepts. Every time the user modifies the time in the picker, this function is called. The most recent time will be obtained through this method. We will use the setState() function to update the UI with this value.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file, we will create a MyHomePage class. We will create a Duration initialTimer is equal to the Duration() and also create var time.
Duration initialTimer = const Duration();
var time;
Now, we will create a widget was timerPicker(). In this widget, we will return the CupertinoTimerPicker method. In this method, we will add a mode was CupertinoTimerPickerMode.hms, minuteInterval was 1, secondInterval was also 1, and initialTimerDuration was initialTimer.
Widget timerPicker() {
return CupertinoTimerPicker(
mode: CupertinoTimerPickerMode.hms,
minuteInterval: 1,
secondInterval: 1,
initialTimerDuration: initialTimer,
onTimerDurationChanged: (Duration changeTimer) {
setState(() {
initialTimer = changeTimer;
time =
'${changeTimer.inHours} hrs ${changeTimer.inMinutes % 60} mins ${changeTimer.inSeconds % 60} secs';
});
},
);
}
Also, we will add the onTimerDurationChanged property. In this property, we will add inside a setState() function. In this function, we will add initialTimer is equal to the changeTimer and time is equal to the hrs, mins, and sec.
Now, we will create a widget was _buildContainer(Widget picker).
In this widget, we will return a Container with height, padding, and color, and the child was DefaultTextStyle() method. In this method, we will add GestureDetector().
Widget _buildContainer(Widget picker) {
return Container(
height: 200,
padding: const EdgeInsets.only(top: 6.0),
color: CupertinoColors.white,
child: DefaultTextStyle(
style: const TextStyle(
color: CupertinoColors.black,
fontSize: 22.0,
),
child: GestureDetector(
onTap: () {},
child: SafeArea(
top: false,
child: picker,
),
),
),
);
}
Now, in the body, we will add the Inkwell widget. In this widget, we will add the onTap() function. In this function, we will add showCupertinoModalPopup. Also, we will add a Container with height and add the text “Cupertino Timer Picker”. Also, adding other text was times ie equal to null then show ‘No Select Time’ else show ‘time’ when the user was selected
InkWell(
onTap: () {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _buildContainer(timerPicker());
});
},
child: Column(
children: [
Container(
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.cyan),
child: const Center(
child: Text(
"Cupertino Timer Picker",
style: TextStyle(color: Colors.white, fontSize: 17),
),
),
),
Container(
padding: const EdgeInsets.only(top: 8, bottom: 8),
child: Text(
time == null ? 'No Select Time' : ' $time',
style: const TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
],
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_timerpicker_demo/splash_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State {
Duration initialTimer = const Duration();
var time;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Cupertino Timer Picker Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
backgroundColor: Colors.green,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/logo.png",
height: 200,
),
const SizedBox(
height: 50,
),
InkWell(
onTap: () {
showCupertinoModalPopup<void>(
context: context,
builder: (BuildContext context) {
return _buildContainer(timerPicker());
});
},
child: Column(
children: [
Container(
height: 50,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.cyan),
child: const Center(
child: Text(
"Cupertino Timer Picker",
style: TextStyle(color: Colors.white, fontSize: 17),
),
),
),
Container(
padding: const EdgeInsets.only(top: 8, bottom: 8),
child: Text(
time == null ? 'No Select Time' : ' $time',
style: const TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
],
),
),
],
),
),
);
}
Widget timerPicker() {
return CupertinoTimerPicker(
mode: CupertinoTimerPickerMode.hms,
minuteInterval: 1,
secondInterval: 1,
initialTimerDuration: initialTimer,
onTimerDurationChanged: (Duration changeTimer) {
setState(() {
initialTimer = changeTimer;
time =
'${changeTimer.inHours} hrs ${changeTimer.inMinutes % 60} mins ${changeTimer.inSeconds % 60} secs';
});
},
);
}
Widget _buildContainer(Widget picker) {
return Container(
height: 200,
padding: const EdgeInsets.only(top: 6.0),
color: CupertinoColors.white,
child: DefaultTextStyle(
style: const TextStyle(
color: CupertinoColors.black,
fontSize: 22.0,
),
child: GestureDetector(
onTap: () {},
child: SafeArea(
top: false,
child: picker,
),
),
),
);
}
}
Conclusion:
In the article, I have explained the Cupertino Timer Picker basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Timer Picker User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Cupertino Timer Picker in your flutter projects. We will show you what the Introduction is and what are the construction and properties of the Choice Chip, and make a demo program for working with Cupertino Timer Picker in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
