Flutter’da Ekranlar Arası Veri Aktarımı

FLUTTER 0 Yorum

Bu yazımda, Flutter’da yeni bir ekrana nasıl veri gönderebileceğinizi bir örnek üzerinden göstereceğim.

Örnek proje, sıralı listeden oluşup üzerine tıklanıldığında detayları farklı bir ekranda gösterilecek bir tasarımda gerçekleştirilecektir.

#Adım 1: Birinci ekranda liste oluşturma ve veri gönderme

Projemize bir öğe listesi oluşturarak başlayacağız. Flutterda otomatik olarak örnek bir liste oluşturmak için aşağıdaki kodu kullanacağız.

final myList = List.generate(10, (index) => 'Item $index');

Bu kod, 0’dan 9’a kadar toplam 10 liste elemanı üretecektir.

Bu aşamadan sonra, elemanlarımızı sıralamak için ListView widgetini kullanmamız gerekmektedir.

body: Center(
    child: ListView.builder(
      itemCount: myList.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(list[index]),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailPage(
                  item: myList[index],
                ),
              ),
            );
          },
        );
      },
    ),
),

ListView.builder widgetı’nın iki özelliği;

  • ItemCount: Bu listedeki toplam eleman sayısını belirtir.
  • itemBuilder: Bu fonksiyon belirtilen eleman sayısı kadar return ettiğiniz widgetı döndürür.

itemBuilder’ın içinde seçilen elemanı gösteren bir ListTile return ediyoruz.

Son olarak, seçilen elemana tıklanabilirlik özelliği vermek için onTap işlevini ekliyoruz ve diğer ekrana gitmek için Navigator işlevini kullanmalıyız. DetailPage yapıcısına item: list[index] atadık. Bu kısım DetailPage ekranına gönderilecek ve item değişkeni olarak alınacaktır.

Liste[index], ilk ekranda tanımladığımız elemanların listesini ifade etmektedir.

#Adım 2: İkinci ekranda verilerin alınması

Şimdi DetailPage ekranına veri gönderiyoruz,

Gelen verileri kullanabilmek için ilk olarak DetailPage ekranında değişkenimizi oluşturup daha sonra DetailPage ekranının yapıcısına(constructor)  item nesnesini bildiriyoruz.

final String item;

DetailPage({Key? key, required this.item}) : super(key: key);

Şimdi gelen veriyi göstermek için bir text widgetı oluşturuyoruz ve kullanıcı hangi elemana tıklarsa DetailPage ekranında o elemanı görecektir.

Kod:

class DetailPage extends StatelessWidget {
  final String item;

  DetailPage({Key? key, required this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        children: [
          Text(
            'Selected element: $item',
            style: TextStyle(fontSize: 25),
          ),
          ... 
          ...
          ...

Flutter’da ekranlar arası veri aktarımı işlemi bu kadar basit.

Yorum Yap