InkWell tidak menunjukkan efek riak

Mengetuk wadah akan memicu onTap()penangan tetapi tidak menunjukkan efek percikan tinta apa pun.

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

Saya mencoba memasukkan bagian InkWelldalam Containerjuga tetapi sia-sia.

Saya pikir menambahkan warna ke wadah menutupi efek tinta

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

Kode ini sepertinya berfungsi

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

cukup klik kotak tengah.

Edit: Saya menemukan laporan bug. https://github.com/flutter/flutter/issues/3782

Ini sebenarnya seperti yang diharapkan, meskipun kami harus memperbarui dokumen untuk membuatnya lebih jelas.

Apa yang terjadi adalah spesifikasi Material mengatakan bahwa percikan sebenarnya adalah tinta pada Material. Jadi saat kita melakukan splash, yang kita lakukan adalah kita memiliki widget Material melakukan splash. Jika Anda memiliki sesuatu di atas Materi, kami memercik di bawahnya, dan Anda tidak dapat melihatnya.

Saya ingin menambahkan widget "MaterialImage" yang secara konseptual mencetak gambarnya ke Material juga sehingga percikan akan melewati gambar. Kita bisa memiliki MaterialDecoration yang melakukan hal serupa untuk Dekorasi. Atau kita bisa meminta Material itu sendiri mengambil dekorasi. Saat ini membutuhkan warna, tapi kita bisa memperluasnya ke mengambil keseluruhan dekorasi. Tidak jelas apakah itu benar-benar material-spec-kompatibel untuk memiliki material dengan gradien, jadi saya tidak yakin apakah kita harus melakukannya.

Dalam jangka pendek, jika Anda hanya membutuhkan solusi, Anda dapat meletakkan Material di atas wadah, dengan material yang disetel untuk menggunakan jenis "transparansi", dan kemudian meletakkan tinta dengan baik di dalamnya.

--hixie

Pembaruan: Hixie menggabungkan solusi Tinta baru tahun lalu. Tinta memberikan cara yang nyaman untuk memercikkan gambar.

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

Harap Dicatat: Saya tidak menguji Widget Tinta baru. Saya mengatasi kode dari ink_paint_test.dart dan dokumen kelas Ink

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

Keluaran:

Cukup gunakan Inkwidget yang dibungkus dengan InkWell.

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

InkWell () tidak akan pernah memperlihatkan efek riak sampai Anda menambahkan

onTap : () {} 

atau salah satu callback seperti onDoubleTap, onLongPress, dll.

parameter di dalam InkWell saat mulai mendengarkan ketukan Anda hanya saat Anda menentukan parameter ini.

1. Widget InkWell harus memiliki widget Material sebagai leluhur jika tidak maka tidak dapat menampilkan efek. Misalnya:

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

2. Anda harus menambahkan onTapmetode untuk melihat efek yang sebenarnya

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

Mari sampai pada poin utama, lihat beberapa contoh di bawah ini dan coba pahami konsep InkWell yang sebenarnya.

• Dalam contoh di bawah ini, Material adalah induk dari InkWell dengan onTap tetapi masih tidak berfungsi. Silakan coba untuk memahami konsepnya. Anda harus memberikan beberapa margin ke container atau widget lain untuk menunjukkan efeknya. Sebenarnya kode di bawah berfungsi dengan baik tetapi kami tidak dapat melihat karena kami tidak memberikan margin atau align sehingga tidak ada ruang untuk menunjukkan efeknya.

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

• Contoh di bawah ini memperlihatkan efek InkWell hanya ke atas karena kami menyediakan spasi {margin}.

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

• Di bawah exp. menunjukkan efek di semua halaman karena pusat membuat margin dari semua sisi. Rata tengah widget anak itu dari atas, kiri, kanan dan bawah.

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

Cara yang lebih baik adalah menggunakan Inkwidget daripada menggunakan widget lainnya.

Alih-alih menentukan colordi dalam penampung, Anda dapat menentukannya dalam Inkwidget itu sendiri.

Kode di bawah ini akan berfungsi.

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

Jangan lupa tambahkan onTap: () {}di bagian InkWelllain karena tidak akan menunjukkan efek riak juga.

Saya telah menemukan solusi ini untuk saya. Saya rasa ini dapat membantu Anda:

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

Colordiberikan ke widget Material. Ini adalah warna default widget Anda. Anda dapat mengatur warna efek riak menggunakan splashColorproperti Inkwell.

Ini adalah cara terbaik yang saya temukan dan selalu gunakan. Kamu bisa mencobanya.

• Bungkus WidgetdenganInkWell
• Bungkus InkWelldenganMaterial

• Setel opacity 0% bagaimanapun juga. misalnya: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");},
    ),
  )
  

Saya mengalami masalah yang sama ini mencoba membuat warna bolak-balik dari InkWell di ListView. Dalam kasus khusus tersebut, ada solusi sederhana: bungkus alternatif dalam Wadah yang sebagian besar menggunakan perubahan warna / kecerahan transparan - animasi sentuh InkWell akan tetap terlihat di bawahnya. Tidak ada Bahan yang dibutuhkan. Perhatikan ada masalah lain ketika mencoba untuk mengatasi ini dengan Materal - misalnya, ini akan menimpa DefaultTextStyle yang Anda gunakan dengan default (ini menginstal AnimatedDefaultTextStyle) yang sangat merepotkan.

Ini bekerja untuk saya:

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

Setelah mencoba banyak jawaban di sini, itu adalah kombinasi dari:

1. Pengaturan splashColor
2. Wrapping InkWelldiMaterial(color: Colors.white.withOpacity(0.0), ..)

Berkat jawaban di sini yang membuat 2 poin itu

Setelah Anda menambahkan onTap:(){}pendengar, efek riak seharusnya berfungsi dengan baik. Tidak berfungsi jika Anda menggunakan BoxShadow()dengan di InkWell()widget.

Saya terkena masalah serupa menambahkan Inkwell ke Widget kompleks yang ada dengan Container yang membungkus BoxDecoration dengan warna. Dengan menambahkan Material dan Inkwell dengan cara yang disarankan bahwa Inkwell masih dikaburkan oleh BoxDecoration jadi saya hanya membuat warna BoxDecoration sedikit buram yang memungkinkan Inkwell terlihat.

Solusi untuk widget melingkar, lakukan seperti di bawah ini:

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: () {}),
        ],
      ),
    ),
  )

Bagi saya itu masalah lain. InkWell tidak menunjukkan efek riak ketika saya memiliki fungsi onTap sebagai parameter widget saya yang ditentukan seperti di bawah ini.

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

Saya tidak tahu apa bedanya, tetapi kode berikutnya berfungsi dengan baik.

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