मोडल

परिचय

Nylo Website बॉटम शीट मोडल पर आधारित एक मोडल सिस्टम प्रदान करता है।

BottomSheetModal क्लास आपको एक्शन, हेडर, बंद करने के बटन, और कस्टम स्टाइलिंग के साथ कंटेंट ओवरले प्रदर्शित करने के लिए एक लचीला API देता है।

मोडल इनके लिए उपयोगी हैं:

• पुष्टिकरण डायलॉग (उदा., लॉगआउट, डिलीट)
• त्वरित इनपुट फ़ॉर्म
• कई विकल्पों वाली एक्शन शीट
• सूचनात्मक ओवरले

मोडल बनाना

आप Metro CLI का उपयोग करके नया मोडल बना सकते हैं:

metro make:bottom_sheet_modal payment_options

यह दो चीज़ें बनाता है:

1. एक मोडल कंटेंट विजेट lib/resources/widgets/bottom_sheet_modals/modals/payment_options_modal.dart पर:

import 'package:flutter/material.dart';

/// Payment Options Modal
///
/// Used in BottomSheetModal.showPaymentOptions()
class PaymentOptionsModal extends StatelessWidget {
  const PaymentOptionsModal({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('PaymentOptionsModal').headingLarge(),
      ],
    );
  }
}

2. एक स्टैटिक मेथड आपकी BottomSheetModal क्लास में lib/resources/widgets/bottom_sheet_modals/bottom_sheet_modals.dart में जोड़ा जाता है:

/// Show Payment Options modal
static Future<void> showPaymentOptions(BuildContext context) {
  return displayModal(
    context,
    isScrollControlled: false,
    child: const PaymentOptionsModal(),
  );
}

इसके बाद आप मोडल को कहीं से भी कॉल कर सकते हैं:

BottomSheetModal.showPaymentOptions(context);

यदि समान नाम का मोडल पहले से मौजूद है, तो इसे ओवरराइट करने के लिए --force फ़्लैग का उपयोग करें:

metro make:bottom_sheet_modal payment_options --force

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

BottomSheetModal का उपयोग करके मोडल प्रदर्शित करें:

BottomSheetModal.showLogout(context);

मोडल बनाना

अनुशंसित पैटर्न एक BottomSheetModal क्लास बनाना है जिसमें प्रत्येक मोडल प्रकार के लिए स्टैटिक मेथड हों। बॉयलरप्लेट यह संरचना प्रदान करता है:

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

class BottomSheetModal extends NyBaseModal {
  static ModalShowFunction get displayModal => displayModal;

  /// Show Logout modal
  static Future<void> showLogout(
    BuildContext context, {
    Function()? onLogoutPressed,
    Function()? onCancelPressed,
  }) {
    return displayModal(
      context,
      isScrollControlled: false,
      child: const LogoutModal(),
      actionsRow: [
        Button.secondary(
          text: "Logout",
          onPressed: onLogoutPressed ?? () => routeToInitial(),
        ),
        Button(
          text: "Cancel",
          onPressed: onCancelPressed ?? () => Navigator.pop(context),
        ),
      ],
    );
  }
}

इसे कहीं से भी कॉल करें:

BottomSheetModal.showLogout(context);

// With custom callbacks
BottomSheetModal.showLogout(
  context,
  onLogoutPressed: () {
    // Custom logout logic
  },
  onCancelPressed: () {
    Navigator.pop(context);
  },
);

BottomSheetModal

displayModal<T>() मोडल प्रदर्शित करने का मुख्य मेथड है।

पैरामीटर

एक्शन

एक्शन मोडल के नीचे प्रदर्शित बटन हैं।

पंक्ति एक्शन एक-दूसरे के बगल में रखे जाते हैं, प्रत्येक को समान स्थान मिलता है:

displayModal(
  context,
  child: Text("Are you sure?"),
  actionsRow: [
    ElevatedButton(
      onPressed: () => Navigator.pop(context, true),
      child: Text("Yes"),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, false),
      child: Text("No"),
    ),
  ],
);

