InkWell तरंग प्रभाव नहीं दिखा रहा है

Question

कंटेनर को टैप करने से onTap()हैंडलर चालू हो जाता है लेकिन कोई स्याही स्प्लैश प्रभाव नहीं दिखाता है।

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
}

मैं InkWellअंदर के Containerरूप में अच्छी तरह से व्यर्थ में डालने की कोशिश की ।

Answer 1

मुझे लगता है कि कंटेनर में रंग जोड़ना स्याही प्रभाव को कवर कर रहा है

https://docs.flutter.io/flutter/material/InkWell/InkWell.html

यह कोड काम करने लगता है

  body: new Center(
    child: new Container(
      child: new Material(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
          ),
        ),
        color: Colors.transparent,
      ),
      color: Colors.orange,
    ),
  ),

बस मध्य वर्ग पर क्लिक करें।

संपादित करें: मुझे बग रिपोर्ट मिली। https://github.com/flutter/flutter/issues/3782

यह वास्तव में अपेक्षित है, हालांकि हमें इसे स्पष्ट करने के लिए डॉक्स को अपडेट करना चाहिए।

क्या चल रहा है कि सामग्री युक्ति का कहना है कि स्पलैश वास्तव में सामग्री पर स्याही है। इसलिए जब हम छपते हैं, तो हम जो करते हैं, उसका शाब्दिक अर्थ होता है भौतिक विजेट छप। यदि आपके पास सामग्री के ऊपर कुछ है, तो हम उसके नीचे छप जाते हैं, और आप इसे नहीं देख सकते।

मैं एक "MaterialImage" विजेट जोड़ना चाहता हूं जो वैचारिक रूप से अपनी छवि को सामग्री के रूप में अच्छी तरह से मुद्रित करता है ताकि छवि पर स्पलैश खत्म हो जाए। हम एक MaterialDecoration हो सकता है जो एक सजावट के लिए कुछ समान है। या हम हो सकता है सामग्री खुद एक सजावट ले। अभी इसमें एक रंग लगता है, लेकिन हम इसे पूरी सजावट में ले जा सकते हैं। यह स्पष्ट नहीं है कि क्या यह वास्तव में सामग्री-कल्पना-संगत है जिसमें एक ढाल के साथ एक सामग्री है, हालांकि, मुझे यकीन नहीं है कि क्या हमें ऐसा करना चाहिए।

थोड़े समय में, यदि आपको केवल वर्कअराउंड की आवश्यकता है, तो आप "पारदर्शिता" प्रकार का उपयोग करने के लिए सेट की गई सामग्री के साथ, कंटेनर के ऊपर एक सामग्री रख सकते हैं, और फिर स्याही को उसके अंदर अच्छी तरह से डाल सकते हैं।

--hixie

अपडेट: Hixie ने पिछले साल एक नया इंक समाधान का विलय किया। इंक छवियों पर छप करने के लिए एक सुविधाजनक तरीका प्रदान करता है।

  testWidgets('Does the Ink widget render anything', (WidgetTester tester) async {
    await tester.pumpWidget(
      new Material(
        child: new Center(
          child: new Ink(
            color: Colors.blue,
            width: 200.0,
            height: 200.0,
            child: new InkWell(
              splashColor: Colors.green,
              onTap: () { },
            ),
          ),
        ),
      ),
    );


Material(
  color: Colors.grey[800],
  child: Center(
    child: Ink.image(
      image: AssetImage('cat.jpeg'),
      fit: BoxFit.cover,
      width: 300.0,
      height: 200.0,
      child: InkWell(
        onTap: () { /* ... */ },
        child: Align(
          alignment: Alignment.topLeft,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Text('KITTEN', style: TextStyle(fontWeight: FontWeight.w900, color: Colors.white)),
          ),
        )
      ),
    ),
  ),
)

कृपया ध्यान दें: मैंने नए इंक विजेट का परीक्षण नहीं किया। मैंने ink_paint_test.dart और इंक वर्ग डॉक्स से कोड कॉपी किया

https://github.com/Hixie/flutter/blob/1f6531984984f52328e66c0cd500a8d517964564/packages/flutter/test/material/ink_paint_test.dart

https://github.com/flutter/flutter/pull/13900

https://api.flutter.dev/flutter/material/Ink-class.html

Comments

आप बस रंग Materialखुद पर डाल सकते हैं और बाहर छोड़ सकते हैं Container।

— हेरोहार्ट

मुझे पता चला कि जब CopsOnRoad ने अपना उत्तर पोस्ट किया था।

— user1462442

@KoenVanLooveren CopsOnRoad उत्तर आज़माएं। मैंने अपना समाधान संपादित नहीं किया क्योंकि CopsOnRoad का समाधान बहुत ही सुंदर है

— user1462442

यह वही है जो मैंने कुछ रीफैक्टरिंग के बाद उपयोग किया: डी

— थैंक्स

मेरे मामले में यह कंटेनर का आकार था, समाधान के लिए धन्यवाद

— मोहम्मद एरसन

Answer 2

आउटपुट:

---

बस Inkएक में लिपटे विजेट का उपयोग करें InkWell।

InkWell(
  onTap: () {}, // needed
  child: Ink( // use Ink
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

Comments

स्रोत चरण 3 की पुष्टि करता है: github.com/flutter/flutter/blob/… प्रत्येक हैंडलर में वे जांचते हैं कि क्या कॉलबैक उपलब्ध है, अन्यथा कुछ नहीं होता है।

— रात

@CopsOnRoad, क्या मैं आपसे यहां एक स्पंदन संबंधित प्रश्न पूछ सकता हूं: stackoverflow.com/questions/60539378/… ?

— इस्तियाक अहमद

यदि पूर्ण कोड से आपका मतलब है कि आपने जो उदाहरण दिया है वह हां है। मैंने इसे समाधान> stackoverflow.com/a/58556613/12140067

— क्रिस

@ क्रिस मुझे लगता है कि आप कुछ Themeया Materialहस्तक्षेप हो सकता है , क्योंकि यह कोड दिन भर काम करता है।

— CopsOnRoad

Answer 3

जब तक आप जोड़ते हैं, इंकवेल () कभी भी लहर प्रभाव नहीं दिखाएगा

onTap : () {} 

या किसी भी कॉलबैक जैसे onDoubleTap, onLongPress आदि।

InkWell के अंदर का पैरामीटर क्योंकि यह आपके टैप को तब ही सुनना शुरू करता है जब आप इस पैरामीटर को निर्दिष्ट करते हैं।

Comments

हाँ, मैंने किया, और इसका सच है। स्रोत की जाँच करें: github.com/flutter/flutter/blob/… प्रत्येक हैंडलर में वे जाँचते हैं कि क्या कॉलबैक उपलब्ध है, अन्यथा कुछ नहीं होता है।

— रात्रि

Answer 4

1. इंकवेल विजेट में पूर्वजों के रूप में एक भौतिक विजेट होना चाहिए अन्यथा यह प्रभाव नहीं दिखा सकता है। उदाहरण के लिए:

   Material(
     child : InkWell(
       child : .....
   

2. आपको onTapवास्तविक प्रभावों को देखने के लिए विधि को जोड़ना होगा

    Buttons {RaisedButton,FlatButton etc}.
    e.g -> Material(
                child : InkWell(
                        onTap : (){}
                        child : .....
   

आइए मुख्य बिंदुओं पर आते हैं नीचे कुछ उदाहरण देखें और इंकवेल की वास्तविक अवधारणाओं को समझने की कोशिश करें।

• नीचे दिए गए उदाहरण में सामग्री onTap के साथ InkWell के माता-पिता हैं लेकिन यह अभी भी काम नहीं कर रहा है। कृपया इसकी अवधारणा को समझने का प्रयास करें। आपको प्रभाव दिखाने के लिए कंटेनर या अन्य विजेट के लिए कुछ मार्जिन प्रदान करना चाहिए। वास्तव में नीचे कोड ठीक काम कर रहा है, लेकिन हम नहीं देख सकते हैं क्योंकि हमने कोई मार्जिन या संरेखित नहीं किया है, इसलिए इसमें प्रभाव दिखाने के लिए कोई स्थान नहीं है।

  Widget build(BuildContext context) {
    return Center(
      child: Material(
        child: new InkWell(
          onTap: () {
            print("tapped");
          },
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),  
        ),
      ),
    );
  }
  

• उदाहरण के लिए नीचे की ओर केवल इंकवेल प्रभाव दिखाते हैं क्योंकि हम अंतरिक्ष {मार्जिन} प्रदान करते हैं।

  Widget build(BuildContext context) {
    return Center(
      child: Material(
        child: new InkWell(
          onTap: () {
            print("tapped");
          },
          child: new Container(
            margin: EdgeInsets.only(top: 100.0),
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
  

• नीचे विस्तार। सभी पृष्ठ में प्रभाव दिखाएं क्योंकि केंद्र सभी तरफ से मार्जिन बनाता है। केंद्र संरेखित करें यह ऊपर, बाएँ, दाएँ और नीचे से बाल विजेट है।

  Widget build(BuildContext context) {
    return Center(
      child: Material(
        child: new InkWell(
          onTap: () {
            print("tapped");
          },
          child: Center(
            child: new Container(
              width: 100.0,
              height: 100.0,
              color: Colors.orange,
            ),
          ),
        ),
      ),
    );
   }
  

Answer 5

इसका उपयोग करने का एक बेहतर तरीका है Ink किसी अन्य विजेट के बजाय विजेट ।

colorकंटेनर के अंदर परिभाषित करने के बजाय आप इसे Inkविजेट में ही परिभाषित कर सकते हैं ।

नीचे कोड काम करेगा।

Ink(
  color: Colors.orange,
  child: InkWell(
    child: Container(
      width: 100,
      height: 100,
    ),
    onTap: () {},
  ),
)

एक जोड़ने के लिए मत भूलना onTap: () {}में InkWellकिसी और यह भी असर नहीं दिखाया जाएगा।

Answer 6

मुझे इसका हल मिल गया है। मुझे लगता है कि यह आपकी मदद कर सकता है:

Material(
      color: Theme.of(context).primaryColor,
      child: InkWell(
        splashColor: Theme.of(context).primaryColorLight,
        child: Container(
          height: 100,
        ),
        onTap: () {},
      ),
    )

Colorसामग्री विजेट के लिए दिया जाता है। यह आपके विजेट का डिफ़ॉल्ट रंग है। आप splashColorइंकवेल की संपत्ति का उपयोग करके तरंग प्रभाव के रंग को समायोजित कर सकते हैं।

Answer 7

यह सबसे अच्छा तरीका है जो मैंने पाया और हमेशा इसका उपयोग करता हूं। आप इसे आज़मा सकते हैं।

• अपने Widgetसाथ लपेटेंInkWell
• के InkWellसाथ लपेटेंMaterial

• किसी भी तरह से अपारदर्शिता को 0% पर सेट करें। उदाहरण के लिए:color: Colors.white.withOpacity(0.0),

  Material(
    color: Colors.white.withOpacity(0.0),
    child: InkWell(
      child: Container(width: 100, height: 100),
      onTap: (){print("Wow! Ripple");},
    ),
  )
  

Answer 8

यह मेरे लिए काम कर रहा है:

Material(
    color: Colors.white.withOpacity(0.0),
    child: InkWell(
      splashColor: Colors.orange,
      child: Text('Hello'), // actually here it's a Container wrapping an image
      onTap: () {
        print('Click');
      },
    ));

यहाँ कई उत्तरों की कोशिश करने के बाद, यह निम्नलिखित का एक संयोजन था:

1. स्थापना splashColor
2. रैपिंग InkWellमेंMaterial(color: Colors.white.withOpacity(0.0), ..)

यहां उन उत्तरों के लिए धन्यवाद जो उन 2 बिंदुओं को बनाते हैं

Answer 9

मैं इसी समस्या में भाग गया एक सूची दृश्य में इंकवेल का एक वैकल्पिक रंग बनाने की कोशिश कर रहा था। उस विशेष मामले में, एक सरल समाधान है: एक कंटेनर में वैकल्पिक लपेटें जो ज्यादातर पारदर्शी टिंट / चमक परिवर्तन का उपयोग करता है - इंकवेल स्पर्श एनीमेशन अभी भी इसके नीचे दिखाई देगा। कोई सामग्री की जरूरत है। ध्यान दें कि किसी अन्य समस्या के बारे में जब यह एक Matal के साथ काम करने की कोशिश कर रहा है - जैसे, यह एक DefaultTextStyle को आप डिफ़ॉल्ट के साथ उपयोग कर रहे हैं (यह एक AnimatedDefaultTextStyle स्थापित करता है) को ओवरराइड करेगा जो एक बहुत बड़ा दर्द है।

Answer 10

onTap:(){}श्रोता को जोड़ने के बाद , रिपल इफेक्ट को ठीक काम करना चाहिए। यदि आप विजेट BoxShadow()में उपयोग करते हैं तो यह काम नहीं करता है InkWell()।

Comments

यही चाल है। Ripple onTap () के बिना काम नहीं करेगा। धन्यवाद दोस्त!

— हार्दिक जोशी

Answer 11

इंकवेल कंटेनर का रंग सेट करें

विजेट के अंदर रखा गया कोई भी बच्चा विजेट Materialमें रंग सेट लेता है Material। इसलिए, हमें मटीरियल की कलर प्रॉपर्टी से ही कलर सेट करना चाहिए। आप इसे किसी भी पैरेंट Containerविजेट से सेट नहीं कर सकते ।

माता-पिता विजेट के InkWellसाथ बनाते समय ध्यान देने योग्य एक और महत्वपूर्ण बात यह Materialहै कि आपको सामग्री की संपत्ति से ही रंग निर्धारित करना चाहिए। आप इसे से सेट नहीं कर सकते Container।

इसलिए, हमारा कोड जो InkWellप्रभाव को ठीक करता है और कंटेनर का रंग इस तरह दिखता है:

Container(
    margin: EdgeInsets.all(12),
    height: 50.0,
    width: 100.0,
    decoration: BoxDecoration(boxShadow: [
      BoxShadow(
          color: Colors.grey, blurRadius: 4, offset: Offset(0, 2))
    ]),
    child: Material(
      color: Colors.blue,
      child: InkWell(
        child: Center(
            child: Text("My Chip",
                style: Theme.of(context).textTheme.body1)),
        onTap: () {},
      ),
    ),
  )

Answer 12

मैं एक ऐसी ही समस्या से टकरा रहा था जिसमें एक मौजूदा जटिल विजेट में एक कंटेनर के साथ इंकवेल को एक रंग के साथ एक बॉक्सडेक्यूलेशन लपेटकर रखा गया था। जिस तरह से सुझाव दिया गया था कि इंकवेल को अभी भी बॉक्सडेक्यूलेशन द्वारा अस्पष्ट किया गया था, इस तरह से सामग्री और इंकवेल को जोड़कर मैंने सिर्फ बॉक्सडेक्यूलेशन के रंग को थोड़ा अपारदर्शी बना दिया जिससे इंकवेल को देखा जा सके।

Answer 13

परिपत्र विजेट का समाधान, नीचे की तरह करें:

Material(
    color: Colors.transparent,
    child: Container(
      alignment: Alignment.center,
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(
              enableFeedback: true,
              iconSize: 40,
              icon: Icon(
                Icons.skip_previous,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {}),
          IconButton(
            iconSize: 100,
            enableFeedback: true,
            splashColor: Colors.grey,
            icon: Icon(Icons.play_circle_filled, color: Colors.white, size: 100),
            padding: EdgeInsets.all(0),
            onPressed: () {},
          ),
          IconButton(
              enableFeedback: true,
              iconSize: 40,
              icon: Icon(
                Icons.skip_next,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {}),
        ],
      ),
    ),
  )

Answer 14

मेरे लिए यह एक और समस्या थी। जब मैं अपने विजेट के पैरामीटर को नीचे के रूप में कार्य करता हूं, तो इंकवेल रिपल प्रभाव नहीं दिखा रहा था।

Function(Result) onTapItem;
...
onTap: onTapItem(result),

मुझे नहीं पता कि क्या अंतर है, लेकिन अगला कोड अच्छी तरह से काम कर रहा है।

onTap: (){ onTapItem(result); },

Answer 15

यदि आप किसी भी विजेट पर एक रिपल इफेक्ट चाहते हैं :

1- सामग्री और इंकवेल के साथ विजेट लपेटें ।

2- मटेरियल से विजेट पर कलर सेट करें ।

3- जिस विजेट को आप रिपल करना चाहते हैं, उस पर कलर कभी सेट न करें ।

   Material (
   color: const Color(0xcffFF8906),
   child: InkWell(
   ontap:() { },
   child: Container(
   color: Colors.transparent,
   height: 80,
   width: 80,
 )