Material ebeveyn

InkWell'ın Material ebeveyne ihtiyaç duyduğunu öğrenirsin.

Material ebeveyn

InkWell'in çizdiği dalgalanma yalnızca bir Material widget'ı üzerinde görünür. Material, Ink'in çizileceği yüzeyi sağlar; bu yüzden InkWell genellikle bir Material ile sarmalanır. Material ebeveyni yoksa InkWell'in callback'leri çalışır ama dalgalanma görünmez.

Material(
  child: InkWell(
    onTap: () => print('Tik'),
    child: Text('Dokun'),
  ),
)

Scaffold ve MaterialApp

Scaffold ve MaterialApp gibi widget'lar zaten bir Material sağlar; bu yüzden çoğu ekranda ayrıca Material eklemek gerekmez. Ancak saf bir widget ağacında, örneğin doğrudan Center içinde InkWell kullanıyorsan, Material ile sarmalaman gerekir. Material ebeveyni widget ağacında herhangi bir derinlikte olabilir.

Uygulama InkWell'i Material ile sar

tikla adında bir fonksiyon yaz; çağrılınca Material yazdırsın. main içinde tikla'yı çağır. InkWell'i bir Material ile sar ve onTap'i tikla'ya bağla.

Örnek çözümü göster

import 'package:flutter/material.dart';

void tikla() {
  print('Material');
}

void main() {
  tikla();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Material(
            child: InkWell(
              onTap: tikla,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Kendini test et

InkWell, Material ebeveyni olmadan kullanılırsa ne olur?
- InkWell otomatik Material ekler
- Uygulama derleme hatası verir
- Uygulama çöker
- Callback'ler çalışır ama dalgalanma görünmez
Cevabı göster

Callback'ler çalışır ama dalgalanma görünmez — Material ebeveyni yoksa InkWell'in onTap gibi callback'leri çalışmaya devam eder, ancak dalgalanma efekti çizilemez.

Material widget'ını ekle

return ____(
  child: InkWell(
    onTap: () =&gt; print('Tik'),
    child: Text('Dokun'),
  ),
);

Cevabı göster

return Material(
  child: InkWell(
    onTap: () =&gt; print('Tik'),
    child: Text('Dokun'),
  ),
);

Material ve InkWell

Material

Ink için yüzey sağlar
InkWell

Material ebeveyne ihtiyaç duyar
ancestor

Widget ağacındaki üst widget
ripple

Material olmadan görünmez

Sıradaki ders: onTap callback

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler