Flutter Platform pub package

DayNightBanner is a Flutter package that provides a customizable banner widget displaying the Sun and Moon based on the time of day. It's a visually appealing way to represent the current time and create a day-to-night transition effect.


Here are the screenshots of the DayNightBanner widget in action:

DayNightBanner Screenshot 2 DayNightBanner Screenshot 1


  • Display a visually appealing banner with the Sun and Moon based on the time of day.
  • Automatically updates based on the current time of day.
  • Highly customizable with various properties.
  • Supports both light and dark themes.


Add daynightbanner as a dependency in your pubspec.yaml file:

    sdk: flutter
  daynightbanner: <latest_version>


Import the package in your Dart file:

import 'package:daynightbanner/daynightbanner.dart';

To use the DayNightBanner widget, simply add it to your widget tree:

  // Add more customization properties here


The DayNightBanner widget offers various properties for customization:

  • sunImage and moonImage: Set the paths to custom images for the Sun and Moon.
  • backgroundImage: Set a custom background image for the banner.
  • bannerHeight: Adjust the height of the banner.
  • backgroundImageHeight: Set the height of the background image.
  • decoration: Apply a custom decoration to the banner container.
  • sunSize and moonSize: Define the exact size of the Sun and Moon images.
  • child: Add child widgets to the banner, such as text or icons.


Detailed documentation for the package can be found in the API reference.


See the CHANGELOG for a history of changes in the package.


This project is licensed under the MIT License - see the LICENSE file for details.

Example Code

Here is the code for the main.dart file in the example project:

import 'package:daynightbanner/daynightbanner.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  State<MyApp> createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DayNightBanner Example')),

The MyApp widget is a stateful widget that displays the DayNightBanner widget in the Scaffold body. The banner will automatically adjust its appearance based on the current time of day.

For more examples and customization options, check out the example folder.


The DayNightBanner widget and example project are developed and maintained by Mohamed Ashraf.

Get in touch

If you have any questions, feel free to reach out:


Contributions to the daynightbanner package are welcome! Please read the contribution guidelines before submitting a pull request.


Feel free to explore the features of the daynightbanner package and customize it to suit your needs. If you have any questions or feedback, don't hesitate to reach out. Happy coding!