Flutter GestureDetector Widget’ı

Merhaba. Bugün yazımızda GestureDetector Widgetini ele alacağız.

Flutter GestureDetector Nedir?

Öncelikle bu widget ne işe yarar hemen açıklayayım. Flutter GestureDetector , içine aldığı widgetin ( mesela Container ) bulunduğu bölgeye tıklayınca bir eylem yaratmasını sağlar. Bir nevi buton diyebiliriz.

Örnekle açıklayalım. Bu örnekte yazdığım bir uygulamada alt kısımda yer alan 4 tane bölge var sayfalar arası geçiş yapmak için şu şekilde :

(Renkler kötü gözüküyor ama daha o kısma geçmedim )

Şimdi bu gördüğünüz kısımda yer alan 4 iconun her biri Container ve Expanded widgetine bağlıydı. Bu arada iconların rengi aktif olduğu sayfada renk değiştiriyor. Yukarda 2. sayfadayız ve 2. icon aktif renkte.

Gördüğünüz gibi 3. sayfaya geçtiğimizde 3. icon renk aldı..

Her neyse.

child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    IconButton(
                      padding:
                          EdgeInsets.symmetric(vertical: 11, horizontal: 1.0),
                      icon: FaIcon(
                        FontAwesomeIcons.dice,
                        size: 42,
                        color: pagenumber == 2 ? activeicon : inactiveicon,
                      ),
                    ),
                  ],
                ),
                margin: EdgeInsets.only(top: 10),
                padding: EdgeInsets.only(bottom: 20),
                width: 40,
                height: BottomContainerHeight,
                decoration: BoxDecoration(
                  border: Border(right: BorderSide(color: Colors.white)),
                  color: Color(0xFFD3CDC3),
                )),

Yukarda gördüğünüz kod direk olarak Expanded widgetına bağlıydı ve basınca hiçbir şey olmuyor. Ben bunu GestureDetector Widgeti içerisine aldım.

Yeni hali şu şekilde oldu :

    child: GestureDetector(
            onHorizontalDragStart: (DragStartDetails dragStartDetails) {},
            onTap: () {
              Navigator.push(context, SlideRightRoute(page: InputPage()));
            },
            child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    IconButton(
                      padding:
                          EdgeInsets.symmetric(vertical: 11, horizontal: 1.0),
                      icon: FaIcon(
                        FontAwesomeIcons.dice,
                        size: 42,
                        color: pagenumber == 2 ? activeicon : inactiveicon,
                      ),
                    ),
                  ],
                ),
                margin: EdgeInsets.only(top: 10),
                padding: EdgeInsets.only(bottom: 20),
                width: 40,
                height: BottomContainerHeight,
                decoration: BoxDecoration(
                  border: Border(right: BorderSide(color: Colors.white)),
                  color: Color(0xFFD3CDC3),
                )),
          ),

onHorizontalDragStart: (DragStartDetails dragStartDetails) {} —> Bu kısma takılmayın. Sayfalar arası geçiş yaparken sağdan sola mı yoksa soldan sağa mı olduğuyla ilgili yukarıda bir yere fonksiyon yazmıştım. Aklınızı karıştırmasın. Bir sonraki dersimizde bu geçişleri ele alacağız zaten.

onTap: () { Navigator.push(context, SlideRightRoute(page: InputPage())); }, —-> onTap fonksiyonu o bölgeye basınca ne olacağını belirliyor. Ben bu örnekte InputPage ‘e geçiş yapmasını istedim mesela. Bu arada SlideRightRoute kısmınada takılmayın. Sağdan sola animasyon için onu koydum. Siz şöylede kullanabilirsiniz : onTap: () { Navigator.push(context, page: InputPage()); }

Flutter GestureDetector ile ilgili bir başka örnekte şu şekilde :

Container(
  alignment: FractionalOffset.center,
  color: Colors.white,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Icon(
          Icons.lightbulb_outline,
          color: _lights ? Colors.yellow.shade600 : Colors.black,
          size: 60,
        ),
      ),
      GestureDetector(
        onTap: () {
          setState(() {
            _lights = true;
          });
        },
        child: Container(
          color: Colors.yellow.shade600,
          padding: const EdgeInsets.all(8),
          child: const Text('IŞIKLARI YAK'),
        ),
      ),
    ],
  ),
)

Basit bir ışık yakma örneği. onTap: () { setState(() { _lights = true; });

setState’in içine almamızın nedeni değişikliğin anlık olarak gösterilmesini sağlamak için.