Flutter SafeArea Widgeti Kullanımı

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

Kullanım Amacı

Flutter’da SafeArea Widgeti, ekranda belirli bir bölgenin güvenli bölge olarak ayarlanmasına yardımcı olan bir Widget’tır. Bu bölgede, cihazın ekranının kenarlarından bir miktar boşluk bırakılır ve içerik bu boşluklara yerleştirilir. Böylece içerik, cihazın kenarlarına temas etmez ve bu alanlar kullanıcının dokunmatik işlemleri için kullanılabilir hale gelir.

SafeArea Widgeti, varsayılan olarak, cihazın üst çubuğu, alt çubuğu, sistem çubuğu ve cihazın kenarları arasındaki alanları dikkate alır. Bu alanlar, farklı cihazlarda farklı boyutlarda olabilir. SafeArea Widgeti, bu farklı boyutlar nedeniyle içeriklerin cihazın kenarlarına temas etmesini engeller.

SafeArea Widgeti kullanımı oldukça kolaydır. İçinde bulunduğu widget ağacına dahil edilir ve içinde bulunan widgetler, güvenli bölge içinde yerleştirilir.

Kullanımı

Aşağıdaki örnekte, SafeArea Widgeti kullanımı gösterilmektedir:

import 'package:flutter/material.dart';

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

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

Yukarıdaki örnekte, SafeArea Widgeti, Scaffold Widgeti içinde kullanılmaktadır. Scaffold, genellikle MaterialApp içinde kullanılır ve uygulamanın çerçevesini oluşturur.

SafeArea Widgeti, Scaffold’in child özelliği olarak kullanılır ve bu özelliğe, uygulama içeriği olan Text Widgeti yerleştirilir.

Özelleştirilmesi

SafeArea Widgeti’nin kullanımı özelleştirilebilir ve özelliklerini değiştirebilirsiniz. Aşağıdaki örnek, SafeArea Widgeti’nin özelliklerini özelleştirmektedir:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SafeArea Widgeti Özellikleri ve Kullanımı',
      home: SafeArea(
        top: false,
        bottom: true,
        left: true,
        right: false,
        child: Scaffold(
          appBar: AppBar(title: Text('SafeArea Widgeti Özellikleri ve Kullanımı')),
          body: Center(child: Text('Merhaba Dünya!')),
        ),
      ),
    );
  }
}

Yukarıdaki örnekte, SafeArea Widgeti özellikleri, özelleştirilmiştir. top, bottom, left ve right özellikleri, belirli kenarların güvenli bölgeye dahil edilip edilmeyeceğini belirlemektedir. Bu örnekte, üst kenar ve sağ kenar, güvenli bölgenin dışında kalmaktadır.

Bu örnekte, SafeArea Widgeti kullanımı, Scaffold Widgeti içinde yer almakta ve uygulama içeriği, yine Text Widgeti kullanılarak oluşturulmaktadır.

Sonuç

SafeArea Widgeti, uygulamanızda içeriklerin belirli bir güvenli bölgede kalmasını sağlamak için harika bir araçtır. Bu Widget, kullanıcı deneyimini geliştirmek ve içeriklerin cihazın kenarlarına temasını engellemek için kullanılabilir. Kendi projelerinizde SafeArea Widgeti kullanarak, içeriklerinizi cihazın kenarlarından bir miktar uzakta tutabilir ve kullanıcıların cihazlarını rahatça kullanmalarını sağlayabilirsiniz.

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