Button

परिचय

Nylo Website आठ पूर्व-निर्मित बटन स्टाइल के साथ एक Button क्लास प्रदान करता है। प्रत्येक बटन में निम्नलिखित के लिए बिल्ट-इन सपोर्ट है:

• एसिंक लोडिंग स्टेट -- onPressed से एक Future लौटाएँ और बटन स्वचालित रूप से लोडिंग इंडिकेटर दिखाता है
• एनिमेशन स्टाइल -- clickable, bounce, pulse, squeeze, jelly, shine, ripple, morph, और shake इफेक्ट में से चुनें
• स्प्लैश स्टाइल -- ripple, highlight, glow, या ink टच फीडबैक जोड़ें
• फॉर्म सबमिशन -- एक बटन को सीधे NyFormData इंस्टेंस से जोड़ें

आप अपने ऐप की बटन परिभाषाएँ lib/resources/widgets/buttons/buttons.dart में पा सकते हैं। इस फ़ाइल में प्रत्येक बटन प्रकार के लिए स्टैटिक मेथड के साथ एक Button क्लास है, जो आपके प्रोजेक्ट के डिफ़ॉल्ट को कस्टमाइज़ करना आसान बनाती है।

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

अपने विजेट्स में कहीं भी Button क्लास का उपयोग करें। यहाँ एक पेज के अंदर एक सरल उदाहरण है:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Button.primary(
              text: "Sign Up",
              onPressed: () {
                routeTo(SignUpPage.path);
              },
            ),

            SizedBox(height: 12),

            Button.secondary(
              text: "Learn More",
              onPressed: () {
                routeTo(AboutPage.path);
              },
            ),

            SizedBox(height: 12),

            Button.outlined(
              text: "Cancel",
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    ),
  );
}

प्रत्येक बटन प्रकार एक ही पैटर्न का पालन करता है -- एक text लेबल और एक onPressed कॉलबैक पास करें।

उपलब्ध बटन प्रकार

सभी बटन स्टैटिक मेथड का उपयोग करके Button क्लास के माध्यम से एक्सेस किए जाते हैं।

Primary

आपके थीम की प्राइमरी कलर का उपयोग करने वाला शैडो के साथ एक भरा हुआ बटन। मुख्य कॉल-टू-एक्शन तत्वों के लिए सर्वोत्तम।

Button.primary(
  text: "Sign Up",
  onPressed: () {
    // Handle press
  },
)

Secondary

एक नरम सतह रंग और सूक्ष्म शैडो के साथ एक भरा हुआ बटन। प्राइमरी बटन के साथ सेकेंडरी एक्शन के लिए अच्छा।

Button.secondary(
  text: "Learn More",
  onPressed: () {
    // Handle press
  },
)

Outlined

बॉर्डर स्ट्रोक के साथ एक पारदर्शी बटन। कम प्रमुख एक्शन या कैंसल बटन के लिए उपयोगी।

Button.outlined(
  text: "Cancel",
  onPressed: () {
    // Handle press
  },
)

आप बॉर्डर और टेक्स्ट रंगों को कस्टमाइज़ कर सकते हैं:

Button.outlined(
  text: "Custom Outline",
  borderColor: Colors.red,
  textColor: Colors.red,
  onPressed: () {},
)

Text Only

बिना बैकग्राउंड या बॉर्डर के एक न्यूनतम बटन। इनलाइन एक्शन या लिंक के लिए आदर्श।

Button.textOnly(
  text: "Skip",
  onPressed: () {
    // Handle press
  },
)

आप टेक्स्ट रंग को कस्टमाइज़ कर सकते हैं:

Button.textOnly(
  text: "View Details",
  textColor: Colors.blue,
  onPressed: () {},
)

Icon

एक भरा हुआ बटन जो टेक्स्ट के साथ एक आइकन प्रदर्शित करता है। आइकन डिफ़ॉल्ट रूप से टेक्स्ट से पहले दिखाई देता है।

Button.icon(
  text: "Add to Cart",
  icon: Icon(Icons.shopping_cart),
  onPressed: () {
    // Handle press
  },
)

आप बैकग्राउंड रंग को कस्टमाइज़ कर सकते हैं:

Button.icon(
  text: "Download",
  icon: Icon(Icons.download),
  color: Colors.green,
  onPressed: () {},
)

