# Alerts

<div id="introduction"></div>

## परिचय

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

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

<div id="basic-usage"></div>

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

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

``` dart
// सफलता टोस्ट
showToastSuccess(description: "Item saved successfully");

// चेतावनी टोस्ट
showToastWarning(description: "Your session is about to expire");

// जानकारी टोस्ट
showToastInfo(description: "New version available");

// खतरा टोस्ट
showToastDanger(description: "Failed to save item");
```

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

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

<div id="built-in-styles"></div>

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

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

| स्टाइल ID | आइकन | रंग | डिफ़ॉल्ट शीर्षक |
|----------|------|-------|---------------|
| `success` | चेकमार्क | हरा | Success |
| `warning` | विस्मयादिबोधक | नारंगी | Warning |
| `info` | इंफो आइकन | टील | Info |
| `danger` | चेतावनी आइकन | लाल | Error |

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

``` 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',
    ),
  };
}
```

<div id="from-pages"></div>

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

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

``` dart
class _MyPageState extends NyState<MyPage> {

  void onSave() {
    // सफलता
    showToastSuccess(description: "Saved!");

    // कस्टम शीर्षक के साथ
    showToastSuccess(title: "Done", description: "Your profile was updated.");

    // चेतावनी
    showToastWarning(description: "Check your input");

    // जानकारी
    showToastInfo(description: "Tip: Swipe left to delete");

    // खतरा
    showToastDanger(description: "Something went wrong");

    // ओह्ह (danger स्टाइल उपयोग करता है)
    showToastOops(description: "That didn't work");

    // माफ़ करें (danger स्टाइल उपयोग करता है)
    showToastSorry(description: "We couldn't process your request");

    // ID द्वारा कस्टम स्टाइल
    showToastCustom(id: "custom", description: "Custom alert!");
  }
}
```

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

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

<div id="from-controllers"></div>

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

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

``` dart
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`.

<div id="show-toast-notification"></div>

## showToastNotification

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

``` dart
showToastNotification(
  context,
  id: 'success',
  title: 'Saved',
  description: 'Your changes have been saved.',
  duration: Duration(seconds: 3),
  position: ToastNotificationPosition.top,
  action: () {
    // टोस्ट पर टैप होने पर कॉल होता है
    routeTo("/details");
  },
  onDismiss: () {
    // टोस्ट डिसमिस होने पर कॉल होता है
  },
  onShow: () {
    // टोस्ट दृश्यमान होने पर कॉल होता है
  },
);
```

### पैरामीटर

| पैरामीटर | टाइप | डिफ़ॉल्ट | विवरण |
|-----------|------|---------|-------------|
| `context` | `BuildContext` | आवश्यक | बिल्ड कॉन्टेक्स्ट |
| `id` | `String` | `'success'` | टोस्ट स्टाइल ID |
| `title` | `String?` | null | शीर्षक टेक्स्ट; टोस्ट विजेट को जैसा है वैसा पास किया जाता है |
| `description` | `String?` | null | विवरण टेक्स्ट |
| `data` | `Map<String, dynamic>?` | null | डेटा-अवेयर टोस्ट स्टाइल को रनटाइम पर पास किए जाने वाले key-value जोड़े; `title` और `description` मिलते-जुलते key पर प्राथमिकता लेते हैं |
| `duration` | `Duration?` | null | टोस्ट कितनी देर प्रदर्शित हो |
| `position` | `ToastNotificationPosition?` | null | स्क्रीन पर कहाँ दिखे |
| `action` | `VoidCallback?` | null | टैप कॉलबैक |
| `onDismiss` | `VoidCallback?` | null | डिसमिस कॉलबैक |
| `onShow` | `VoidCallback?` | null | शो कॉलबैक |

<div id="toast-meta"></div>

## ToastMeta

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

``` dart
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"},
)
```

### प्रॉपर्टीज़

| प्रॉपर्टी | टाइप | डिफ़ॉल्ट | विवरण |
|----------|------|---------|-------------|
| `icon` | `Widget?` | null | आइकन विजेट |
| `title` | `String` | `''` | शीर्षक टेक्स्ट |
| `style` | `String` | `''` | स्टाइल आइडेंटिफ़ायर |
| `description` | `String` | `''` | विवरण टेक्स्ट |
| `color` | `Color?` | null | आइकन सेक्शन का बैकग्राउंड रंग |
| `action` | `VoidCallback?` | null | टैप कॉलबैक |
| `dismiss` | `VoidCallback?` | null | डिसमिस बटन कॉलबैक |
| `onDismiss` | `VoidCallback?` | null | ऑटो/मैन्युअल डिसमिस कॉलबैक |
| `onShow` | `VoidCallback?` | null | दृश्यमान होने का कॉलबैक |
| `duration` | `Duration` | 5 सेकंड | प्रदर्शन अवधि |
| `position` | `ToastNotificationPosition` | `top` | स्क्रीन पोज़िशन |
| `metaData` | `Map<String, dynamic>?` | null | कस्टम मेटाडेटा |

### copyWith

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

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

<div id="positioning"></div>

## पोज़िशनिंग

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

