Day Night Time Picker in Flutter
day_night_time_picker is a Day Night Time Picker for flutter, beautiful day and night animation with the sun and moon assets. we don’t need to add explicit assets. A sample video is given below to get an idea about what we are going to do in this article.
Properties
Some properties of day_night_time_picker are given below.
Name |
Description |
---|---|
value | Required Display value. It takes in [TimeOfDay]. |
onChange | Required Return the new time the user picked as [TimeOfDay]. |
onChangeDateTime | Optional Return the new time the user picked as [DateTime]. |
is24HrFormat | Show the time in TimePicker in 24-hour format. |
accentColor | Accent color of the TimePicker. Theme.of(context).accentColor |
unselectedColor | Color applied unselected options (am/pm, hour/minute). Colors.grey |
cancelText | Text displayed for the Cancel button. cancel |
okText | Text displayed for the Ok button. ok |
sunAsset | Image asset used for the Sun. Asset provided |
moonAsset | Image asset used for the Moon. Asset provided |
iosStylePicker | Whether to display a IOS style picker (Not exactly the same). false |
Example Project
Add plugin to pubspec.yaml dependency
Dart
dependencies: day_night_time_picker: |
Usage
To use the plugin, just import the package
Dart
import 'package:day_night_time_picker/day_night_time_picker.dart' ; |
Code
Creating Time Variable:
Dart
TimeofDay _time = TimeofDay.now(); |
Update Time variable on change:
Dart
void onTimeChanged(TimeOfDay time ) { setState(() { _timeOfDay = time ; }); } |
Navigate to Show Picker:
Dart
Navigator.of(context).push( showPicker( context: context, value: _timeOfDay, onChange: onTimeChanged, minuteInterval: MinuteInterval.FIVE, is24HrFormat: false , ), ); |
The final code will be:
Dart
import 'package:day_night_time_picker/lib/constants.dart' ; import 'package:day_night_time_picker/lib/daynight_timepicker.dart' ; import 'package:flutter/material.dart' ; void main() { runApp( const DayNight()); } class DayNight extends StatefulWidget { const DayNight({Key? key}) : super(key: key); @override State<DayNight> createState() => _DayNightState(); } class _DayNightState extends State<DayNight> { @override Widget build(BuildContext context) { return MaterialApp( title: "DayNight" , theme: ThemeData(primaryColor: Color.fromARGB(255, 25, 71, 133)), debugShowCheckedModeBanner: false , home: const Home(), ); } } class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State<Home> createState() => _HomeState(); } class _HomeState extends State<Home> { TimeOfDay _timeOfDay = TimeOfDay.now(); void onTimeChanged(TimeOfDay time ) { setState(() { _timeOfDay = time ; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text( "Day Night Picker" ), ), body: SafeArea( child: Center( child: SingleChildScrollView( // controller: controller, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( _timeOfDay.format( context, ), style: Theme.of(context).textTheme.headlineLarge, ), const SizedBox( height: 10, ), TextButton( onPressed: () { Navigator.of(context).push( showPicker( context: context, value: _timeOfDay, onChange: onTimeChanged, minuteInterval: MinuteInterval.FIVE, is24HrFormat: false , ), ); }, child: const Text( "Pick Time " )) ], ), ), )), ); } } |
Code Explanation
- main is a principal method called once the program is loaded.
- Once the program is loaded, the runApp will run and call our stateful widget DayNight.
- As Flutter is based on a widget a widget is built.
- Creating MaterialApp that allows us to set app title taking scaffold as a home.
- Creating Variable _time of type TimeDay initialized to the current time.
- Scaffold allows us to set AppBar and the body of the page.
- As an AppBar it’s a simple title.
- As a Body, it takes a central column.
- First Children Take a Text having current time value stored in variable _time.
- Second, take a sized box with height.
- Third Take a button, on pressed it to show the daytime picker dialog.
- Creating Method onTimeChanged that takes the changed time in a variable time and stores it into our variable _time so that it can view on the user screen.
Contact Us