3- Flutter | Widgets

Widgetler, Flutter’da kullanıcı arayüzünü oluşturmak için temel yapı taşlarıdır. Flutter’da iki tür widget vardır: Stateless ve Stateful Widget’lar. Bu yazıda, bu widget türlerini ve bazı yaygın widgetleri keşfedeceğiz.

Stateless vs. Stateful Widget’lar

Flutter’da, Stateless Widget’lar durumu değiştiremez ve widget’in yapılandırması değişmez. Bu tür widget’lar genellikle statik içerikleri görüntülemek için kullanılır. Örneğin, bir metin veya resim görüntülemek için bir Stateless Widget kullanabilirsiniz.

İşte basit bir Stateless Widget örneği:

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Merhaba, Dünya!');
  }
}

Öte yandan, Stateful Widget’lar durumu değiştirebilir ve widget’in yapılandırması güncellenebilir. Bu tür widget’lar genellikle kullanıcı etkileşimine yanıt olarak değişen içerikleri görüntülemek için kullanılır. Örneğin, bir sayaç uygulaması yapmak için bir Stateful Widget kullanabilirsiniz.

İşte basit bir Stateful Widget örneği:

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Sayaç: $_counter'),
        RaisedButton(
          onPressed: _incrementCounter,
          child: Text('Artır'),
        ),
      ],
    );
  }
}

Container Widget’ı

Container, diğer widget’ları düzenlemek, şekillendirmek ve süslemek için kullanılan bir widget’tır. Boyut, kenar boşlukları, arka plan rengi gibi özelliklerin ayarlanmasını sağlar.

İşte bir Container Widget örneği:

import 'package:flutter/material.dart';

class MyContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      color: Colors.blue,
      child: Text('Container Widget', style: TextStyle(color: Colors.white)),
    );
  }
}

Row ve Column Widget’ları

Row ve Column Widget’ları, yatay ve dikey düzenlemeler için kullanılır. Row, içerdikleri widget’ları yatay olarak sıralar, Column ise dikey olarak sıralar.

İşte bir Row ve Column Widget örneği:

import 'package:flutter/material.dart';

class MyRowColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Icon(Icons.person),
        SizedBox(width: 10),
        Text('John Doe'),
      ],
    );

    // veya

    return Column(
      children: <Widget>[
        Text('Başlık'),
        SizedBox(height: 10),
        Text('İçerik'),
      ],
    );
  }
}

ListView Widget’ı

ListView, kaydırılabilir bir liste oluşturmak için kullanılır. Elemanları dinamik olarak eklemek veya çıkarmak mümkündür.

İşte bir ListView Widget örneği:

import 'package:flutter/material.dart';

class MyListViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.camera),
          title: Text('Kamera'),
        ),
        ListTile(
          leading: Icon(Icons.photo),
          title: Text('Fotoğraf'),
        ),
        ListTile(
          leading: Icon(Icons.video_library),
          title: Text('Video'),
        ),
      ],
    );
  }
}

GridView Widget’ı

GridView, sütun ve satırlar halinde düzenlenen bir ızgara görünümü oluşturmak için kullanılır. Elemanları düzenlemek için satır ve sütun sayıları belirlenebilir.

İşte bir GridView Widget örneği:

import 'package:flutter/material.dart';

class MyGridViewWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: <Widget>[
        Container(color: Colors.red),
        Container(color: Colors.blue),
        Container(color: Colors.green),
        Container(color: Colors.yellow),
      ],
    );
  }
}

Image Widget’ı

Image, bir resmi görüntülemek için kullanılan bir widget’tır. Farklı kaynaklardan (yerel dosya, ağ URL’si, bellek vb.) resimleri yüklemek mümkündür.

İşte bir Image Widget örneği:

import 'package:flutter/material.dart';

class MyImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network('https://example.com/image.jpg');
  }
}

Bu yazıda, Flutter’daki bazı temel widget’ları ve onların nasıl kullanılabileceğini inceledik. Stateless ve Stateful Widget’lar arasındaki farkı, Container, Row, Column, ListView, GridView ve Image widget’larını örneklerle gösterdik. Bu widget’lar, Flutter uygulamalarınızı oluştururken size büyük bir esneklik sunar. Kendi projelerinizde bu widget’ları kullanarak kullanıcı dostu ve etkileyici arayüzler oluşturabilirsiniz.

Kaynaklar

• Flutter Resmi Dokümantasyonu
• Flutter Widget Kataloğu