Flutter

tnrdll

Flutter – Image Kullanımı

Flutter’da bir resim görüntülemek için “Image” widget’ını kullanabilirsiniz. Aşağıdaki adımları izleyerek bir resmi Flutter projesinde görüntüleyebilirsiniz:

  • İlk önce, resim dosyasını projenize ekleyin. Bunun için, projenizin “assets” dizini içinde bir “images” dizini oluşturun ve resim dosyasını buraya ekleyin. Örneğin, resim dosyanız “my_image.jpg” ise, projenizin “assets/images/my_image.jpg” olarak kaydedilmesi gerekiyor.
  • Resmi kullanmak için, projenizdeki “pubspec.yaml” dosyasını açın ve resim dosyanızın yolunu “assets” alanına ekleyin. Örneğin:
flutter:

  assets:
    - assets/images/my_image.jpg
  • Resmi görüntülemek için, “Image” widget’ını kullanın ve “asset” parametresine resim dosyasının yolunu verin. Örneğin:
Image.asset('assets/images/my_image.jpg')

Tam bir örnek:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Image App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Image'),
        ),
        body: Center(
          child: Image.asset('assets/images/my_image.jpg'),
        ),
      ),
    );
  }
}

Bu örnek, bir “My Image” başlığı olan bir AppBar ve bir resim gösteren bir merkezi gövde içeren basit bir uygulama oluşturur.

tnrdll

Flutter – Navigation (veri gönderimi)

Flutter’da veri gönderimi, bir ekran veya sayfadan diğerine veri aktarmak için Navigator sınıfının kullanılmasıyla gerçekleştirilir. İşte Flutter’da veri gönderimi için genel bir yol:

  • İlk olarak, veri alıcı sayfanın yapısını oluşturun. Bu sayfada veriyi görüntüleyeceğiniz widget’ları yerleştirin.
  • Veri gönderen sayfada, kullanıcı etkileşimi veya diğer bir olay tetiklendiğinde veriyi alıcı sayfaya aktarın. Bunun için Navigator sınıfının push veya pushNamed yöntemlerini kullanabilirsiniz. Bu yöntemler, bir sonraki sayfaya geçmek için kullanılır ve birinci parametre olarak geçiş yapılacak sayfanın referansını alırken ikinci parametre olarak göndermek istediğiniz veriyi alır.

Örneğin, veriyi alıcı sayfaya aktarırken push yöntemini kullanabilirsiniz:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => AliciSayfa(veri: gonderilecekVeri),
  ),
);

Burada AliciSayfa veri alıcı sayfayı temsil ederken, veri parametresiyle veriyi aktarıyoruz.

Veri alıcı sayfada, AliciSayfa widget’ının yapısını tanımlayın ve veriyi almak için veri parametresini kullanın. Bu parametre, widget’ın yapıcı yöntemine veya başka bir yerde belirtilmiş olmalıdır.

class AliciSayfa extends StatelessWidget {
  final String veri;

  AliciSayfa({required this.veri});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Alici Sayfa'),
      ),
      body: Center(
        child: Text(veri),
      ),
    );
  }
}

Burada veri parametresi AliciSayfa sınıfının bir özelliği olarak tanımlanır ve build yönteminde kullanılır.

Bu şekilde, bir sayfadan diğerine veri gönderebilir ve alabilirsiniz. Veriyi daha karmaşık veri türlerine veya nesnelere göndermek isterseniz, parametreleri buna göre ayarlamalısınız. Ayrıca, bu örnekte MaterialPageRoute ve push kullanıldı, ancak projenizin navigasyon yöntemlerine göre değişebilir.

tnrdll

Flutter – Navigation

Flutter, geliştiricilere birden çok sayfa veya ekranın kullanıcı arayüzünde gezinmesine olanak tanıyan bir navigasyon stack (yığın) sistemine sahiptir. Bu stack, bir sayfadan diğerine geçiş yapılmasını ve geri dönüşlerde önceki sayfaya geri dönülmesini sağlar.

En yaygın kullanılanlar:

  • Navigator.push(): Bu yöntem, mevcut sayfadan yeni bir sayfaya geçiş yapmak için kullanılır. Örneğin, bir düğmeye tıklandığında yeni bir sayfanın açılmasını istediğinizde kullanabilirsiniz.
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => YeniSayfa()),
);
  • Navigator.pop(): Bu yöntem, mevcut sayfayı kapatıp önceki sayfaya geri dönmek için kullanılır. Örneğin, bir “Geri” düğmesine tıklandığında veya işlem tamamlandığında kullanabilirsiniz.