कॉलम एक्शन लंबवत रूप से एक के ऊपर एक रखे जाते हैं:

displayModal(
  context,
  child: Text("Choose an option"),
  actionsColumn: [
    ElevatedButton(
      onPressed: () => Navigator.pop(context, true),
      child: Text("Yes"),
    ),
    TextButton(
      onPressed: () => Navigator.pop(context, false),
      child: Text("No"),
    ),
  ],
);

हेडर

मुख्य कंटेंट के ऊपर हेडर जोड़ें:

displayModal(
  context,
  header: Container(
    padding: EdgeInsets.all(16),
    color: Colors.blue,
    child: Text(
      "Modal Title",
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
  child: Text("Modal content goes here"),
);

बंद करने का बटन

ऊपरी-दाएँ कोने में बंद करने का बटन प्रदर्शित करें:

displayModal(
  context,
  showCloseButton: true,
  closeButtonColor: Colors.grey.shade200,
  closeButtonIconColor: Colors.black,
  child: Padding(
    padding: EdgeInsets.all(24),
    child: Text("Content with close button"),
  ),
);

कस्टम डेकोरेशन

मोडल कंटेनर की दिखावट को कस्टमाइज़ करें:

displayModal(
  context,
  backgroundColor: Colors.transparent,
  modalDecoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
    boxShadow: [
      BoxShadow(color: Colors.black26, blurRadius: 10),
    ],
  ),
  handleColor: Colors.grey.shade400,
  child: Text("Custom styled modal"),
);

BottomModalSheetStyle

BottomModalSheetStyle फ़ॉर्म पिकर और अन्य कॉम्पोनेंट द्वारा उपयोग किए जाने वाले बॉटम शीट मोडल की दिखावट को कॉन्फ़िगर करता है:

BottomModalSheetStyle(
  backgroundColor: NyColor(light: Colors.white, dark: Colors.grey.shade900),
  barrierColor: NyColor(light: Colors.black54, dark: Colors.black87),
  useRootNavigator: false,
  titleStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  itemStyle: TextStyle(fontSize: 16),
  clearButtonStyle: TextStyle(color: Colors.red),
)

उदाहरण

पुष्टिकरण मोडल

static Future<bool?> showConfirm(
  BuildContext context, {
  required String message,
}) {
  return displayModal<bool>(
    context,
    child: Padding(
      padding: EdgeInsets.symmetric(vertical: 16),
      child: Text(message, textAlign: TextAlign.center),
    ),
    actionsRow: [
      ElevatedButton(
        onPressed: () => Navigator.pop(context, true),
        child: Text("Confirm"),
      ),
      TextButton(
        onPressed: () => Navigator.pop(context, false),
        child: Text("Cancel"),
      ),
    ],
  );
}

// Usage
bool? confirmed = await BottomSheetModal.showConfirm(
  context,
  message: "Delete this item?",
);
if (confirmed == true) {
  // delete the item
}

स्क्रॉल करने योग्य कंटेंट मोडल

displayModal(
  context,
  isScrollControlled: true,
  height: MediaQuery.of(context).size.height * 0.8,
  showCloseButton: true,
  header: Padding(
    padding: EdgeInsets.all(16),
    child: Text("Terms of Service", style: TextStyle(fontSize: 20)),
  ),
  child: SingleChildScrollView(
    child: Text(longTermsText),
  ),
);

एक्शन शीट

displayModal(
  context,
  showHandle: true,
  child: Text("Share via", style: TextStyle(fontSize: 18)),
  actionsColumn: [
    ListTile(
      leading: Icon(Icons.email),
      title: Text("Email"),
      onTap: () {
        Navigator.pop(context);
        shareViaEmail();
      },
    ),
    ListTile(
      leading: Icon(Icons.message),
      title: Text("Message"),
      onTap: () {
        Navigator.pop(context);
        shareViaMessage();
      },
    ),
    ListTile(
      leading: Icon(Icons.copy),
      title: Text("Copy Link"),
      onTap: () {
        Navigator.pop(context);
        copyLink();
      },
    ),
  ],
);