Flutter for beginner

Mở Đầu

Trên các nền tảng khác nhau có những vùng mà bạn nên tránh hiển thị UI lên trên đấy như StatusBar trên Android và Notch trên iPhone X.

Làm quen với SafeArea

Để giải quyết vấn đề này Flutter cung cấp cho chúng ta một widget là SafeArea.

  • Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body:  SafeArea(child: ListView.separated(
            separatorBuilder: (context, index) => Divider(
              color: Colors.black,
              indent: 20.0,
              height: 0.0,
            ),
            itemCount: 50,
            itemBuilder: (BuildContext context, int index) {
              return new Padding(
                padding: EdgeInsets.all(20.0),
                child: Center(child: Text("Index $index")),
              );
            }
        ),
        ),
      );
    }

Trên iPhone X. Bạn sẽ thấy sau khi thêm SafeArea vào, vùng hiển thị của ListView sẽ không bị tràn xuống bên dưới nữa. Ta được kết quả như bên dưới

 

    1. Hình 1a: Vùng màu đỏ khoanh tròn chính là vùng đang bị tràn ra trên iPhone X
    2. Hình 1b: Là kết quả sau khi bạn thêm widget SafeArea vào. Vùng hiển thị của ListView sẽ không bị tràn xuống dưới.

Ở đây bạn thấy rằng khi bạn sử dụng Scaffold thì phần navigation đã có SafeArea nên chúng ta không phải lo lắng về việc hiển thị ra vùng bên ngoài.Vậy chúng ta hãy thử trong trường hợp không có Scaffold thì việc thêm SafeArea và không thêm sẽ có kết quả như thế nào

    • Không có SafeArea
    • Widget build(BuildContext context) {
        return SizedBox.expand(
          child: Card(
              color: Colors.green,
              child: Center(child:Text("Hello World!"))
          ),
        );
      }
    • SafeArea
    • Widget build(BuildContext context) {
        return SafeArea(
          child:SizedBox.expand(
            child: Card(
                color: Colors.green,
                child: Center(child:Text("Hello World!"))
            ),
          ),
        );
      }

Kết Quả

iPhone X

Android

Kết bài

Như vậy sau bài viết làm quen với SafeArea này. Các bạn đã biết cách sử dụng SafeArea như thế nào và khi nào thì cần đến nó rồi nhỉ :D.

Nếu có bất cứ vấn đề gì thắc mắc các bạn có thể comment bên dưới bài viết, mình sẽ phản hồi sớm nhất cho thể. Down source code tại đây

LEAVE A REPLY

Please enter your comment!
Please enter your name here