ইঙ্কওয়েল রিপল ইফেক্ট দেখায় না

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

আমি মনে করি ধারকটিতে রঙ যুক্ত করা কালি প্রভাবকে coveringেকে রাখছে

https://docs.flutter.io/flutter/matory/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

এটি প্রকৃতপক্ষে প্রত্যাশার মতো, যদিও আমাদের ডক্সটিকে আরও পরিষ্কার করার জন্য আপডেট করা উচিত।

যা চলছে তা মেটেরিয়াল স্পেক বলছে যে স্প্ল্যাশগুলি বস্তুগুলিতে আসলে কালি k সুতরাং যখন আমরা স্প্ল্যাশ করি তখন আমরা যা করি তা হ'ল আক্ষরিক অর্থে মেটেরিয়াল উইজেটটি স্প্ল্যাশ করে। আপনার যদি সামগ্রীর শীর্ষে কিছু থাকে তবে আমরা এর নীচে স্প্ল্যাশ করি এবং আপনি এটি দেখতে পারবেন না।

আমি একটি "ম্যাটারিয়াল ইমেজ" উইজেট যুক্ত করতে চেয়েছি যা ধারণাগতভাবে এর চিত্রটি উপাদানটিতে প্রিন্ট করে দেয় যাতে স্প্ল্যাশগুলি চিত্রের উপরে চলে যায়। আমাদের কাছে একটি ম্যাটারিয়ালডেকোরেশন থাকতে পারে যা একটি সজ্জার জন্য অনুরূপ কিছু করে। অথবা আমরা মেটেরিয়াল নিজেই একটি সজ্জা নিতে পারে। এই মুহূর্তে এটি একটি রঙ নেয়, তবে আমরা এটি পুরো সজ্জায় গ্রহণ করতে প্রসারিত করতে পারি। এটি গ্রেডিয়েন্টের সাথে কোনও উপাদান রাখার জন্য এটি সত্যই উপাদান-অনুষঙ্গ-সামঞ্জস্যপূর্ণ কিনা তা পরিষ্কার নয়, সুতরাং আমাদের এটি করা উচিত কিনা তা সম্পর্কে আমি নিশ্চিত নই।

খুব অল্প সময়ে, যদি আপনার কেবলমাত্র কাজের প্রয়োজন হয় তবে আপনি "স্বচ্ছতা" প্রকারটি ব্যবহার করার জন্য সেট সেট করে পাত্রে উপরে একটি উপাদান রাখতে পারেন এবং তারপরে কালিটি ভালভাবে রেখে দিতে পারেন।

--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)),
          ),
        )
      ),
    ),
  ),
)

দয়া করে দ্রষ্টব্য: আমি নতুন কালি উইজেট পরীক্ষা করিনি। আমি কালি_পেন্ট_েস্ট.ডার্ট এবং কালি শ্রেণীর ডক্স থেকে কোডটি অনুলিপি করেছি

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

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

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

Comments

আপনি শুধু রঙ লাগাতে পারেন Materialনিজেই এবং ছেড়ে Container।

— হেরোহতার

আমি যখন কপসঅনরোড তার উত্তর পোস্ট করলাম তখন আমি অনুগ্রহ করেছিলাম।

— ব্যবহারকারী 1462442

কোয়ানভানলুভেরেন কেপসঅনরোড উত্তরটি চেষ্টা করুন Try আমি আমার সমাধানটি সম্পাদনা করিনি কারণ CopsOnRoad এর সমাধানটি বেশ মার্জিত

— ব্যবহারকারী 1462442

আমি কিছু রিফ্যাক্টরিংয়ের পরে এটি ব্যবহার করেছি: ডি ধন্যবাদ

— কোইন ভ্যান লুভেরেন

আমার ক্ষেত্রে এটি কনটেইনার আকৃতি ছিল, সমাধানটির জন্য ধন্যবাদ

— মোহাম্মদ এরশান

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/... ?

— ইসতিয়াক আহমেদ

পুরো কোড দ্বারা যদি আপনি বোঝানো উদাহরণটি বোঝায় তবে হ্যাঁ। আমি এটি সমাধান হিসাবে পেয়েছি> স্ট্যাকওভারফ্লো.com

— ক্রিস

@ ক্রিস আমি মনে করি আপনার কিছুটা Themeবা Material'হস্তক্ষেপ থাকতে পারে কারণ এই কোডটি সারা দিন কাজ করে।

— কপসঅনরোড

— এটিই

Answer 3

ইঙ্কওয়েল () আপনি যোগ না করা অবধি রিপল প্রভাবটি কখনই প্রদর্শন করবে না

onTap : () {} 

