Flutter Uygulama Nasıl Tasarlanır?

Flutter ile ilgili konulara bir önceki konumuzda genel olarak değinmiştik. Bu linkten ulaşabilirsiniz. Flutter nedir ve flutter ile nasıl uygulama geliştirilir?

Flutter Uygulama Nasıl Tasarlanır?​


Genel olarak ele almak istersek flutter hem Android hem de iOS platformlarında aynı anda tasarlanabilir bir uygulama geliştirmenizi sağlar. Ancak geliştiriciler her iki işletim sistemi arasında küçük farklılıklar olması sebebiyle yalnızca bir platform için uygun olanı tasarlamayı öneriyor.

Flutter Mimarisi Nasıl Oluşturulur?​


Kendi uygulamanızı programlamak istiyorsanız , sayısız seçeneğiniz var. Kullanıma hazır uygulama bileşenlerine sahip yapı kitleri, kullanım kolaylıkları nedeniyle çok popülerdir, ancak çerçeveler , geliştirme sürecini kullanıcılar için mümkün olduğunca kolay hale getirerek giderek daha fazla karakterize edilmektedir. En modern temsilcilerinden biri, Google tarafından geliştirilen Yazılım Geliştirme Kiti (SDK) Flutter'dır . Açık kaynak framework, yüksek performanslı mobil uygulamaların (iOS ve Android için) yanı sıra Google Dart dilinde web ve masaüstü uygulamalarının geliştirilmesine olanak tanır .

Flutter eğitiminde, size Google SDK'yı kullanmaya başlamanın en önemli adımlarını gösteriyorum.

Dart Programlama Dili​


Flutter ile programlamayı öğrenmek istiyorsanız, önceden uygulama ve web geliştirme bilgisine sahip olmanız gerekmez. Prensip olarak, daha önce bahsedilen Google dili Dart size tamamen yabancı olabilir. Nesne yönelimli koda ve değişkenler, döngüler ve koşullar gibi temel programlama kavramlarına aşinaysanız, flutter framework ile çalışmak için yeterlidir.

Bu Flutter eğitiminde, kelimeleri rastgele bir düzende birleştiren
ve ardından bu kombinasyonları sunan basit bir uygulama yazarak yazılım geliştirme kitiyle geliştirmeye ilk kez bir göz atmak istiyoruz . Bunun için Flutter ile programlama için temel araçlara ihtiyacınız var: Flutter SDK ve bir editör . İlki Windows, macOS ve Linux için mevcuttur - ilgili kurulum paketini doğrudan resmi Flutter web sitesinden indirebilirsiniz.

TR-google-flutter-dersleri-google-sdk.png

Tercih ettiğiniz işletim sistemi için Flutter paketini seçin, ardından SDK'yı kurmak için kurulum talimatlarını izleyin.

Flutter Programlama Dili​


Kod Editör veya ide söz konusu olduğunda, seçim yapmakta özgürsünüz. Otomatik kod tamamlama , sözdizimi vurgulama ve widget'larda hata ayıklama ve düzenleme desteği ile optimum bir kullanıcı deneyimi için Google, resmi bir Flutter eklentisi olan bir kod düzenleyici kullanmanızı önerir : Bu nedenle dersimizde Android Studio'yu kullanıyoruz . Android uygulama geliştirme için optimize edilmiş bu geliştirme ortamını kurduktan sonra Flutter eklentisini aşağıdaki gibi kurun:

1- "Dosya" menüsü .
2- "Ayarlar"a tıklayın ve ardından "Eklentiler" bölümünü seçin.
3- Flutter eklentisi Dart tabanlı olduğu için arama çubuğuna " Dart " yazın ve " Yükle " düğmesini tıklayın.
4- " Kabul et " ile üçüncü taraf uzantının kullanımını onaylayın .
5- "Flutter" eklentisini yüklemek için aynı işlemi tekrarlayın ve kurulumdan sonra değişiklikleri uygulamak için " IDE'yi Yeniden Başlat " düğmesine tıklayın.

flutter-sdk-kurulum.png

!! Bilgi !! Google, Android Studio'ya alternatif olarak GNU Emacs , Visual Studio Code ve IntelliJ IDEA gibi resmi bir Flutter eklentisi bulunan uygulamalar kullanmanızı önerir.

İlk Flutter Uygulamanızı Oluşturun​


Flutter'ı ve istediğiniz geliştirme ortamını (veya düzenleyicisini) yükledikten sonra, ilk Flutter uygulamanızı oluşturmaya hazırsınız. Daha önce de belirttiğim gibi, bu Flutter eğitiminde Android Studio kullanıyoruz, bu nedenle IDE'yi bu amaç için başlatalım. İlk adımda, "Dosya" menüsünden "Yeni" ve ardından uygulama çerçevesine dayalı yeni bir proje başlatmak için " Yeni Flutter Projesi "ni tıklayın.

new-futter-project.png

İstenilen proje tipi olarak " Flutter Uygulaması "nı seçin ve "İleri" ye tıklayın. Konfigürasyon menüsünde artık uygulamanız için bir çalışma başlığı ve uygulamanızın kaydedileceği konumu tanımlayın. İsteğe bağlı olarak, projenin bir açıklamasını da ekleyebilirsiniz. " Flutter SDK path " satırında, daha önce indirdiğiniz Flutter SDK klasörünün yolunu belirtin.

flutter-uygulama-nasil-tasarlanir.png

Son olarak, yeni Flutter uygulamasını oluşturmak için "Finish"e tıklayın . Bir projenin temel çalışma dosyası olan main.dart dosyasına, uygulamanın basit bir "Merhaba Dünya" mesajı göstermesi için aşağıdaki kodu ekleyin (main.dart dosyasındaki mevcut kodu silebilirsiniz) :

Kod:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Welcome to Flutter',
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Welcome to Flutter'),
                ),
                body: Center(
                    child: Text('Hello World'),
                ),
            ),
        );
      }
}

Yukarıdaki kodu ekler eklemez, kendi uygulamanızın ilk sürümü çalıştırabilirsiniz. Android Studio'da ilgili emulator'ü seçin ("Flutter Device Selection" altında) ve ardından play butonuna tıklayın ("Main.dart'ı çalıştırın"):

run-flutter-project.png

Uygulamanın ilk başlatılması biraz zaman alacaktır, bu nedenle emülatör ekranında karşılama mesajını görmeden önce biraz beklemeniz gerekir.

merhaba-dunya-flutter.png

İlk flutter eğitimimiz bu kadar. Düzenli olarak eğitimleri eklemeye devam edeceğim. Lütfen takıldığınız noktaları sormaktan çekinmeyin. Bir dahaki makalede görüşmek üzere :)
 
Son düzenleme:
  • Like
Tepkiler: Admin