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

SuneelSuneel
3 min read

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

  1. Add Your Own Stories: Extend the existing story collection by modifying the story data in the package.

  2. UI Enhancements: Customize fonts, colors, and animations to match your app's theme.

  3. 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.

Get Started with Offline Zen Stories on pub.dev

0
Subscribe to my newsletter

Read articles from Suneel directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Suneel
Suneel