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.
Android | iOS | MacOS | Web | Linux | Windows |
---|---|---|---|---|---|
✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Here are the screenshots of the DayNightBanner widget in action:
- 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:
dependencies:
flutter:
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:
DayNightBanner(
hour: DateTime.now().hour,
// Add more customization properties here
)
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.
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.
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.
The DayNightBanner widget and example project are developed and maintained by Mohamed Ashraf.
If you have any questions, feel free to reach out:
- Email: ashrafchauhan567@gmail.com
- GitHub: @MohamedAshraf701
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!