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.