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