๐Ÿ“„ zeba_academy_visibility โ€” README.md ๐Ÿ“ฆ Package Name

zeba_academy_visibility

๐Ÿ“Œ Description

A lightweight Flutter package for detecting widget visibility inside scroll views with:

Visibility percentage tracking Fade & slide animations on visibility Once-only trigger support Smooth scroll-based detection โœจ Features

โœ” Visibility detection inside scroll views โœ” Visibility percentage (0.0 โ†’ 1.0) โœ” Fade animation support โœ” Slide animation support โœ” Once-only visibility trigger โœ” Lightweight & performance friendly โœ” Easy integration in any Flutter app

๐Ÿš€ Installation

Add dependency in pubspec.yaml:

dependencies: zeba_academy_visibility: ^0.0.1

Then run:

flutter pub get ๐Ÿง  Basic Usage ๐Ÿ‘๏ธ Visibility Detection import 'package:flutter/material.dart'; import 'package:zeba_academy_visibility/zeba_academy_visibility.dart';

class ExamplePage extends StatelessWidget { final controller = VisibilityController();

ExamplePage({super.key});

@override Widget build(BuildContext context) { return Scaffold( body: ListView( children: ZebaVisibilityDetector( controller: controller, visibilityThreshold: 0.5, onVisibilityChanged: (isVisible, fraction) { debugPrint("Visible: $isVisible | $fraction"); }, child: Container( height: 200, color: Colors.blue, child: const Center( child: Text( "Hello Visibility", style: TextStyle(color: Colors.white), ), ), ), ), , ), ); } } ๐ŸŽฌ Fade Animation ZebaFadeVisibility( isVisible: true, child: Container( height: 150, color: Colors.green, child: const Center( child: Text("Fade In"), ), ), ) ๐ŸŽž๏ธ Slide Animation ZebaSlideVisibility( isVisible: true, beginOffset: Offset(0, 0.3), child: Container( height: 150, color: Colors.orange, child: const Center( child: Text("Slide In"), ), ), ) ๐Ÿ” Once Only Trigger final controller = VisibilityController();

if (controller.hasBeenVisible) { debugPrint("Widget already visible once"); } ๐Ÿ“Š Visibility Properties Property Description isVisible Current visibility state visibleFraction Visibility percentage (0.0 - 1.0) hasBeenVisible True once widget is seen โš™๏ธ How It Works Detects widget position on screen Compares with viewport bounds Calculates visible portion Converts to percentage Triggers updates via controller ๐Ÿ“ Package Structure lib/ โ”œโ”€โ”€ zeba_academy_visibility.dart โ”œโ”€โ”€ src/ โ”‚ โ”œโ”€โ”€ visibility_detector_widget.dart โ”‚ โ”œโ”€โ”€ visibility_builder.dart โ”‚ โ”œโ”€โ”€ visibility_controller.dart โ”‚ โ”œโ”€โ”€ animation/ โ”‚ โ”‚ โ”œโ”€โ”€ fade_visibility.dart โ”‚ โ”‚ โ”œโ”€โ”€ slide_visibility.dart โšก Use Cases Scroll-based animations Content engagement tracking Feed-style UI (Instagram-like apps) Learning apps (Zeba Academy use case) Lazy animation loading ๐Ÿงช Example App

See /example folder for full working demo.

๐Ÿ“œ License

This package is licensed under:

GNU General Public License v3.0 (GPL-3.0)

You are free to:

Use Modify Distribute

But any modified version must remain open-source under GPL-3.0.

๐Ÿ‘จโ€๐Ÿ’ป About Developer

โœจ Sufyan bin Uzayr Open-source developer passionate about building useful Flutter tools.

๐ŸŒ https://sufyanism.com ๐Ÿ”— https://www.linkedin.com/in/sufyanism

๐ŸŽ“ Zeba Academy

๐Ÿš€ Learn coding & development at:

https://zeba.academy https://code.zeba.academy https://www.youtube.com/@zeba.academy https://www.instagram.com/zeba.academy ๐Ÿ’™ Final Note

If you like this package, consider โญ starring the repo and contributing.