``` dart
// स्क्रीन के ऊपर (डिफ़ॉल्ट)
showToastNotification(context,
  id: "success",
  description: "Top alert",
  position: ToastNotificationPosition.top,
);

// स्क्रीन के नीचे
showToastNotification(context,
  id: "info",
  description: "Bottom alert",
  position: ToastNotificationPosition.bottom,
);

// स्क्रीन के बीच में
showToastNotification(context,
  id: "warning",
  description: "Center alert",
  position: ToastNotificationPosition.center,
);
```

<div id="custom-styles"></div>

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

<div id="registering-styles"></div>

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

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

``` dart
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;
  }
}
```

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

``` dart
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),
  ),
});
```

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

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

<div id="creating-a-style-factory"></div>

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

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

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

| पैरामीटर | टाइप | विवरण |
|-----------|------|-------------|
| `icon` | `Widget` | टोस्ट के लिए आइकन विजेट |
| `color` | `Color` | आइकन सेक्शन का बैकग्राउंड रंग |
| `defaultTitle` | `String` | कोई शीर्षक न होने पर दिखाया जाने वाला शीर्षक |
| `position` | `ToastNotificationPosition?` | डिफ़ॉल्ट पोज़िशन |
| `duration` | `Duration?` | डिफ़ॉल्ट अवधि |
| `builder` | `Widget Function(ToastMeta)?` | पूर्ण नियंत्रण के लिए कस्टम विजेट बिल्डर |

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

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

``` dart
'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)),
            ],
          ),
        ),
      ],
    ),
  );
}
```

<div id="data-aware-toast-styles"></div>

### डेटा-अवेयर टोस्ट स्टाइल

<!-- uncertain: new Nylo-specific term "ToastStyleDataFactory" — not seen in existing locale file -->
रनटाइम पर कॉल के समय डेटा प्राप्त करने वाली टोस्ट स्टाइल रजिस्टर करने के लिए `ToastStyleDataFactory` का उपयोग करें। यह तब उपयोगी है जब टोस्ट की सामग्री — जैसे उपयोगकर्ता का नाम या अवतार — रजिस्ट्रेशन के समय ज्ञात नहीं होती।

``` dart
typedef ToastStyleDataFactory =
    ToastStyleFactory Function(Map<String, dynamic> data);
```

`registerWithData()` के साथ डेटा-अवेयर स्टाइल रजिस्टर करें:

``` dart
ToastNotificationRegistry.instance.registerWithData(
  'new_follower',
  (data) => (meta, updateMeta) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Row(
        children: [
          CircleAvatar(backgroundImage: NetworkImage(data['avatar'])),
          SizedBox(width: 12),
          Text("${data['name']} followed you"),
        ],
      ),
    );
  },
);
```

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

``` dart
nylo.addToastNotifications({
  ...ToastNotificationConfig.styles,
  'new_follower': (Map<String, dynamic> data) => (meta, updateMeta) {
    return Container(
      padding: EdgeInsets.all(16),
      child: Row(
        children: [
          CircleAvatar(backgroundImage: NetworkImage(data['avatar'])),
          SizedBox(width: 12),
          Text("${data['name']} followed you"),
        ],
      ),
    );
  },
});
```

रनटाइम पर `data` मैप के साथ इसे कॉल करें:

``` dart
showToastNotification(
  context,
  id: 'new_follower',
  data: {'name': 'Alice', 'avatar': 'https://example.com/alice.jpg'},
);
```

यदि आप `title` या `description` भी पास करते हैं, तो वे `data` में मिलते-जुलते key पर प्राथमिकता लेते हैं।

यदि आपको विजेट स्वयं बनाना है तो `ToastNotificationRegistry.resolve(id, data)` सीधे उपयोग करें:

``` dart
final factory = ToastNotificationRegistry.instance.resolve('new_follower', data);
if (factory != null) {
  final widget = factory(toastMeta, (updated) {});
}
```

<div id="alert-tab"></div>

## AlertTab

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

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

### पैरामीटर

| पैरामीटर | टाइप | डिफ़ॉल्ट | विवरण |
|-----------|------|---------|-------------|
| `state` | `String` | आवश्यक | ट्रैकिंग के लिए स्टेट का नाम |
| `alertEnabled` | `bool?` | null | बैज दिखे या नहीं |
| `rememberAlert` | `bool?` | `true` | बैज स्टेट को स्टोरेज में सहेजें |
| `icon` | `Widget?` | null | टैब आइकन |
| `backgroundColor` | `Color?` | null | टैब बैकग्राउंड |
| `textColor` | `Color?` | null | बैज टेक्स्ट रंग |
| `alertColor` | `Color?` | null | बैज बैकग्राउंड रंग |
| `smallSize` | `double?` | null | छोटे बैज का आकार |
| `largeSize` | `double?` | null | बड़े बैज का आकार |
| `textStyle` | `TextStyle?` | null | बैज टेक्स्ट स्टाइल |
| `padding` | `EdgeInsetsGeometry?` | null | बैज पैडिंग |
| `alignment` | `Alignment?` | null | बैज अलाइनमेंट |
| `offset` | `Offset?` | null | बैज ऑफ़सेट |
| `isLabelVisible` | `bool?` | `true` | बैज लेबल दिखाएँ |

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

`NavigationTab` से बनाएँ:

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

<div id="examples"></div>

## उदाहरण

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

``` dart
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.");
  }
}
```

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

``` dart
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),
);
```

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

``` dart
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),
);
```