Gradient

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

Button.gradient(
  text: "Get Started",
  onPressed: () {
    // Handle press
  },
)

आप कस्टम ग्रेडिएंट रंग प्रदान कर सकते हैं:

Button.gradient(
  text: "Premium",
  gradientColors: [Colors.purple, Colors.pink],
  onPressed: () {},
)

Rounded

पूरी तरह गोल कोनों वाला एक गोली के आकार का बटन। बॉर्डर रेडियस डिफ़ॉल्ट रूप से बटन की ऊँचाई का आधा होता है।

Button.rounded(
  text: "Continue",
  onPressed: () {
    // Handle press
  },
)

आप बैकग्राउंड रंग और बॉर्डर रेडियस को कस्टमाइज़ कर सकते हैं:

Button.rounded(
  text: "Apply",
  backgroundColor: Colors.teal,
  borderRadius: BorderRadius.circular(20),
  onPressed: () {},
)

Transparency

बैकड्रॉप ब्लर इफेक्ट के साथ फ्रॉस्टेड ग्लास स्टाइल बटन। इमेज या रंगीन बैकग्राउंड पर रखने पर अच्छा काम करता है।

Button.transparency(
  text: "Explore",
  onPressed: () {
    // Handle press
  },
)

आप टेक्स्ट रंग को कस्टमाइज़ कर सकते हैं:

Button.transparency(
  text: "View More",
  color: Colors.white,
  onPressed: () {},
)

एसिंक लोडिंग स्टेट

Nylo Website बटन की सबसे शक्तिशाली सुविधाओं में से एक है स्वचालित लोडिंग स्टेट प्रबंधन। जब आपका onPressed कॉलबैक एक Future लौटाता है, तो बटन स्वचालित रूप से एक लोडिंग इंडिकेटर दिखाता है और ऑपरेशन पूरा होने तक इंटरेक्शन अक्षम कर देता है।

Button.primary(
  text: "Submit",
  onPressed: () async {
    await sleep(3); // Simulates a 3 second async task
  },
)

एसिंक ऑपरेशन चलने के दौरान, बटन एक स्केलेटन लोडिंग इफेक्ट दिखाएगा (डिफ़ॉल्ट रूप से)। Future पूरा होने पर, बटन अपनी सामान्य स्थिति में लौट आता है।

यह किसी भी एसिंक ऑपरेशन के साथ काम करता है -- API कॉल, डेटाबेस राइट, फ़ाइल अपलोड, या कुछ भी जो Future लौटाता है:

Button.primary(
  text: "Save Profile",
  onPressed: () async {
    await api<ApiService>((request) =>
      request.updateProfile(name: "John", email: "john@example.com")
    );
    showToastSuccess(description: "Profile saved!");
  },
)

Button.secondary(
  text: "Sync Data",
  onPressed: () async {
    await fetchAndStoreData();
    await clearOldCache();
  },
)

isLoading स्टेट वेरिएबल प्रबंधित करने, setState कॉल करने, या किसी चीज़ को StatefulWidget में रैप करने की आवश्यकता नहीं -- Nylo Website यह सब आपके लिए संभालता है।

यह कैसे काम करता है

जब बटन पता लगाता है कि onPressed एक Future लौटाता है, तो वह lockRelease मैकेनिज़्म का उपयोग करता है:

1. एक लोडिंग इंडिकेटर दिखाएँ (LoadingStyle द्वारा नियंत्रित)
2. डुप्लिकेट टैप रोकने के लिए बटन अक्षम करें
3. Future पूरा होने की प्रतीक्षा करें
4. बटन को उसकी सामान्य स्थिति में पुनर्स्थापित करें

एनिमेशन स्टाइल

बटन ButtonAnimationStyle के माध्यम से प्रेस एनिमेशन का समर्थन करते हैं। ये एनिमेशन दृश्य फीडबैक प्रदान करते हैं जब कोई उपयोगकर्ता बटन के साथ इंटरेक्ट करता है। आप lib/resources/widgets/buttons/buttons.dart में अपने बटन कस्टमाइज़ करते समय एनिमेशन स्टाइल सेट कर सकते हैं।

Clickable

