Flutter Scaffold Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda Scaffold widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter’da Scaffold Nedir?

Flutter, mobil uygulama geliştirmek için kullanılan açık kaynaklı bir framework’tür. Scaffold, Flutter uygulamalarında en sık kullanılan widget’lerden biridir ve temel bir yapı oluşturmak için kullanılır. Scaffold, bir ana başlık, bir alt başlık ve bir ana gövde bölmesi gibi bileşenler içeren bir çerçeve sağlar.

Scaffold Widget Kullanımı

Scaffold widget’ı kullanmak için önce Scaffold sınıfını içe aktarmalısınız. Ardından Scaffold’ın özelliklerini ayarlamak için aşağıdaki özelliklerden bazılarını kullanabilirsiniz:

• appBar: Bu özellik, uygulamanızın en üstünde bir başlık çubuğu oluşturmanıza olanak tanır.
• body: Bu özellik, uygulamanızın ana içeriğini oluşturmanıza olanak tanır.
• floatingActionButton: Bu özellik, uygulamanızın sağ alt köşesinde yüzen bir düğme oluşturmanıza olanak tanır.
• drawer: Bu özellik, uygulamanızın sol tarafında bir çekmece oluşturmanıza olanak tanır.
• bottomNavigationBar: Bu özellik, uygulamanızın alt kısmında bir gezinme çubuğu oluşturmanıza olanak tanır.

İşte Scaffold widget’ını kullanarak basit bir uygulama örneği:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scaffold Örneği',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Scaffold Örneği'),
        ),
        body: Center(
          child: Text('Merhaba Flutter!'),
        ),
      ),
    );
  }
}

Bu örnekte, Scaffold widget’ı, bir AppBar bileşenini ve bir Center bileşenini içerir. AppBar, uygulamanın üstünde görüntülenen başlık çubuğunu temsil ederken, Center bileşeni uygulamanın ortasında görüntülenen bir metin kutusunu temsil eder.

Scaffold Widget Özellikleri

appBar

AppBar özelliği, uygulamanın en üstünde bir başlık çubuğu oluşturmanızı sağlar. AppBar widget’ını kullanarak başlık, alt başlık, arama kutusu, menü düğmeleri vb. bileşenleri ekleme seçeneğine sahipsiniz.

Scaffold(
  appBar: AppBar(
    title: Text('Başlık'),
    centerTitle: true,
    backgroundColor: Colors.blue,
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {
          // Arama işlemi
        },
      ),
      IconButton(
        icon: Icon(Icons.more_vert),
        onPressed: () {
          // Menü
      },
    ),
  ),
  body: Container(),
);

Yukarıdaki örnekte, AppBar bileşenine bir başlık, bir arama düğmesi ve bir menü düğmesi eklenmiştir. Ayrıca, centerTitle özelliği kullanılarak başlığın ortalanması sağlanmış ve backgroundColor özelliği kullanılarak başlık çubuğunun arka plan rengi değiştirilmiştir.

body

Body özelliği, uygulamanın ana içeriğini oluşturmanızı sağlar. Bu özellik, bir widget ağacı veya tek bir widget içerebilir.

Scaffold(
  appBar: AppBar(title: Text('Başlık')),
  body: Column(
    children: [
      Text('Merhaba'),
      Text('Flutter'),
    ],
  ),
);

Yukarıdaki örnekte, Scaffold widget’ı, bir AppBar bileşenini ve bir Column bileşenini içerir. Column, iki Text bileşenini içerir ve uygulamanın ana içeriği olarak görüntülenir.

floatingActionButton

FloatingActionButton özelliği, uygulamanın sağ alt köşesinde yüzen bir düğme oluşturmanızı sağlar.

Scaffold(
  appBar: AppBar(title: Text('Başlık')),
  body: Container(),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // Düğme tıklandığında yapılacak işlem
    },
    child: Icon(Icons.add),
  ),
);

Yukarıdaki örnekte, Scaffold widget’ı, bir AppBar bileşenini, bir Container bileşenini ve bir FloatingActionButton bileşenini içerir. FloatingActionButton, “+” sembolünü içeren bir düğmedir.

drawer

Drawer özelliği, uygulamanın sol tarafında bir çekmece oluşturmanızı sağlar. Bu özellik genellikle, uygulamanın gezinme menüsü, ayarları vb. bileşenlerini içeren bir widget ağacı içerir.

Scaffold(
  appBar: AppBar(title: Text('Başlık')),
  body: Container(),
  drawer: Drawer(
    child: ListView(
      children: [
        ListTile(
          title: Text('Sayfa 1'),
          onTap: () {
            // Sayfa 1'e git
          },
        ),
        ListTile(
          title: Text('Sayfa 2'),
          onTap: () {
            // Sayfa 2'ye git
          },
        ),
      ],
    ),
  ),
);

Yukarıdaki örnekte, Scaffold widget’ı, bir AppBar bileşenini, bir Container bileşenini ve bir Drawer bileşenini içerir. Drawer, iki ListTile bileşenini içerir ve uygulamanın sol tarafında bir menü olarak görüntülenir.

bottomNavigationBar

BottomNavigationBar özelliği, uygulamanın alt kısmında bir gezinme çubuğu oluşturmanızı sağlar. Bu özellik, genellikle uygulamanın farklı bölümleri arasında gezinmek için kullanılır.

Scaffold(
  appBar: AppBar(title: Text('Başlık)),
  body: Container(),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Anasayfa',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Arama',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profil',
      ),
    ],
  ),
);

Yukarıdaki örnekte, Scaffold widget’ı, bir AppBar bileşenini, bir Container bileşenini ve bir BottomNavigationBar bileşenini içerir. BottomNavigationBar, üç öğeyi içeren bir liste olarak oluşturulur ve her öğe bir simge ve bir etiket içerir.

resizeToAvoidBottomInset

resizeToAvoidBottomInset özelliği, klavye açıldığında sayfanın alt kenarının kesilip kesilmeyeceğini belirler.

Scaffold(
  appBar: AppBar(title: Text('Başlık')),
  body: Container(),
  resizeToAvoidBottomInset: false,
);

Yukarıdaki örnekte, Scaffold widget’ı, bir AppBar bileşenini, bir Container bileşenini ve resizeToAvoidBottomInset özelliğini içerir. Bu özellik false olarak ayarlandığından, klavye açıldığında sayfanın alt kenarı kesilmez.

Sonuç

Flutter’da Scaffold widget’ı, uygulamanızda birden çok bileşeni tek bir yerde birleştirmenizi sağlar. Bu makalede, Scaffold widget’ının çeşitli özelliklerini ve örneklerini inceledik. Scaffold widget’ı, Flutter uygulamanızın temel yapısını oluşturmanıza yardımcı olacak önemli bir araçtır.

Evet Scaffold widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.