Navigator.pop(context);
  • Navigator.pushReplacement(): Bu yöntem, mevcut sayfayı başka bir sayfa ile değiştirmek için kullanılır. Yeni sayfa açıldığında, önceki sayfa tamamen kapanır ve yerine yeni sayfa gelir.
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => YeniSayfa()),
);
  • Navigator.pushNamed(): Bu yöntem, adlandırılmış rotaları kullanarak sayfalar arasında geçiş yapmak için kullanılır. Önceden tanımlanan rotalara isim verilir ve bu isimler kullanılarak sayfalar açılır.
Navigator.pushNamed(context, '/yeniSayfa');
  • Navigator.pushNamedAndRemoveUntil(): Bu yöntem, belirli bir rotaya kadar olan tüm sayfaları kapatıp yeni bir sayfayı açmak için kullanılır. Yani, belirli bir sayfaya geçmek istediğinizde, tüm önceki sayfaları kapatıp yeni sayfayı açabilirsiniz.
Navigator.pushNamedAndRemoveUntil(
  context,
  '/yeniSayfa',
  ModalRoute.withName('/anaSayfa'),
);
tnrdll

Flutter – initState

initState fonksiyonu, Flutter’da bir Widget’in durumunu başlatmak için kullanılan özel bir metoddur. initState metodu, bir Widget oluşturulduğunda yalnızca bir kez çağrılır ve Widget’in durumunu başlatmak veya Widget ile ilişkili diğer nesneleri hazırlamak için kullanılır.

initState metodu genellikle Widget’in yapıcı fonksiyonunda yer alır ve Widget’in durumunu başlatmak için kullanılan ilk adımları içerir. Bu yöntemde, Widget’e özgü durum değişkenleri oluşturulabilir, veri kaynaklarına veya hizmetlere erişim sağlanabilir veya bazı başlangıç ​​işlemleri gerçekleştirilebilir.

Örneğin, bir StatefulWidget oluşturduğunuzda, durum değişkenlerinizi initState metodunda başlatabilir ve bunları başlangıç değerleriyle doldurabilirsiniz. Ayrıca, veritabanı bağlantısı veya ağ istekleri gibi asenkron işlemleri başlatmak veya başka Widget’larla etkileşimde bulunmak için de kullanabilirsiniz.

İşte basit bir örnek:

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String message;

  @override
  void initState() {
    super.initState();
    message = 'Hello, World!';
    fetchDataFromServer();
  }

  void fetchDataFromServer() {
    // Asenkron olarak veri almak için bir işlem yapabilirsiniz
    // Örneğin, bir API'ye istek yapabilirsiniz
  }

  @override
  Widget build(BuildContext context) {
    return Text(message);
  }
}

Yukarıdaki örnekte, initState metodunda message adında bir durum değişkeni oluşturulur ve başlangıç değeri “Hello, World!” olarak ayarlanır. Ayrıca, fetchDataFromServer adında başka bir metot da initState içinde çağrılır. Bu metot, asenkron bir işlemi simüle eder ve örneğin bir API’ye istek yapabilir. Ardından, build metodu, durum değişkeni olan message‘ı kullanarak bir Text Widget’ını döndürür.

Bu örnekte, initState metodunun Widget’in durumunu başlatmak ve önceden tanımlanan başlangıç değerleriyle doldurmak için kullanıldığını görebilirsiniz.

tnrdll

Flutter – Dispose

Flutter’da dispose yöntemi, bir Stateful widget veya bir State objesi yaşam döngüsünden kaldırıldığında çağrılan bir metoddur. Dispose metodu, widget’in veya state’in kullanılmadığı durumlarda kaynakları temizlemek ve hafızada sızıntıları önlemek için kullanılır.