অথবা অন ডাবলটিপ, অনলংপ্রেস ইত্যাদির মতো কোনও কলব্যাক

আপনি যখন এই প্যারামিটারটি নির্দিষ্ট করেন কেবল তখনই কেবলমাত্র আপনার কলগুলি শুনতে শুরু করার সাথে ইনকওয়েলটির অভ্যন্তরের প্যারামিটার।

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 : .....
   

আসুন মূল বিষয়গুলিতে আসুন নীচে কিছু উদাহরণ দেখুন এবং ইনকওয়েল এর আসল ধারণাগুলি বোঝার চেষ্টা করুন।

• নীচে উদাহরণস্বরূপ ম্যাটেরিয়ালটি অনক্যাপ সহ ইনকওয়েল এর পিতামাতা তবে এটি এখনও কাজ করছে না। দয়া করে এর ধারণাটি বোঝার চেষ্টা করুন। প্রভাবগুলি দেখানোর জন্য আপনার ধারক বা অন্যান্য উইজেটের কিছুটা মার্জিন সরবরাহ করা উচিত। কোডের নীচে ঠিকঠাক কাজ করছে তবে আমরা দেখতে পাচ্ছি না কারণ আমরা কোনও মার্জিন সরবরাহ করি না বা প্রান্তিককরণ করি না কারণ এর প্রভাবগুলি দেখানোর কোনও স্থান নেই।

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

• উদাহরণের নীচে কেবলমাত্র উপরের দিকে ইঙ্কওয়েল প্রভাবগুলি দেখান কারণ আমরা স্থান space মার্জিন} সরবরাহ করি}

  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

আমি তালিকাভিউতে ইনকওয়েলের একটি বিকল্প রঙ তৈরি করার চেষ্টা করে এই একই সমস্যার মধ্যে পড়েছিলাম। সেই বিশেষ ক্ষেত্রে, একটি সহজ সমাধান রয়েছে: একটি ধারকটির বিকল্পগুলি মোড়ানো যা বেশিরভাগ স্বচ্ছ রঙ / উজ্জ্বলতা পরিবর্তন ব্যবহার করে - এর নীচে ইনকওয়েল টাচ অ্যানিমেশনটি দৃশ্যমান হবে। কোন উপাদান প্রয়োজন। মনে রাখবেন যে মেটেরাল দিয়ে এটিকে ঘিরে কাজ করার চেষ্টা করার সময় অন্যান্য সমস্যা রয়েছে - উদাহরণস্বরূপ, এটি একটি ডিফল্ট টেক্সটাইল স্টাইলকে ওভাররাইড করবে যেটি আপনি ডিফল্টর সাথে ব্যবহার করছেন (এটি একটি অ্যানিমেটেড ডিফল্ট টেক্সট স্টাইল ইনস্টল করে) যা একটি বিশাল ব্যথা।

Answer 9

এটি আমার পক্ষে কাজ করছে:

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 10

আপনি onTap:(){}শ্রোতাদের যুক্ত করার পরে , রিপল এফেক্টটি ঠিকভাবে কাজ করা উচিত। যদি আপনি ব্যবহার এটা কাজ করে না BoxShadow()সঙ্গে InkWell()উইজেট।

Comments

এটাই কৌশল। রিপল অনট্যাপ () ছাড়া কাজ করবে না। ধন্যবাদ মানুষ!

— হার্দিক জোশী

Answer 11

আমি একটি একই সমস্যা দ্বারা আক্রান্ত হয়েছিলাম একটি বিদ্যমান জটিল উইজেটে ইনকওয়েল যুক্ত একটি কনটেইনার সহ একটি রঙের সাথে বাক্সডেকরেশন মোড়ানো complex উপায়ে এবং ইনকওয়েলকে এভাবে যুক্ত করে ইনকওয়েলটি বক্সডেকারেশন দ্বারা এখনও অস্পষ্ট করা হয়েছিল তাই আমি বাক্সডেকোরেশনের রঙটি কিছুটা অস্বচ্ছ করেছিলাম যা ইনকওয়েলকে দেখার সুযোগ দেয়

Answer 12

বিজ্ঞপ্তি উইজেটগুলির সমাধান, নীচের মতো করুন:

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 13

আমার জন্য এটি অন্য সমস্যা ছিল। যখন আমার উইজেটের প্যারামিটার হিসাবে নীচে হিসাবে সংজ্ঞায়িত করা হয়েছে তখন অনট্যাপ ফাংশনটি ছিল তখন ইনকওয়েল রিপল প্রভাব প্রদর্শন করছিল না।

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

পার্থক্য কী তা আমি জানি না, তবে পরবর্তী কোডটি ভালভাবে কাজ করছে।

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