Kapat
Anasayfa 50 0

Flutter’da Web Ve Masaüstü Desteği

Merhabalar bu gün sizlere flutter’da mobile’ın yanında hem web hem de masaüstü uygulama nasıl geliştirmeye başlayacağınızı anlatmaya çalışacağım. Bu mümkün hem de aynı kod tabanı ile sadece bunlar için bir kaç komut yazacağız o kadar.

Flutter’da Nasıl Web Uygulaması Geliştirilir?

Bunu yapmak için vsCode’da terminal kısmına birkaç komut yazmamız yeterli olacaktır.

  1. flutter channel beta
  2. flutter upgrade
  3. flutter config –enable-web
  4. flutter doctor

Bu komutları sırası ile terminal kısmına yazıyoruz. Projemize Web isimli bir dosya gelecektir. Herhangi bir sıkıntılı durum yoksa yeni bir proje başlatmak daha sağlıklı olacaktır. En sonunda proje dosyalarımız aşağıdaki şekilde olacaktır.

Flutter’da web uygulaması geliştirmek için ekstra bir şey yapmaya gerek yok. Gene aynı şekilde mobile uygulama geliştirdiğimiz de yaptığımız gibi kod yazmamız yeterli olacak. Aynı görünümü elde edebilirsiniz.

Flutter’da Nasıl Desktop Uygulaması Geliştirilir?

Flutter’da desktop uygulaması geliştirmek için gene aynı şekilde vsCode’da terminal kısmına birkaç komut yazacağız.

flutter config --enable-<platform>-desktop
 flutter config --enable-windows-desktop
$ flutter config --enable-macos-desktop
$ flutter config --enable-linux-desktop

Ve flutter devices komutunu çalıştırıyoruz. Ardından terminal kısmında aşağıdaki gibi bir görüntü gelecek.

 flutter devices
1 connected device:

Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18362.1082]
macOS (desktop)   • macos   • darwin-x64  • macOS 11.2 20D64 darwin-x64
Linux (desktop)   • linux   • linux-x64   • Linux

Ardından flutter doctor’u çalıştıracağız.

Windows’da aşağıdaki gibi bir görüntü oluşacak.

 flutter doctor                                                                     
Doctor summary (to see all details, run flutter doctor -v):                                           
[√] Flutter (Channel beta, 1.27.0-1.0.pre, on Microsoft Windows [Version 10.0.19042.782], locale en-AU)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)                      
[√] Chrome - develop for the web                                                                      
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.7)                         
[√] Android Studio (version 4.1.0)                                                                    
[√] VS Code (version 1.51.1)                                                                          
[√] Connected device (3 available)    

MacOS’ da aşağıdaki gibi bir görüntü oluşacak.

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.27.0-1.0.pre, on macOS 11.2.1 20D74 darwin-x64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.53.2)
[✓] Connected device (3 available)

Linux’da aşağıdaki gibi bir görüntü oluşacak.

flutter doctor 
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.27.0-1.0.pre, on Linux, locale en_AU.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio
[✓] Connected device (2 available)

Tüm işlemler bittikten sonra proje dosyalarımız aşağıda ki gibi olacaktır.

Bu konular hakkında daha fazla ve daha geniş içeriğe ve anlatıma erişmek için web için ve desktop için tıklayabilirsiniz.

Flutter’da gördüğünüz gibi 3 platform da aynı anda uygulama geliştirebilirsiniz. Tek bir kod tabanı ile. Sizde flutter’ı daha ve kolay öğrenmek için Flutter Türkiye sitesine bakabilirsiniz.

Haydi İyi Günler…

[Toplam: 0   Ortalama: 0/5]
Avatar

Berat Emre Demir {Berat Emre Demir}