getx

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']);
tnrdll

Flutter GetX – Routing

GetX ile yapabileceğiniz birkaç yönlendirme yöntemi:

Get.to() metodu: Bu yöntem, bir sayfadan diğerine geçmek için kullanılır.

Get.to(SecondPage());

Get.off() metodu: Bu yöntem, bir sayfadan diğerine geçerken, bir önceki sayfayı yığın bellekten çıkarır. (Splash Screen, Login vb. kullanım için)

Get.off(SecondPage());

Get.offAll() metodu: Bu yöntem, tüm sayfaları yığın bellekten çıkararak, ana sayfaya dönmek için kullanılır.

Get.offAll(HomePage());

Get.back() metodu: Normalde Navigator.pop(context) ile kapatacağınız Snackbar, Dialog, alt sayfa veya herhangi bir şeyi kapatmak, yani yığının en üstündekini atmak için kullanılır.

Get.back();
tnrdll

Flutter GetX – Routing – Get.to

GetX, Flutter için geliştirilmiş bir pakettir ve birçok farklı özelliği içerir. Routing özelliği de bunlardan biridir ve uygulamanızın farklı sayfalarına geçiş yapmanızı kolaylaştırır.

Routing özelliğini kullanmak için öncelikle GetX paketini projenize eklemeniz gerekiyor. Bunun için pubspec.yaml dosyasına aşağıdaki satırı ekleyin:

dependencies:
  get: ^4.3.8

Daha sonra, uygulamanızda kullanacağınız her sayfa için bir controller oluşturun. Controller, sayfanızın veri akışını yönetir ve sayfaya özgü işlevleri ve değişkenleri tutar.

//home_controller.dart

import 'package:get/get.dart';

class HomeController extends GetxController {
  // controller kodları buraya yazılacak
}

Her bir sayfada, controller’ı çağırmak ve sayfayı yönetmek için bir Widget oluşturmanız gerekiyor. 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:myapp/controllers/home_controller.dart';

class HomePage extends StatelessWidget {
  final HomeController _controller = Get.put(HomeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: Text('Welcome to the home page!'),
      ),
    );
  }
}

Bir sayfadan diğerine geçmek için, Get.to yöntemini kullanabilirsiniz. 

Get.to(() => OtherPage());

Get.to yöntemi, aynı zamanda argümanları da alabilir. Bu argümanlar, hedef sayfaya veri geçmek için kullanılabilir.

Get.to(() => OtherPage(), arguments: {'name': 'John'});

Hedef sayfada bu verilere erişmek için, Get.arguments özelliğini kullanabilirsiniz.

class OtherPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = Get.arguments;
    return Scaffold(
      appBar: AppBar(title: Text('Other')),
      body: Center(
        child: Text('Hello, ${args['name']}!'),
      ),
    );
  }
}