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.

Output