DEV Community

Cover image for GestureDetector Widget 💫 🌌 ✨
Gülsen Keskin
Gülsen Keskin

Posted on

GestureDetector Widget 💫 🌌 ✨

GestureDetector Widget

GestureDetector widget'ını diğer herhangi bir widget'ın etrafına sararak bu alt widget'ın kullanıcıdan gelen etkileşimi dinlemesini sağlayabilirsiniz.

GestureDetector'ın yalnızca iki argumana ihtiyacı vardır: bir widget (child) ve bir harekete karşılık gelen bir callback.

İşte bir örnek:

GestureDetector(
    onTap: () => print("tapped!"),
    child: Text("Tap Me"),
);
Enter fullscreen mode Exit fullscreen mode

onTap gibi iletilebilecek 30 farklı argumandan bazıları:

onTap
onTapUp
onTapDown
onLongPress
onDoubleTap
onHorizontalDragStart
onVerticalDragDown
onPanDown
onScaleStart

onTapUp, globalPosition'ı veya dokunulan ekrandaki konumu ortaya çıkaran TapUpDetails nesnesinin bir örneğini (instance) geri iletir.
Sürükleme ile ilgili olanlar gibi daha karmaşık hareketlerden bazıları, daha ilginç özelliklere sahiptir. Sürüklemenin başladığı saat, başladığı konum, bittiği konum ve sürüklemenin hızı hakkında ayrıntılı bilgi verirler. Bu, sürüklemeleri yön, hız vb. temelinde değiştirmenize olanak tanır.

Image description

body: GestureDetector(
    onDoubleTap: () {
      setState(() {
        widget.settings.selectedTemperature =
            widget.settings.selectedTemperature == TemperatureUnit.celsius
            ? TemperatureUnit.celsius
            : TemperatureUnit.fahrenheit;
      });
    },
    onVerticalDragUpdate: (DragUpdateDetails v)
                    => _handleDragEnd(v, context),
    child: ColorTransitionBox()...

Enter fullscreen mode Exit fullscreen mode

GestureDetector.onVerticalDragUpdate öğesine bağımsız değişken olarak iletilen callback, parmağınızı ekranda yukarı veya aşağı sürüklerken tekrar tekrar çağrılır ve DragUpdateDetails sınıfının örneği olan bir argüman olarak sürükleme hakkında bilgi iletir.

void _handleDragEnd(DragUpdateDetails d, BuildContext context) {
    double screenHeight =
        MediaQuery.of(context).size.height; //MediaQuery'ile ekran yüksekliği elde edilir.

    double dragEnd = d.globalPosition.dy; //globalPosition.dy, onVerticalDragUpdate çağrıldığında işaretçinin(pointer) bulunduğu ekranın y eksenindeki konumdur.

    double percentage =
        (dragEnd / screenHeight) * 100.0; //Konumu 0 ile 100 arasında bir sayıya dönüştürmek için önceki iki sayıyı kullanır (ekran yüksekliğinin %100'ünü temsil eder)

    int scaleToTimesOfDay =
        (percentage ~/ 12).toInt(); //Günün saatini seçmek için 0 tabanlı bir listeyle çalıştığımız için bu sayıyı 0-7 ölçeğine dönüştürür ve sekiz seçenek vardır
    if (scaleToTimesOfDay > 7) scaleToTimesOfDay = 7;

    _handleStateChange(scaleToTimesOfDay);
}
Enter fullscreen mode Exit fullscreen mode

Resource: Flutter in Action chapter 5 ✨

Top comments (0)