Flutter dersleri #3 Yeni bir ekrana gidin ve geri dönün

Rumexus

Kıdemli Üye
26 Ocak 2016
2,157
322
hdoWmv.gif


Yeni bir ekrana gidin ve geri dönün

Çoğu uygulama, farklı türde bilgileri görüntülemek için bir kaç ekran içerir. Örneğin; bir uygulamanın ürünleri görüntüleyen bir ekran olabilir. Kullanıcı bir ürünün resmine dokunduğunda, yeni bir ekran ürünle ilgili ayrıntıları görüntüler.

Önemli: Android'de rota, bir etkinliğe eşittir. İos'ta ise rota ViewController'a eşittir. Flutter'da bir rota sadece bir widgettir.

6OfL8I.gif


İki rota oluştur

6OfL8I.gif


İlk olarak, çalışmak için kendinize iki yol yaratın. Bu temel bir örnek olduğundan, her rota yalnızca tek bir düğme içerir. İlk rotadaki düğmeye dokunmak ikinci rotaya gider. İkinci rotadaki düğmeye dokunmak ilk yola geri döner. İlk olarak, görsel yapıyı ayarlayın:

Kod:
 class IlkRota extends StatelessWidget {
   [USER=931120]Override[/USER]/n  Widget build(BuildContext
context) {
     return Scaffold(
        appBar: AppBar(
            title: Test('İlk Rota'),
           ),
           body: Center(
             child: RaisedButton(
               child: Test('Rotayı aç'),
               onPressed: () {
                  // Navigate ti second route when tapped. 
                },
             ),
         ),
     );
  }
}
  class IkinciRota extends StatelessWidget {
  [USER=931120]Override[/USER]
   Widget build( BuildContext context) {
     return Scaffold (
       appBar: AppBar(
          title: Text('İkinci Rota'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
             // Dokunduğunda ilk rotaya geri dön. 
         },
         child: Text('Geri Dön!'),
       ),
     ),
   );
  }
 }

6OfL8I.gif


Navigator.push () işlevini kullanarak ikinci rotaya gidin

6OfL8I.gif


Yeni bir rotaya geçmek için Navigator.push () yöntemini kullanın. Push () yöntemi, gezgin tarafından yönetilen rota yığınına bir rota ekler. Güzergah nereden geliyor? Kendiniz oluşturabilirsiniz veya platforma özgü bir animasyon kullanarak yeni rotaya geçtiği için yararlı bir MaterialPageRoute kullanabilirsiniz. FirsRoute widget'ının build () yönteminde, onPressed () geri aramasını güncelleyin:

Kod:
//'Ilk Rota' widget'ında
  onPressed: () {
    Navigator.push(
      context,
       MaterialPageRoute (builder: (context) =>
IkinciRota()),
   );
  }

6OfL8I.gif


Navigator.pop () öğesini kullanarak ilk rotaya dönün

6OfL8I.gif


İkinci rotayı nasıl kapatır ve ilk rotaya nasıl dönersiniz? Navigator.pop () yöntemini kullanarak. Pop () yöntemi, geçerli rotayı, gezgin tarafından yönetilen rota yığınından kaldırır. Orjinal rotaya bir dönüş uygulamak için IkinciRota widget'ında onPressed () geri çağrısını güncelleyin:
Kod:
//IkinciRota widget'ında
   onPressed: () {
     Navigator.pop(context);
   }

6OfL8I.gif


3. Dersimizde bu şekilde bitirdik umarım düzgün bir şekilde anlatıp bir şeyler öğretebilmişimdir. İyi forumlar.

6OfL8I.gif
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.