एक Duolingo-स्टाइल 3D प्रेस इफेक्ट। बटन प्रेस पर नीचे ट्रांसलेट होता है और रिलीज़ पर वापस स्प्रिंग करता है। प्राइमरी एक्शन और गेम जैसे UX के लिए सर्वोत्तम।

animationStyle: ButtonAnimationStyle.clickable()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.clickable(
  translateY: 6.0,        // How far the button moves down (default: 4.0)
  shadowOffset: 6.0,      // Shadow depth (default: 4.0)
  duration: Duration(milliseconds: 100),
  enableHapticFeedback: true,
)

Bounce

प्रेस पर बटन को नीचे स्केल करता है और रिलीज़ पर वापस स्प्रिंग करता है। कार्ट में जोड़ें, लाइक, और फेवरिट बटन के लिए सर्वोत्तम।

animationStyle: ButtonAnimationStyle.bounce()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.bounce(
  scaleMin: 0.90,         // Minimum scale on press (default: 0.92)
  duration: Duration(milliseconds: 150),
  curve: Curves.easeOutBack,
  enableHapticFeedback: true,
)

Pulse

बटन को दबाए रखने पर एक सूक्ष्म निरंतर स्केल पल्स। लॉन्ग-प्रेस एक्शन या ध्यान आकर्षित करने के लिए सर्वोत्तम।

animationStyle: ButtonAnimationStyle.pulse()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.pulse(
  pulseScale: 1.08,       // Max scale during pulse (default: 1.05)
  duration: Duration(milliseconds: 800),
  curve: Curves.easeInOut,
)

Squeeze

प्रेस पर बटन को क्षैतिज रूप से संपीड़ित करता है और लंबवत रूप से विस्तारित करता है। चंचल और इंटरेक्टिव UI के लिए सर्वोत्तम।

animationStyle: ButtonAnimationStyle.squeeze()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.squeeze(
  squeezeX: 0.93,         // Horizontal scale (default: 0.95)
  squeezeY: 1.07,         // Vertical scale (default: 1.05)
  duration: Duration(milliseconds: 120),
  enableHapticFeedback: true,
)

Jelly

एक लहराता लचीला विरूपण इफेक्ट। मज़ेदार, कैज़ुअल, या मनोरंजन ऐप्स के लिए सर्वोत्तम।

animationStyle: ButtonAnimationStyle.jelly()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.jelly(
  jellyStrength: 0.2,     // Wobble intensity (default: 0.15)
  duration: Duration(milliseconds: 300),
  curve: Curves.elasticOut,
  enableHapticFeedback: true,
)

Shine

प्रेस पर बटन के ऊपर से गुजरने वाला एक चमकदार हाइलाइट। प्रीमियम सुविधाओं या ध्यान आकर्षित करने वाले CTA के लिए सर्वोत्तम।

animationStyle: ButtonAnimationStyle.shine()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.shine(
  shineColor: Colors.white,  // Color of the shine streak (default: white)
  shineWidth: 0.4,           // Width of the shine band (default: 0.3)
  duration: Duration(milliseconds: 600),
)

Ripple

टच पॉइंट से फैलने वाला एक उन्नत रिपल इफेक्ट। Material Design एम्फेसिस के लिए सर्वोत्तम।

animationStyle: ButtonAnimationStyle.ripple()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.ripple(
  rippleScale: 2.5,       // How far the ripple expands (default: 2.0)
  duration: Duration(milliseconds: 400),
  curve: Curves.easeOut,
  enableHapticFeedback: true,
)

Morph

प्रेस पर बटन का बॉर्डर रेडियस बढ़ जाता है, जिससे आकार बदलने का इफेक्ट बनता है। सूक्ष्म, सुंदर फीडबैक के लिए सर्वोत्तम।

animationStyle: ButtonAnimationStyle.morph()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.morph(
  morphRadius: 30.0,      // Target border radius on press (default: 24.0)
  duration: Duration(milliseconds: 150),
  curve: Curves.easeInOut,
)

Shake

एक क्षैतिज शेक एनिमेशन। एरर स्टेट या अमान्य एक्शन के लिए सर्वोत्तम -- कुछ गलत होने का संकेत देने के लिए बटन को शेक करें।

animationStyle: ButtonAnimationStyle.shake()

इफेक्ट को फाइन-ट्यून करें:

