Flutter SafeArea Widget

"SafeArea" widget'ını kullanmak, widget'ların Flutter'daki sistem UI elementleri tarafından gizlenmesini önlemek için kullanışlı bir tekniktir.

"SafeArea" widget'ı, butonlar ve text gibi önemli öğelerin cihazın çentiği, klavyesi veya navigation bar gibi sistem UI öğeleri tarafından engellenmemesini sağlamak için uygulamanızın kullanıcı arayüzüne otomatik olarak padding ekleyen özel bir widget'tır.

Kullanıcı arayüzüne dolgu eklemek için "SafeArea" widget'ını kullanarak, önemli öğelerin sistem kullanıcı arabirimi öğeleri tarafından gizlenmediğinden emin olmak için dolguyu manuel olarak hesaplamak ve eklemek zorunda kalmazsınız.

Bu örnekte, "SafeArea" widget'ı, "Hello World!" metnini görüntüleyen "Text" widget'ını kaydırmak için kullanılır. Bu, "Text" widget'ının cihazın çentiği, klavyesi veya navigation bar gibi sistem kullanıcı arabirimi öğeleri tarafından engellenmemesini sağlar.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Text("Hello World!"),
          ),
        ),
      ),
    );
  }
}

Çentiklerden ve benzeri şeylerden etkilenmeyen kenarlar için minimum bir dolgu ayarlayabilirsiniz:

SafeArea(
  minimum: const EdgeInsets.all(16.0),
  child: Text('My Widget: ...'),
)

Bu örnekte ekranın sol tarafındaki dolguyu devre dışı bırakmak için "left" özelliği "false" olarak ayarlanmıştır, ekranın sağ tarafında dolguyu etkinleştirmek için "right" özelliği "true" olarak ayarlanmıştır ve "top" ve "bottom" özellikleri, ekranın üstündeki ve altındaki dolguyu etkinleştirmek için "true" olarak ayarlanmıştır.

"Minimum" özelliği, hem üst hem de alt dolgu için 10 piksellik sabit bir değere ayarlanmıştır. Bu, sistem kullanıcı arabirimi öğeleri daha az yer kaplasa bile ekranın üstünde ve altında her zaman en az 10 piksel dolgu olmasını sağlar.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          left: false,
          right: true,
          top: true,
          bottom: false,
          minimum: const EdgeInsets.only(top: 10, bottom: 10),
          child: Center(
            child: Text("Hello World!"),
          ),
        ),
      ),
    );
  }
}

Genel olarak bu örnekler, "SafeArea" widget'ının ve özelliklerinin, uygulamanızın kullanıcı arayüzüne dolgu eklemek ve önemli öğelerin sistem kullanıcı arayüzü öğeleri tarafından gizlenmemesini sağlamak için nasıl kullanılabileceğini gösterir.

Kaynaklar:
https://chat.openai.com/chat
https://stackoverflow.com/questions/49227667/using-safearea-in-flutter