chaoperty_floating_loader 0.1.0

chaoperty_floating_loader: ^0.1.0 copied to clipboard

floating_loader

EN: Global transparent overlay loader for Flutter. Supports once, ping-pong, and loop-wrap motions with optional dim background and card. Works from anywhere via a global navigatorKey.

TH: ตัวโหลดแบบโอเวอร์เลย์โปร่งใสสำหรับ Flutter รองรับการเคลื่อนที่แบบ ครั้งเดียว (once), ไป-กลับ (ping-pong) และ วนรอบ (loop-wrap) พร้อม ฉากหลังมืด และ การ์ด (เลือกได้) เรียกใช้ได้จากทุกที่ผ่าน navigatorKey ระดับแอป

📦 Installation | ติดตั้ง

Add to your pubspec.yaml:

dependencies: floating_loader: ^0.1.0

If you want to use the bundled GIF from this package:

flutter: assets: - packages/floating_loader/images/Alternate_Duck_Side_walk_demo.gif

⚙️ Setup (required) | การตั้งค่า (จำเป็น)

Register the global navigatorKey:

import 'package:flutter/material.dart'; import 'package:floating_loader/floating_loader.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget { const MyApp({super.key});

@override Widget build(BuildContext context) { return MaterialApp( navigatorKey: ChaoAppLoader.navigatorKey, // ✅ required / จำเป็น home: const MyHome(), ); } }

🚀 Quick Usage | ตัวอย่างใช้งานเร็ว

ElevatedButton( onPressed: () { ChaoAppLoader.show( message: 'กำลังโหลด...', // text/ข้อความใต้ GIF slideAcross: true, // enable motion/เปิดการเคลื่อนที่ motion: Motion.pingPong, // once | pingPong | loopWrap rangeMinAt: 0.2, // 0.0..1.0 rangeMaxAt: 0.8, // 0.0..1.0 slideMs: 2000, // speed (ms) / ยิ่งมากยิ่งช้า verticalFactor: 0.7, // 0.0=top, 1.0=bottom // asset: 'packages/floating_loader/images/Alternate_Duck_Side_walk_demo.gif', ); Future.delayed(const Duration(seconds: 2), ChaoAppLoader.hide); }, child: const Text('Show Loader'), );

Hide anytime:

ChaoAppLoader.hide();

🧭 Motion Examples | ตัวอย่างโหมดการเคลื่อนที่

1. Once (custom start → end) | ครั้งเดียว (กำหนดเริ่ม→จบ)

ChaoAppLoader.show( message: 'Once: 0.20 → 0.85', slideAcross: true, motion: Motion.once, fromAt: 0.20, toAt: 0.85, bounceAtEdges: true, // เด้งเล็กน้อยเมื่อชนขอบ slideMs: 5200, verticalFactor: 0.70, );

2. Ping-Pong (within a range) | ไป-กลับในช่วง

ChaoAppLoader.show( message: 'Ping-Pong: 0.30 ↔ 0.80', slideAcross: true, motion: Motion.pingPong, rangeMinAt: 0.30, rangeMaxAt: 0.80, bounceAtEdges: true, slideMs: 1400, verticalFactor: 0.66, );

3. Loop-Wrap (Left → Right) | วนรอบ (ซ้าย→ขวา)

ChaoAppLoader.show( message: 'Loop wrap (L→R)', slideAcross: true, motion: Motion.loopWrap, slideToRight: true, startAt: 0.15, // or Random().nextDouble() slideMs: 2400, verticalFactor: 0.72, );

Tip (TH): ถ้าอยากเริ่มตรงไหนก็ได้ ให้ใช้ startAt: Random().nextDouble() หรือกำหนด fromAt/toAt ตรง ๆ

🧪 Local (page-only) overlay | โอเวอร์เลย์เฉพาะหน้า

Wrap any page with a simple overlay:

class LoadingOverlay extends StatelessWidget { final bool loading; final Widget child;

const LoadingOverlay({super.key, required this.loading, required this.child});

@override Widget build(BuildContext context) { return Stack( children: [ child, if (loading) const Positioned.fill( child: DuckLoading(message: 'Loading...'), ), ], ); } }

🔧 Tips & Troubleshooting | ทิปและการแก้ปัญหา

Nothing shows up? / ไม่ขึ้นเลย? ตรวจสอบว่าใส่ navigatorKey: ChaoAppLoader.navigatorKey ใน MaterialApp แล้ว และรูปที่ใช้มีใน assets (flutter pub get/flutter run อีกครั้ง)

Make it slower/faster / ปรับความเร็ว เพิ่ม/ลด slideMs (ms). Bigger = slower.

Start at any position / เริ่มจุดไหนก็ได้ ใช้ startAt: Random().nextDouble() หรือ fromAt/toAt (สำหรับ once)

Use packaged asset / ใช้รูปในแพ็กเกจ ใส่พาธแบบ packages/floating_loader/... ตามตัวอย่างด้านบน

📄 License

Chaoperty © .

🇹🇭 สรุปสั้น (TH)

floating_loader คือโอเวอร์เลย์โหลดเดอร์แบบโปร่งใส เรียกได้จากทุกที่ (ไม่ต้องมี BuildContext) รองรับการเคลื่อนไหวหลายโหมด ปรับตำแหน่ง/ช่วง/ความเร็วได้ และเลือกใช้ฉากหลังมืดหรือการ์ดได้ตามต้องการ

เริ่มต้น: ใส่ navigatorKey: ChaoAppLoader.navigatorKey → เรียก ChaoAppLoader.show(...) / ChaoAppLoader.hide().

🇺🇸 Short Summary (EN)

floating_loader is a global, transparent overlay loader. Call it anywhere (no BuildContext), choose motion mode, tweak speed/positions/ranges, and optionally enable dim background or card.

Getting started: Add navigatorKey: ChaoAppLoader.navigatorKey → call ChaoAppLoader.show(...) / ChaoAppLoader.hide().