Offline Zen Stories Flutter Package: Bringing Peaceful Moments to Your App

In today’s fast-paced digital world, we all experience moments of frustration when we go offline unexpectedly. But what if those moments could be transformed into a source of inspiration? The Offline Zen Stories Flutter package was created to do just that—providing users with calming and motivational stories when their device detects a lack of internet connection.
Whether you're developing a mindfulness app or just want to enhance your user experience during connectivity issues, Offline Zen Stories offers a simple and elegant solution.
Key Features
Offline Detection: Detects when the device is offline and seamlessly switches to story display mode.
Zen Stories & Motivational Content: Provides randomized stories that inspire patience and positivity.
Easy Integration: Simple setup and usage.
Customizable UI: Add your own images and style for enhanced user experience.
How to Install
To add Offline Zen Stories to your Flutter project, simply update your pubspec.yaml
file as follows:
dependencies:
offline_zen_stories: ^1.0.1
Then, run the following command:
flutter pub get
You're all set to use the package!
How to Use
Here is a step-by-step guide to integrating Offline Zen Stories into your Flutter app.
Step 1: Import the Package
First, import the package in your Dart file:
import 'package:offline_zen_stories/zen_wrapper.dart';
Step 2: Wrap Your Main Widget
Use the ZenWrapper
widget to handle online and offline modes:
import 'package:flutter/material.dart';
import 'package:offline_zen_stories/zen_wrapper.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ZenWrapper(
onlineWidget: OnlineHomePage(),
assetImagePath: "assets/meditation.png", // Optional asset image
imageHeight: 300,
),
);
}
}
class OnlineHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Online Home Page')),
body: Center(child: Text('You are online!')),
);
}
}
Step 3: Customize the Story Display
You can modify the image, story content, or layout by providing your custom logic inside the ZenWrapper
widget.
API Reference
ZenWrapper
Constructor:
ZenWrapper({ required Widget onlineWidget, String? assetImagePath, double imageHeight = 200, double imageWidth = double.infinity, })
Properties:
onlineWidget
: The widget displayed when the device is online.assetImagePath
: Optional path to an asset image to be shown with offline stories.imageHeight
: Height of the image.imageWidth
: Width of the image.
Customization Tips
Add Your Own Stories: Extend the existing story collection by modifying the story data in the package.
UI Enhancements: Customize fonts, colors, and animations to match your app's theme.
Include Custom Images: Add calming or motivational images to enhance the storytelling experience.
Conclusion
The Offline Zen Stories package is a lightweight and meaningful addition to any Flutter app, helping users find moments of calm during unexpected offline scenarios. By integrating this package, you’ll not only improve the user experience but also offer something truly valuable—the power of patience and positivity.
Start transforming your offline moments today by integrating Offline Zen Stories!
Ready to Explore? Download the package and bring peaceful moments to your users.
Subscribe to my newsletter
Read articles from Suneel directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
