Card image cap
[Flutter][33] SafeArea, Mengatasi Notch/Poni dan Layar Lengkung
Thursday, 11 Jul 2019

Hello world,

Semakin ke sini sekarang perkembangan desain handphone sudah banyak sekali variasinya. Mulai dari yang berponi/notch yang mulai dipopulerkan pertama kali oleh Iphone X yang kemudian diikui oleh beberapa brand handphone android seperti Xiaomi, Oppo, Vivo dan lain-lain. Bentuk poninya pun sudah banyak variasinya. Seperti Poni panjang milik Iphone, Poni airdrop, Setengah lingkaran, hingga kini muncul konsep layar yang memiliki lubang pada pojok layar atau yang disebut oleh samsung sebagai Infinity-O. Handphone jaman sekarang juga sudah banyak yang mengadopsi konsep layar yang melengkung pada setiap sudutnya. Lihat gambar di bawah.

Bentuk layar yang sudah berfariasi

Karena adanya bentuk layar yang bermacam-macam akhirnya membuat aplikasi-aplikasi juga harus mengikuti perubahan tersebut menyesuaikan bentuk layar. Jika tidak maka akan muncul masalah seperti appbar yang tertutup notch, Text yang terpotong di sudut layar dan lain-lain. Maka dari itu, Flutter menyediakan widget yang bisa menjadi salah satu solusi dari masalah tersebut yaitu widget SafeArea.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamansafearea(),
));
}

class Halamansafearea extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman SafeArea"),
),
body: new Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: List.generate(50,
(i) => Text("This is Text number $i")
)
),
),
);
}
}



Pada contoh di atas jika dibuka pada handphone yang memiliki layar lengkung maka hasilnya akan seperti contoh gambar di atas. Untuk mengatasinya kita dapat menambahkan/membungkus widget kita dengan menggunakan widget SafeArea seperti contoh di bawah ini.

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamansafearea(),
));
}

class Halamansafearea extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Kedua"),
),
body: new SafeArea(
child: Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: List.generate(50,
(i) => Text("This is Text number $i")
)
),
),
)
);
}
}

Dan hasilnya akan menjadi seperti berikut

SafeArea juga memiliki pengaturan tambahan yaitu untuk mengatur status penggunaan SafeArea pada tiap-tiap tepi layar. Lihat contoh di bawah.

SafeArea(
bottom: true,
top: true,
right: true,
left: true,
child: Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: List.generate(
            50,
(i) => Text("This is Text number $i")
)
),
),
),


Selamat mencoba :)