Alerts

परिचय

Nylo Website उपयोगकर्ताओं को अलर्ट प्रदर्शित करने के लिए एक टोस्ट नोटिफ़िकेशन सिस्टम प्रदान करता है। यह चार बिल्ट-इन स्टाइल के साथ आता है -- success, warning, info, और danger -- और रजिस्ट्री पैटर्न के माध्यम से कस्टम स्टाइल का समर्थन करता है।

अलर्ट पेज, कंट्रोलर, या कहीं से भी ट्रिगर किए जा सकते हैं जहाँ आपके पास BuildContext है।

बुनियादी उपयोग

किसी भी NyState पेज में कन्वीनिएंस मेथड का उपयोग करके टोस्ट नोटिफ़िकेशन दिखाएँ:

// Success toast
showToastSuccess(description: "Item saved successfully");

// Warning toast
showToastWarning(description: "Your session is about to expire");

// Info toast
showToastInfo(description: "New version available");

// Danger toast
showToastDanger(description: "Failed to save item");

या स्टाइल ID के साथ ग्लोबल फंक्शन का उपयोग करें:

showToastNotification(context, id: "success", description: "Item saved!");

बिल्ट-इन स्टाइल

Nylo Website चार डिफ़ॉल्ट टोस्ट स्टाइल रजिस्टर करता है:

ये lib/config/toast_notification.dart में कॉन्फ़िगर किए गए हैं:

class ToastNotificationConfig {
  static final Map<String, ToastStyleFactory> styles = {
    'success': ToastNotification.style(
      icon: Icon(Icons.check_circle, color: Colors.green, size: 20),
      color: Colors.green.shade50,
      defaultTitle: 'Success',
    ),
    'warning': ToastNotification.style(
      icon: Icon(Icons.warning_amber_rounded, color: Colors.orange, size: 20),
      color: Colors.orange.shade50,
      defaultTitle: 'Warning',
    ),
    'info': ToastNotification.style(
      icon: Icon(Icons.info_outline, color: Colors.teal, size: 20),
      color: Colors.teal.shade50,
      defaultTitle: 'Info',
    ),
    'danger': ToastNotification.style(
      icon: Icon(Icons.warning_rounded, color: Colors.red, size: 20),
      color: Colors.red.shade50,
      defaultTitle: 'Error',
    ),
  };
}

पेज से अलर्ट दिखाना

NyState या NyBaseState को एक्सटेंड करने वाले किसी भी पेज में, इन कन्वीनिएंस मेथड का उपयोग करें:

class _MyPageState extends NyState<MyPage> {

  void onSave() {
    // Success
    showToastSuccess(description: "Saved!");

    // With custom title
    showToastSuccess(title: "Done", description: "Your profile was updated.");

    // Warning
    showToastWarning(description: "Check your input");

    // Info
    showToastInfo(description: "Tip: Swipe left to delete");

    // Danger
    showToastDanger(description: "Something went wrong");

    // Oops (uses danger style)
    showToastOops(description: "That didn't work");

    // Sorry (uses danger style)
    showToastSorry(description: "We couldn't process your request");

    // Custom style by ID
    showToastCustom(id: "custom", description: "Custom alert!");
  }
}

सामान्य टोस्ट मेथड

showToast(
  id: 'success',
  title: 'Hello',
  description: 'Welcome back!',
  duration: Duration(seconds: 3),
);

कंट्रोलर से अलर्ट दिखाना

NyController को एक्सटेंड करने वाले कंट्रोलर में समान कन्वीनिएंस मेथड उपलब्ध हैं:

class ProfileController extends NyController {
  void updateProfile() async {
    try {
      await api.updateProfile();
      showToastSuccess(description: "Profile updated");
    } catch (e) {
      showToastDanger(description: "Failed to update profile");
    }
  }
}

उपलब्ध मेथड: showToastSuccess, showToastWarning, showToastInfo, showToastDanger, showToastOops, showToastSorry, showToastCustom.

showToastNotification

ग्लोबल showToastNotification() फंक्शन कहीं से भी टोस्ट प्रदर्शित करता है जहाँ आपके पास BuildContext है:

showToastNotification(
  context,
  id: 'success',
  title: 'Saved',
  description: 'Your changes have been saved.',
  duration: Duration(seconds: 3),
  position: ToastNotificationPosition.top,
  action: () {
    // Called when the toast is tapped
    routeTo("/details");
  },
  onDismiss: () {
    // Called when the toast is dismissed
  },
  onShow: () {
    // Called when the toast becomes visible
  },
);

पैरामीटर

ToastMeta

ToastMeta टोस्ट नोटिफ़िकेशन के सभी डेटा को समाहित करता है:

ToastMeta(
  title: 'Custom Alert',
  description: 'Something happened.',
  icon: Icon(Icons.star, color: Colors.purple),
  color: Colors.purple.shade50,
  style: 'custom',
  duration: Duration(seconds: 5),
  position: ToastNotificationPosition.top,
  action: () => print("Tapped!"),
  dismiss: () => print("Dismiss pressed"),
  onDismiss: () => print("Toast dismissed"),
  onShow: () => print("Toast shown"),
  metaData: {"key": "value"},
)

प्रॉपर्टीज़

copyWith

ToastMeta की संशोधित कॉपी बनाएँ:

ToastMeta updated = originalMeta.copyWith(
  title: "New Title",
  duration: Duration(seconds: 10),
);

पोज़िशनिंग

टोस्ट स्क्रीन पर कहाँ दिखे यह नियंत्रित करें:

// Top of screen (default)
showToastNotification(context,
  id: "success",
  description: "Top alert",
  position: ToastNotificationPosition.top,
);

// Bottom of screen
showToastNotification(context,
  id: "info",
  description: "Bottom alert",
  position: ToastNotificationPosition.bottom,
);

// Center of screen
showToastNotification(context,
  id: "warning",
  description: "Center alert",
  position: ToastNotificationPosition.center,
);

कस्टम टोस्ट स्टाइल

स्टाइल रजिस्टर करना

अपने AppProvider में कस्टम स्टाइल रजिस्टर करें:

class AppProvider implements NyProvider {
  @override
  setup(Nylo nylo) async {
    await nylo.configure(
      toastNotifications: {
        ...ToastNotificationConfig.styles,
        'custom': ToastNotification.style(
          icon: Icon(Icons.star, color: Colors.purple, size: 20),
          color: Colors.purple.shade50,
          defaultTitle: 'Custom!',
        ),
      },
    );
    return nylo;
  }
}

या किसी भी समय स्टाइल जोड़ें:

nylo.addToastNotifications({
  'promo': ToastNotification.style(
    icon: Icon(Icons.local_offer, color: Colors.pink, size: 20),
    color: Colors.pink.shade50,
    defaultTitle: 'Special Offer',
    position: ToastNotificationPosition.bottom,
    duration: Duration(seconds: 8),
  ),
});

फिर इसका उपयोग करें:

showToastNotification(context, id: "promo", description: "50% off today!");

स्टाइल फैक्ट्री बनाना

ToastNotification.style() एक ToastStyleFactory बनाता है:

static ToastStyleFactory style({
  required Widget icon,
  required Color color,
  required String defaultTitle,
  ToastNotificationPosition? position,
  Duration? duration,
  Widget Function(ToastMeta toastMeta)? builder,
})

पूर्ण कस्टम बिल्डर

टोस्ट विजेट पर पूर्ण नियंत्रण के लिए:

'banner': (ToastMeta meta, void Function(ToastMeta) updateMeta) {
  return Container(
    margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    padding: EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.indigo,
      borderRadius: BorderRadius.circular(12),
    ),
    child: Row(
      children: [
        Icon(Icons.campaign, color: Colors.white),
        SizedBox(width: 12),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(meta.title, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
              Text(meta.description, style: TextStyle(color: Colors.white70)),
            ],
          ),
        ),
      ],
    ),
  );
}

AlertTab

AlertTab नेविगेशन टैब में नोटिफ़िकेशन इंडिकेटर जोड़ने के लिए एक बैज विजेट है। यह एक बैज प्रदर्शित करता है जिसे टॉगल किया जा सकता है और वैकल्पिक रूप से स्टोरेज में सहेजा जा सकता है।

AlertTab(
  state: "notifications_tab",
  alertEnabled: true,
  icon: Icon(Icons.notifications),
  alertColor: Colors.red,
)

पैरामीटर

फैक्ट्री कंस्ट्रक्टर

NavigationTab से बनाएँ:

AlertTab.fromNavigationTab(
  myNavigationTab,
  index: 0,
  icon: Icon(Icons.home),
  stateName: "home_alert",
)

उदाहरण

सहेजने के बाद सफलता अलर्ट

void saveItem() async {
  try {
    await api<ItemApiService>((request) => request.saveItem(item));
    showToastSuccess(description: "Item saved successfully");
  } catch (e) {
    showToastDanger(description: "Could not save item. Please try again.");
  }
}

एक्शन के साथ इंटरएक्टिव टोस्ट

showToastNotification(
  context,
  id: "info",
  title: "New Message",
  description: "You have a new message from Anthony",
  action: () {
    routeTo(ChatPage.path, data: {"userId": "123"});
  },
  duration: Duration(seconds: 8),
);

नीचे स्थित चेतावनी

showToastNotification(
  context,
  id: "warning",
  title: "No Internet",
  description: "You appear to be offline. Some features may not work.",
  position: ToastNotificationPosition.bottom,
  duration: Duration(seconds: 10),
);