DayNightBanner
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.
Screenshot
Here are the screenshots of the DayNightBanner widget in action:
Features
- 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.
Installation
Add daynightbanner
as a dependency in your pubspec.yaml
file:
dependencies:
flutter:
sdk: flutter
daynightbanner: <latest_version>
Usage
Import the package in your Dart file:
import 'package:daynightbanner/daynightbanner.dart';
To use the DayNightBanner
widget, simply add it to your widget tree:
DayNightBanner(
hour: DateTime.now().hour,
// Add more customization properties here
)
Customization
The DayNightBanner
widget offers various properties for customization:
sunImage
andmoonImage
: 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
andmoonSize
: Define the exact size of the Sun and Moon images.child
: Add child widgets to the banner, such as text or icons.
Documentation
Detailed documentation for the package can be found in the API reference.
Changelog
See the CHANGELOG for a history of changes in the package.
License
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});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('DayNightBanner Example')),
body:DayNightBanner(
hour: DateTime.now().hour,
),
),
);
}
}
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.
Contributing
Contributions to the daynightbanner
package and the example project are welcome! Feel free to open issues or submit pull requests.
Credits
The DayNightBanner widget and example project are developed and maintained by Mohamed Ashraf.
Feel free to explore the example project and the DayNightBanner widget. If you have any questions or feedback, don't hesitate to reach out. Happy coding! 🌞🌙