Flutter Conditional Importing

 Merhaba Sevgili Okurlar,

Bu yazımızda Flutter'da web ve mobil için uygulama geliştirirken kullandığımız kütüphanelere bağlı olarak ortaya çıkan derlenme sorununa çözüm bulacağız.

Flutter Web, dart.io kütüphanesini desteklemiyor fakat mobil uygulama için bu kütüphaneyi kullanmanız gerekiyorsa uygulamanız derlenemez hale geliyor. Peki bu durumu nasıl çözebiliriz ? Akıllara aynı projeyi mobil ve web için kopyalayıp derleme yapabilirim fikri gelebilir fakat birbirinin aynı iki soruce code'nuz olacak. Bakımı, geliştirmesi zahmetli olacaktır. Diğer bir yöntem factory pattern'nin kullanıp kIsWeb global boolean değişkenin değerininden yararlanmak olacaktır. Fakat kIsWeb yine de tavsiye edilmeyen bir yöntem. Dolayısı ile en sağlıklı yöntem şartlı kütüphane import'u yapmak olacaktır.

Birlikte bu sorunu çözmek için basit bir uygulama oluşturalım:

İlk olarak foo adında bir abstract class oluşturalım ve factory pattern'ini kullanalım. Factory pattern bize runtime'da doğru importu şarta bağlı olarak yapmamızı sağlayacaktır. Eğer html ise foo_web.dart dosyasını, eğer io ise foo.dart dosyasını uygulamaya import edecektir böylece platforma bağlı olarak dosya import edildiğinden derleme esnasında bir sorun çıkmayacaktır.

import 'foo_locator.dart'

    if (dart.library.html) 'foo_web.dart'

    if (dart.library.io) 'foo_io.dart';

abstract class Foo {

  void doStuff();

  factory Foo() => getFoo();

}

Şimdi foo_web ve foo_io dosyalarında foo'yu override edelim.

class FooIo implements Foo {

  void doStuff() {

    log("hello from io!");

  }

}

Foo getFoo() => FooIo();

class FooWeb implements Foo {

  void doStuff() {

    log("hello from web!");

  }

}

Foo getFoo() => FooWeb();

foo_locator dosyası oluşturup implemente edilmeyen durumlar için global funciton foo'yu override edelim.

Foo getFoo() => throw UnsupportedError('Cannot create an abstract Foo!');

main.dart dosyamızda foo'yu denemek için implementasyon yapalım.

void main() {

  runApp(const MainApp());

  Foo foo = Foo();

  foo.doStuff();

}

VS Code kullananlar için platformu Chorme (Web+javascript olarak seçelim)

Debug Console baktığımızda "hello form web" yazdığını göreceksiniz bu sadece web importlarının yapıldığı anlamına gelmektedir.

Blog'da anlattığım uygulamanın GitHub linkini burada bulabilirsiniz.

Kaynaklar:

https://medium.com/flutter-community/conditional-imports-across-flutter-and-web-4b88885a886e
https://blog.gskinner.com/archives/2020/03/flutter-conditional-compilation-for-web.html
https://chtgupta.medium.com/stop-using-kisweb-the-right-way-to-implement-multi-platform-code-in-your-flutter-project-edcd67970aa3

Sağlıkla kalın.