Flutter ile Hello World Uygulaması

Bu yazımızda Flutter ile Hello World uygulamasını kodlayıp temel noktalarıyla Flutter’da işler nasıl yürüyor onları göstermeye çalışacağız.

Flutter ile Hello World Yazalım

VS Code (Visual Studio Code) üzerinden Flutter uygulamasını açmak için iki yolumuz bulunmakta; ilki Viev (Görünüm) sekmesindeki Command Palette (Komut Paleti) bölümüne tıklamak ikincisi de bunun kısayolu olan CTRL + shift + p tuşlarına basmak.

Ardından da uygulamamızı hello_world adını verip kaydetmek istediğimiz klasörü belirtip kodlamaya başlayabiliriz.

İlk olarak varsayılan olarak gelen uygulamadaki kodları silelim. Flutter projeleri temel olarak material design’dan widget adı verilen yapıların oluşturulmasını sağlar. Bunu da yapabilmek için import işlemi yapmamız gerekecek; import ‘package:flutter/material.dart’;

Flutter, Dart programlama dilini kullandığı için olmazsa olmaz olan main fonksiyonunu yazmamız gerekecek; void main() {}.

Main fonksiyonu genel olarak birebir aynı işlevi gören ve fat arrow olarak adlandırılan haliyle de yazılabilir; void main() =>

Ardından da uygulamayı çalıştırmamız için gerekli olan runnApp metodunu (Class içerisindeki fonksiyonlar metot olarak adlandırılır) ekliyoruz:

import 'package:flutter/material.dart';

void main() => runApp ();

Daha sonrasında runApp metodu içerisinde MaterialApp olarak bilinen kapsayıcı bir widget (bileşen) kullanacağız. MaterialApp içerisinde adlandırılmış opsiyonel parametreler içeren ve tüm widgetların dönüşünü verebilen temel widget’lardan birisidir. Yani MaterialApp ile Flutter SDK tarafından sağlanan diğer tüm widget’lara erişilebilir.

Şimdilik MateriaApp içerisinde bulunan widgetlardan (bileşen) biri yerine property’lerden (özellik) biri olan home property’si ile yazalım. Ardından da home property’si içerisinde yer alan Text widget’ını kullanalım ve içerisine Hello World! yazalım:

import 'package:flutter/material.dart';

void main() => runApp (
  MaterialApp (home: Text ("Hello World!"),),
);

Programı daha düzgün bir şekilde ifade etmek için kod yazdığımız alana fareyle sağ tıklayıp Format Document sekmesine tıklayabiliriz. Ya da kısayol olarak Shift + Alt + F tuşları benzer işlemi yapacaktır:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Text("Hello World!"),
      ),
    );

Artık kodumuzu çalıştırabiliriz. Bunu yapmak için önce emilatörü seçiyoruz ardından F5 kısayolundan faydalanabileceğimiz gibi Run sekmesinde yer alan Start Debugging‘e tıklıyoruz.

Fark edeceğiniz üzere oldukça çirkin bir Hello World! uygulaması oldu. Uygulamamızı biraz daha düzgün bir hale getirmek için widget’lardan yararlanacağız.

Flutter’da genel olarak iki farklı widget türü bulunmaktadır:

• Stateless Widget
• Stateful Widget

1 satır boşluk bırakıp kodumuza geri dönelim. İlk olarak sttles yazıp tab tuşuna basıyoruz ve bize VS Code otomatik olarak widget’ımızı oluşturuyor ve bizden widget’ımız için bir ad girmemizi istiyor.

Oluşturacağımız widget aynı zaman da bir sınıf yapısı (class) olduğu için büyük harfle başlamamız daha doğru olacaktır. Bu bilgi ışığında sınıfımızın adını HelloWorld olarak yazıyoruz.

Şimdi ortaya çıkan StatlessWidget yapımıza göz atalım:

class HelloWorld extends StatelessWidget {
  const HelloWorld({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}   

HelloWorld adlı kendi adını verdiğimiz widget’ımız StatelessWidget adlı widget’tan extends ile miras alma işlemini gerçekleştirmektedir. Miras alınan yapıda değişiklik yapabilmek içinse @override özelliğinden yararlanılmıştır. Override yapacağımız yapı ise widget tipindeki build fonksiyonudur. Onun da içerisinde context yapısı BuildContext tipinde oluşturulmuştur. Ayrıca return yapısıyla da oluşturacağımız widgetlar döndürelecektir.

Özetle, StatelessWidget olarak HelloWorld adında kendi yazdığımız bir widget oluşturduk.

MaterialApp widgetımızın içerisinde yer alan home property’si içerisine kendi oluşturduğumuz HelloWorld () adlı widget’ı yazalım:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: HelloWorld(),
      ),
    );

class HelloWorld extends StatelessWidget {
  const HelloWorld({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}   

Aradaki farkı görebilmek adına öncesi sonrası resimlerini de ekledim:

Sıra geldi return içerisinde yer alan Container widget’ını silip Text widgetını yazmaya:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: HelloWorld(),
      ),
    );

class HelloWorld extends StatelessWidget {
  const HelloWorld({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text("Hello World!");
  }
}   

Ardından da uygulamamızı çalıştırabilmek adına Restart sekmesine ya da kısaltması olan CTRL + Shift + F5 tuşlarına basıyoruz.

Fark edeceğiniz üzere aslında simülatör (telefon) üzerinde bir değişiklik olmadı ve görüntümüz hala çok çirkin. StatelessWidget’ımızı oluşturabildiğimiz için nihayet Scaffold widget’ımızı kullanabilecek ve varsayılan olarak gelen özellikleri sayesinde daha güzel bir tasarımı oluşturabileceğiz.

Bunu yapabilmek için ilk olarak return’de bulunan Text widget’ını silip Scaffold widgetını yazıyoruz. Scaffold widget’ı da kendi içerisinde çeşitli property’ler barındırmaktadır. İlk olarak uygulamamızın başlığını yazabilmek adına appBarr property’sinde yer alan AppBar widget’ını kullanacağız.

AppBar widget’ı da kendi içinde çeşitli property’ler barındırmaktadır. Bunlardan ilk olarak title property’sini kullanacağız.

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: HelloWorld(),
      ),
    );

class HelloWorld extends StatelessWidget {
  const HelloWorld({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar (
        title: Text ("Hello World"),
      ),
    );
  }
}   

Scaffold widget’ında yer alan varsayılan özelliklerle uygulamamız son derece güzel bir görünüme kavuştu:

Programımıza adını verdikten sonra sıra geldi body property’sini kullanmaya. Tabi bunu da appBarr property’sinden sonra yazacağız. Benzer şekilde body property’si içerisinde yer alan Text widget’ından yararlanıp içine Hello World! yazdıralım:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: HelloWorld(),
      ),
    );

class HelloWorld extends StatelessWidget {
  const HelloWorld({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hello World"),
      ),
      body: Text("Hello World!"),
    );
  }
}

Kodumuzu daha da geliştirebiliriz, ancak çok fazla uzun olmaması adına burada son verelim.