ButtonAnimationStyle.shake(
  shakeOffset: 10.0,      // Horizontal displacement (default: 8.0)
  shakeCount: 4,          // Number of shakes (default: 3)
  duration: Duration(milliseconds: 400),
  enableHapticFeedback: true,
)

एनिमेशन अक्षम करना

बिना एनिमेशन के बटन उपयोग करने के लिए:

animationStyle: ButtonAnimationStyle.none()

डिफ़ॉल्ट एनिमेशन बदलना

किसी बटन प्रकार की डिफ़ॉल्ट एनिमेशन बदलने के लिए, अपनी lib/resources/widgets/buttons/buttons.dart फ़ाइल संशोधित करें:

class Button {
  static Widget primary({
    required String text,
    VoidCallback? onPressed,
    ...
  }) {
    return PrimaryButton(
      text: text,
      onPressed: onPressed,
      animationStyle: ButtonAnimationStyle.bounce(), // Change the default
    );
  }
}

स्प्लैश स्टाइल

स्प्लैश इफेक्ट बटन पर दृश्य टच फीडबैक प्रदान करते हैं। उन्हें ButtonSplashStyle के माध्यम से कॉन्फ़िगर करें। स्प्लैश स्टाइल को लेयर्ड फीडबैक के लिए एनिमेशन स्टाइल के साथ जोड़ा जा सकता है।

उपलब्ध स्प्लैश स्टाइल

उदाहरण

class Button {
  static Widget outlined({
    required String text,
    VoidCallback? onPressed,
    ...
  }) {
    return OutlinedButton(
      text: text,
      onPressed: onPressed,
      splashStyle: ButtonSplashStyle.ripple(),
      animationStyle: ButtonAnimationStyle.clickable(),
    );
  }
}

आप स्प्लैश रंगों और अपारदर्शिता को कस्टमाइज़ कर सकते हैं:

ButtonSplashStyle.ripple(
  splashColor: Colors.blue,
  highlightColor: Colors.blue,
  splashOpacity: 0.2,
  highlightOpacity: 0.1,
)

लोडिंग स्टाइल

एसिंक ऑपरेशन के दौरान दिखाया जाने वाला लोडिंग इंडिकेटर LoadingStyle द्वारा नियंत्रित होता है। आप इसे अपनी बटन फ़ाइल में प्रति बटन प्रकार सेट कर सकते हैं।

Skeletonizer (डिफ़ॉल्ट)

बटन पर एक शिमर स्केलेटन इफेक्ट दिखाता है:

loadingStyle: LoadingStyle.skeletonizer()

Normal

एक लोडिंग विजेट दिखाता है (डिफ़ॉल्ट रूप से ऐप लोडर):

loadingStyle: LoadingStyle.normal(
  child: Text("Please wait..."),
)

None

लोडिंग के दौरान बटन को दृश्यमान रखता है लेकिन इंटरेक्शन अक्षम करता है:

loadingStyle: LoadingStyle.none()

फॉर्म सबमिशन

सभी बटन submitForm पैरामीटर का समर्थन करते हैं, जो बटन को NyForm से जोड़ता है। टैप करने पर, बटन फॉर्म को वैलिडेट करेगा और आपके सफलता हैंडलर को फॉर्म डेटा के साथ कॉल करेगा।

Button.primary(
  text: "Submit",
  submitForm: (LoginForm(), (data) {
    // data contains the validated form fields
    print(data);
  }),
  onFailure: (error) {
    // Handle validation errors
    print(error);
  },
)

submitForm पैरामीटर दो मानों के साथ एक रिकॉर्ड स्वीकार करता है:

1. एक NyFormData इंस्टेंस (या String के रूप में फॉर्म नाम)
2. एक कॉलबैक जो वैलिडेटेड डेटा प्राप्त करता है

डिफ़ॉल्ट रूप से, showToastError true है, जो फॉर्म वैलिडेशन विफल होने पर एक टोस्ट नोटिफ़िकेशन दिखाता है। एरर को चुपचाप हैंडल करने के लिए इसे false पर सेट करें:

Button.primary(
  text: "Login",
  submitForm: (LoginForm(), (data) async {
    await api<AuthApiService>((request) => request.login(data));
  }),
  showToastError: false,
  onFailure: (error) {
    // Custom error handling
  },
)