dispose yöntemini kullanmak için aşağıdaki adımları izleyebilirsiniz:

  • Bir Stateful widget oluşturun veya bir State sınıfı tanımlayın.
  • State sınıfına dispose yöntemini ekleyin. Bu yöntem aynı sınıfta @override anotasyonuyla birlikte tanımlanmalıdır.
  • dispose yönteminde temizleme işlemlerini gerçekleştirin. Örneğin, animasyonları durdurun, timer’ları iptal edin, dinleyicileri kaldırın veya diğer kaynakları serbest bırakın.
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Timer _timer;

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      // Timer çalıştığında yapılacak işlemler
    });
  }

  @override
  void dispose() {
    _timer.cancel(); // Timer'ı iptal et
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Widget oluşturma işlemleri
  }
}

Yukarıdaki örnekte, _MyWidgetState sınıfı, _timer adında bir Timer nesnesi tanımlar ve initState yönteminde başlatır. dispose yöntemi, Stateful widget yaşam döngüsünden kaldırıldığında _timer‘ı iptal eder ve gereksiz hafıza kullanımını önler.

Unutmayın, Stateful widget veya State objesi kullanılmadığı zamanlarda dispose yöntemi çağrılacaktır. Bu nedenle, kaynakları serbest bırakmak ve hafıza sızıntılarını önlemek için bu yöntemi doğru şekilde kullanmanız önemlidir.

Dispose() yöntemi, genellikle kullanıcı farklı bir ekrana geçtiğinde veya uygulamayı kapattığında, pencere öğesi ağaçtan kalıcı olarak kaldırıldığında, bir pencere öğesinin State nesnesinde çağrılır.

tnrdll

Flutter – kDebugMode

kDebugMode Flutter’ın dart:core kütüphanesindeki bir sabittir. Bu sabit, kodun debug (hata ayıklama) modunda çalışıp çalışmadığını belirlemek için kullanılır.

Flutter uygulamalarını geliştirirken, genellikle iki farklı modda çalışırız: debug modu ve release modu. Debug modunda çalışırken, hata ayıklama araçlarına erişebilir, hataları daha ayrıntılı olarak görebilir ve performans optimizasyonlarından vazgeçebiliriz. Release modunda ise uygulama performansı için optimizasyonlar yapılır ve hata ayıklama araçları devre dışı bırakılır.

kDebugMode sabiti, kodun hangi modda çalıştığını belirlemek için kullanılır. Bu sabit bool türündedir ve debug modunda çalışıyorsa true, release modunda çalışıyorsa false değerini alır.

Örneğin, aşağıdaki kod parçasında kDebugMode sabiti kullanılarak debug modunda çalışırken bazı özel davranışlar sağlanabilir:

if (kDebugMode) {
  // Debug modu özel davranışları burada gerçekleştir
  print('Debug modunda çalışılıyor');
  // Hata ayıklama araçlarına erişim sağla
} else {
  // Release modu özel davranışları burada gerçekleştir
  print('Release modunda çalışılıyor');
  // Performans optimizasyonları yap
}

Bu şekilde, kodun çalıştığı modu belirlemek ve bu modlara özgü davranışlar sağlamak için kDebugMode sabitini kullanabilirsiniz.

tnrdll

Flutter – Navigation (pushNamed)

Flutter’da, uygulamanızdaki farklı sayfalar arasında gezinmek için Navigation kullanabilirsiniz.

İlk olarak, gezinmek istediğiniz sayfaları tanımlamanız gerekiyor. Bunu MaterialApp widget’ının içindeki MaterialApp.routes özelliği ile yapabilirsiniz. Örneğin:

MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/second': (context) => SecondPage(),
  },
)

Yukarıdaki örnekte, ‘/’ yolu ana sayfaya, ‘/second’ yolu ise ikinci sayfaya yönlendirir. Ana sayfada bir düğme olsun ve bu düğme ikinci sayfaya geçiş yapsın.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ana Sayfa'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('İkinci Sayfaya Git'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

Yukarıdaki kodda, ElevatedButton’un onPressed olayı tetiklendiğinde Navigator.pushNamed kullanılarak ‘/second’ yolu üzerinden ikinci sayfaya geçiş yapılır.

