Flutter - Hareketlere Giriş

Hareketler , öncelikle bir kullanıcının bir mobil (veya herhangi bir dokunma tabanlı cihaz) uygulamayla etkileşim kurmasının bir yoludur. Hareketler genellikle, mobil cihazın belirli bir kontrolünü etkinleştirmek amacıyla bir kullanıcının herhangi bir fiziksel eylemi / hareketi olarak tanımlanır. Hareketler, oyun uygulamalarında kullanılan daha karmaşık eylemlere mobil cihazın ekranına dokunmak kadar basittir.

Yaygın olarak kullanılan hareketlerden bazıları burada belirtilmiştir -

  • Tap - Cihazın yüzeyine kısa bir süre parmak ucuyla dokunmak ve ardından parmak ucunu bırakmak.

  • Double Tap - Kısa sürede iki kez dokunun.

  • Drag - Cihazın yüzeyine parmak ucuyla dokunmak ve ardından parmak ucunu sabit bir şekilde hareket ettirmek ve ardından parmak ucunu serbest bırakmak.

  • Flick - Sürüklemeye benzer, ancak daha hızlı bir şekilde yapmak.

  • Pinch - Cihazın yüzeyini iki parmağınızla sıkıştırın.

  • Spread/Zoom - Sıkışmanın tam tersi.

  • Panning - Cihazın yüzeyine parmak ucuyla dokunmak ve parmak ucunu bırakmadan herhangi bir yönde hareket ettirmek.

Flutter, özel pencere öğesi aracılığıyla her tür hareket için mükemmel bir destek sağlar, GestureDetector. GestureDetector, öncelikle kullanıcının hareketini algılamak için kullanılan görsel olmayan bir widgettır. Bir pencere aracında hedeflenen bir hareketi tanımlamak için, pencere öğesi GestureDetector widget'ının içine yerleştirilebilir. GestureDetector, hareketi yakalayacak ve harekete göre birden çok olay gönderecektir.

Hareketlerden bazıları ve ilgili olaylar aşağıda verilmiştir -

  • Tap
    • onTapDown
    • onTapUp
    • onTap
    • onTapCancel
  • Çift dokunun
    • onDoubleTap
  • Uzun basma
    • onLongPress
  • Dikey sürükleme
    • onVerticalDragStart
    • onVerticalDragUpdate
    • onVerticalDragEnd
  • Yatay sürükleme
    • onHorizontalDragStart
    • onHorizontalDragUpdate
    • onHorizontalDragEnd
  • Pan
    • onPanStart
    • onPanUpdate
    • onPanEnd

Şimdi merhaba dünya uygulamasını hareket algılama özelliğini içerecek şekilde değiştirelim ve konsepti anlamaya çalışalım.

  • MyHomePage widget'ının gövde içeriğini aşağıda gösterildiği gibi değiştirin -

body: Center( 
   child: GestureDetector( 
      onTap: () { 
         _showDialog(context); 
      }, 
      child: Text( 'Hello World', ) 
   ) 
),
  • Burada, GestureDetector widget'ını widget hiyerarşisindeki Metin widget'ının üstüne yerleştirdiğimizi , onTap olayını yakaladığımızı ve ardından son olarak bir iletişim penceresi gösterdiğimizi gözlemleyin.

  • Kullanıcı merhaba dünya mesajına sekme eklediğinde bir iletişim kutusu sunmak için * _showDialog * işlevini uygulayın . Yeni bir iletişim kutusu widget'ı oluşturmak için genel showDialog ve AlertDialog widget'ını kullanır . Kod aşağıda gösterilmiştir -

// user defined function void _showDialog(BuildContext context) { 
   // flutter defined function 
   showDialog( 
      context: context, builder: (BuildContext context) { 
         // return object of type Dialog
         return AlertDialog( 
            title: new Text("Message"), 
            content: new Text("Hello World"),   
            actions: <Widget>[ 
               new FlatButton( 
                  child: new Text("Close"),  
                  onPressed: () {   
                     Navigator.of(context).pop();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}
  • Uygulama, Hızlı Yeniden Yükleme özelliğini kullanarak cihaza yeniden yüklenecektir. Şimdi, Hello World mesajını tıklamanız yeterlidir ve aşağıdaki iletişim kutusunu gösterecektir -

  • Şimdi, iletişim kutusundaki kapat seçeneğine tıklayarak iletişim kutusunu kapatın .

  • Tam kod (main.dart) aşağıdaki gibidir -

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
   // This widget is the root of your application.    
   @override 
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application', 
         theme: ThemeData( primarySwatch: Colors.blue,), 
         home: MyHomePage(title: 'Home page'), 
      ); 
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   
   // user defined function 
   void _showDialog(BuildContext context) { 
      // flutter defined function showDialog( 
         context: context, builder: (BuildContext context) { 
            // return object of type Dialog return AlertDialog(
               title: new Text("Message"), 
               content: new Text("Hello World"),   
               actions: <Widget>[
                  new FlatButton(
                     child: new Text("Close"), 
                     onPressed: () {   
                        Navigator.of(context).pop();  
                     }, 
                  ), 
               ],
            );
         },
      );
   }
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center(
            child: GestureDetector( 
               onTap: () {
                  _showDialog(context);
               },
            child: Text( 'Hello World', )
            )
         ),
      );
   }
}

Son olarak, Flutter ayrıca Dinleyici widget'ı aracılığıyla düşük seviyeli bir hareket algılama mekanizması sağlar . Tüm kullanıcı etkileşimlerini algılar ve ardından aşağıdaki olayları gönderir -

  • PointerDownEvent
  • PointerMoveEvent
  • PointerUpEvent
  • PointerCancelEvent

Flutter ayrıca, özel ve gelişmiş hareketler yapmak için küçük bir widget seti sağlar. Widget'lar aşağıda listelenmiştir -

  • Dismissible - Widget'ı kapatmak için fiske hareketini destekler.

  • Draggable - Widget'ı taşımak için sürükleme hareketini destekler.

  • LongPressDraggable - Üst widget'ı da sürüklenebilir olduğunda bir widget'ı taşımak için sürükleme hareketini destekler.

  • DragTarget- Herhangi bir Sürüklenebilir widget'ı kabul eder

  • IgnorePointer - Widget'ı ve alt öğelerini hareket algılama işleminden gizler.

  • AbsorbPointer - Hareket algılama işleminin kendisini durdurur ve böylece örtüşen herhangi bir pencere öğesi de hareket algılama işlemine katılamaz ve dolayısıyla hiçbir olay ortaya çıkmaz.

  • Scrollable - Widget içinde bulunan içeriğin kaydırılmasını destekleyin.