जब submitForm कॉलबैक एक Future लौटाता है, तो बटन स्वचालित रूप से एसिंक ऑपरेशन पूरा होने तक लोडिंग स्टेट दिखाएगा।

बटन कस्टमाइज़ करना

सभी बटन डिफ़ॉल्ट आपके प्रोजेक्ट में lib/resources/widgets/buttons/buttons.dart में परिभाषित हैं। प्रत्येक बटन प्रकार की lib/resources/widgets/buttons/partials/ में एक संबंधित विजेट क्लास है।

डिफ़ॉल्ट स्टाइल बदलना

बटन की डिफ़ॉल्ट उपस्थिति को संशोधित करने के लिए, Button क्लास को संपादित करें:

class Button {
  static Widget primary({
    required String text,
    VoidCallback? onPressed,
    (dynamic, Function(dynamic data))? submitForm,
    Function(dynamic error)? onFailure,
    bool showToastError = true,
    double? width,
  }) {
    return PrimaryButton(
      text: text,
      onPressed: onPressed,
      submitForm: submitForm,
      onFailure: onFailure,
      showToastError: showToastError,
      loadingStyle: LoadingStyle.skeletonizer(),
      width: width,
      height: 52.0,
      animationStyle: ButtonAnimationStyle.bounce(),
      splashStyle: ButtonSplashStyle.glow(),
    );
  }
}

बटन विजेट कस्टमाइज़ करना

बटन प्रकार की दृश्य उपस्थिति बदलने के लिए, lib/resources/widgets/buttons/partials/ में संबंधित विजेट संपादित करें। उदाहरण के लिए, प्राइमरी बटन का बॉर्डर रेडियस या शैडो बदलने के लिए:

// lib/resources/widgets/buttons/partials/primary_button_widget.dart

class PrimaryButton extends StatefulAppButton {
  ...

  @override
  Widget buildButton(BuildContext context) {
    final theme = Theme.of(context);
    final bgColor = backgroundColor ?? theme.colorScheme.primary;
    final fgColor = contentColor ?? theme.colorScheme.onPrimary;

    return Container(
      width: width ?? double.infinity,
      height: height,
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(8), // Change the radius
      ),
      child: Center(
        child: Text(
          text,
          style: TextStyle(
            color: fgColor,
            fontSize: 16,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    );
  }
}

नया बटन प्रकार बनाना

नया बटन प्रकार जोड़ने के लिए:

1. lib/resources/widgets/buttons/partials/ में StatefulAppButton को एक्सटेंड करने वाली एक नई विजेट फ़ाइल बनाएँ।
2. buildButton मेथड को इम्प्लीमेंट करें।
3. Button क्लास में एक स्टैटिक मेथड जोड़ें।

// lib/resources/widgets/buttons/partials/danger_button_widget.dart

class DangerButton extends StatefulAppButton {
  DangerButton({
    required super.text,
    super.onPressed,
    super.submitForm,
    super.onFailure,
    super.showToastError,
    super.loadingStyle,
    super.width,
    super.height,
    super.animationStyle,
    super.splashStyle,
  });

  @override
  Widget buildButton(BuildContext context) {
    return Container(
      width: width ?? double.infinity,
      height: height,
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(14),
      ),
      child: Center(
        child: Text(
          text,
          style: TextStyle(
            color: Colors.white,
            fontSize: 16,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    );
  }
}

फिर इसे Button क्लास में रजिस्टर करें:

class Button {
  ...

  static Widget danger({
    required String text,
    VoidCallback? onPressed,
    (dynamic, Function(dynamic data))? submitForm,
    Function(dynamic error)? onFailure,
    bool showToastError = true,
    double? width,
  }) {
    return DangerButton(
      text: text,
      onPressed: onPressed,
      submitForm: submitForm,
      onFailure: onFailure,
      showToastError: showToastError,
      loadingStyle: LoadingStyle.skeletonizer(),
      width: width,
      height: 52.0,
      animationStyle: ButtonAnimationStyle.shake(),
    );
  }
}

पैरामीटर रेफरेंस

सामान्य पैरामीटर (सभी बटन प्रकार)

प्रकार-विशिष्ट पैरामीटर

Button.outlined

Button.textOnly

Button.icon

Button.gradient

Button.rounded

Button.transparency

ButtonAnimationStyle पैरामीटर

ButtonSplashStyle पैरामीटर