İkinci sayfada, bir geri düğmesi ekleyebilirsiniz. Bu düğme Navigator.pop kullanılarak önceki sayfaya döndürülür.

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('İkinci Sayfa'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Geri Dön'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}
tnrdll

Flutter GetX – Dialog

Flutter GetX paketi, kolay ve hızlı bir şekilde dialoglar oluşturmak için kullanabileceğiniz Get.dialog() fonksiyonunu sağlar.

Get.dialog(
              AlertDialog(
                title: Text('Merhaba!'),
                content: Text('Dialog kullanımı öğreniyorum.'),
                actions: [
                  TextButton(
                    onPressed: () => Get.back(),
                    child: Text('Kapat'),
                  ),
                ],
              ),
);

Örneğin, bir butona tıklama işlemi sonrası bir dialog göstermek istediğinizi varsayalım. İşte bu senaryo için bir örnek kod:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dialog Kullanımı'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Get.dialog(
              AlertDialog(
                title: Text('Merhaba!'),
                content: Text('Dialog kullanımı öğreniyorum.'),
                actions: [
                  TextButton(
                    onPressed: () => Get.back(),
                    child: Text('Kapat'),
                  ),
                ],
              ),
            );
          },
          child: Text('Dialog Göster'),
        ),
      ),
    );
  }
}
tnrdll

Flutter GetX – Snackbar

GetX ile snackbar kullanımı oldukça kolaydır. Snackbar, uyarı mesajlarını kullanıcılara göstermek için kullanılan bir araçtır. İşlem sonucunu kullanıcıya bildirmek veya hata mesajı göstermek için kullanılabilir.

GetX ile Snackbar kullanmak için, Get.snackbar() metodunu kullanabilirsiniz.

Get.snackbar(
  'Title',
  'This is a snackbar',
  duration: const Duration(seconds: 3),
);

Yukarıdaki kod bloğunda, GetX ile snackbar’ı kullanarak ‘Title’ başlığı ve ‘This is a snackbar’ mesajını ekledik. Ayrıca, snackbar’ın görüntülenme süresini belirlemek için duration parametresini kullandık.

Snackbar’a bir buton eklemek için, action parametresini kullanabilirsiniz.

 Get.snackbar(
    'Title',
    'This is a snackbar',
    duration: const Duration(seconds: 3),
    snackPosition: SnackPosition.BOTTOM,
    backgroundColor: Colors.black,
    colorText: Colors.white,
    margin: const EdgeInsets.only(bottom: 10, left: 5, right: 5),
    mainButton: TextButton(
        onPressed: () {
             // do something
        },
        child: const Text('Button',
               style: TextStyle(color: Colors.white)),
        ),
);

tnrdll

Flutter GetX – Named routes

Named routes (isimlendirilmiş rotalar), uygulamanızdaki herhangi bir sayfaya erişmek için kullanabileceğiniz bir yoldur.

Rotaları tanımlamak için GetMaterialApp kullanın:

void main() {
  runApp(
    GetMaterialApp(
      unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/second', page: () => Second()),
      ],
    )
  );
}

Şimdi sayfalar arasında geçmek için Get.toNamed() metodunu kullanabilirsiniz.

Get.toNamed('/second');

İsterseniz, named routes’ları parametrelerle de kullanabilirsiniz.

void main() {
  runApp(
    GetMaterialApp(
      unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),
      initialRoute: '/',
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/second', page: () => Second()),
        GetPage(name: '/third/:id', page: () => ThirdPage()),
      ],
    )
  );
}

Bu kodda ‘/third/:id’ rotası, id parametresi ile ThirdPage widget’ına yönlendirme yapar. Bu parametreyi Get.toNamed() metodunda kullanabilirsiniz:

Get.toNamed('/third/123');

id parametresini ThirdPage widget’ı içerisinde karşılamak için:

Get.parameters['id']

İsimlendirilmiş Rotalara Veri Gönderimi

Argümanlar için istediğinizi göndermeniz yeterli. Get, burada bir Map, List ve hatta bir sınıf örneği olan her şeyi kabul eder.

Get.toNamed("/second", arguments: 'Get is the best');
print(Get.arguments);

Dinamik URL Linkleri

Tıpkı Web’deki gibi gelişmiş dinamik url’ler sunun.

Get.offAllNamed("/second?device=phone&id=1&name=Taner");
print(Get.parameters['id']);
// out: 1
print(Get.parameters['name']);
// out: Taner

veya:

var parameters = <String, String>{"flag": "true","country": "turkiye",};
Get.toNamed("/third/1", parameters: parameters);
print(Get.parameters['id']);
print(Get.parameters['flag']);
print(Get.parameters['country']);