Flutter SafeArea Nedir?
Flutter SafeArea, uygulamalarımızda kullanıcıların içeriğe müdahale etmeden cihaz ekranındaki boşluklardan kaçınmamızı sağlayan bir widget’dır. SafeArea widget’ı, cihazın üst, alt, sol ve sağ kenarlarına göre içeriğimizi otomatik olarak yeniden boyutlandırır ve güvenli bir alan içinde görüntülememize yardımcı olur.
SafeArea Kullanımı
SafeArea widget’ı, genellikle Scaffold
widget’ının altında kullanılır. Öncelikle, ekranın güvenli alanını belirlemek için SafeArea widget’ını kullanarak bir layout oluşturmamız gerekir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import 'package:flutter/material.dart'; class SafeAreaExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('SafeArea Örneği'), ), body: SafeArea( child: Container( child: Text('Bu içerik güvenli bir alanda.'), ), ), ); } } |
Yukarıdaki örnekte, SafeArea
widget’ı, Scaffold
widget’ının altında kullanılır ve içinde Container
widget’ı bulunur. SafeArea
widget’ı, cihazın üst ve alt kenarlarına göre içeriği yeniden boyutlandırır ve güvenli bir alan sağlar.
SafeArea
widget’ının child
özelliği, güvenli alanın içine yerleştirilen widget’ları belirtir. Bu örnekte, child
özelliğindeki Container
widget’ı, güvenli alanın içindeki tek bir Text
widget’ını içerir.
Örnek Uygulama
Aşağıdaki örnek uygulama, SafeArea widget’ını kullanarak bir uygulama oluşturur. Uygulamanın ana ekranında, bir Column
widget’ı ve Expanded
widget’ları kullanarak üst ve alt çubuklar arasındaki alanı dolduracak bir resim ve metin görüntülenir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter SafeArea Örneği', theme: ThemeData( primarySwatch: Colors.blue, ), home: SafeAreaExample(), ); } } class SafeAreaExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter SafeArea Örneği'), ), body: SafeArea( child: Column( children: <Widget>[ Expanded( child: Image.network( 'https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg', fit: BoxFit.cover, ), ), Expanded( child: Container( color: Colors.blueGrey, child: Text( 'Bu içerik güvenli bir alanda.', style: TextStyle( fontSize: 30, color: Colors.white, ), ), alignment: Alignment.center, ), ), ], ), ), ); } } |
İlk Yorumu Siz Yapın