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.