Tạo hiệu ứng làm mờ bằng tiện ích BackdropFilter trong ứng dụng Flutter của bạn
Chúng ta sẽ xem cách triển khai chương trình demo của BackdropFilter và hướng dẫn bạn cách sử dụng tiện ích đó để tạo hiệu ứng mờ trong các ứng dụng Flutter của bạn.
Backdrop Filter Widget Flutter đang sử dụng để thực hiện các tác động làm mờ trên ảnh, container và mọi tiện ích. Tiện ích Backdrop Filter được sử dụng với sự kết hợp của lớp ImageFilter . Nó áp dụng một bộ lọc trên tiện ích con hiện tại và làm cho tác động mờ bên dưới tiện ích con hiện tại.
Làm mờ hình ảnh:
Chúng ta sẽ tạo tác động làm mờ sẽ được áp dụng cho toàn bộ không gian của tiện ích con. Khi BackdropFilter áp dụng bộ lọc, phần lớn chúng ta cần sử dụng tiện ích Stack để thực thi. Tiện ích mà bộ lọc sẽ được áp dụng phải được đặt trước bộ lọc.
Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset("assets/devs.jpg",fit: BoxFit.contain,),
Positioned.fill(
child: Center(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
color: Colors.black.withOpacity(0.2),
),
),
),
),
],
),
Vì bộ lọc sẽ bao phủ toàn bộ không gian gốc của nó, chúng ta cần bao bọc tiện ích con BackdropFilter làm phần tử con của Positioned.fill. Bạn cần chứa ImageFilter. Đối với tình huống này, bộ lọc thích hợp nhất có thể được sử dụng ImageFilter.blur. sigmaX và sigmaY kiểm soát độ lệch tiêu chuẩn phụ thuộc vào bộ lọc trên trục x và trục y riêng lẻ. Cả hai đều có ước tính mặc định là 0, có nghĩa là không có tác động nào được áp dụng. Để áp dụng bộ lọc trên trục x, hãy thay đổi ước tính sigmaX thành một số dương. Đối với trục y, sử dụng thuộc tính sigmaY . Con của BackdropFilter có thể là một Container có độ mờ che bóng dưới 1, bằng 0 là giá trị điển hình. Khi chúng tôi chạy ứng dụng, chúng tôi phải lấy đầu ra của màn hình như ảnh chụp màn hình bên dưới.
Làm mờ văn bản:
Ví dụ Blur này là cách làm cho bộ lọc được áp dụng cho một không gian cụ thể của hình ảnh. Thay vì Positioned. fill , sử dụng hàm tạo mặc định của tiện ích con Positioned mà bạn có thể đặt phân tách từ trên cùng, trái, dưới và phải. Trong mọi trường hợp, điều đó là không đầy đủ. Như tôi đã soạn ở trên, Flutter sẽ áp dụng bộ lọc cho tất cả các khoảng trống bên trong clip của tiện ích con của nó. Theo đó, để áp dụng kênh trên một lãnh thổ cụ thể, bạn cần bao bọc chúng BackdropFilter dưới dạng con của bất kỳ Clip widget, nào , như ClipRect, ClipRRect, ClipOval, ClipPath hoặc CustomClipper.
Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset("assets/devs.jpg",fit: BoxFit.contain,),
Positioned(
top: 250,
left: 0,
right: 0,
child: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
padding: EdgeInsets.all(24),
color: Colors.white.withOpacity(0.5),
child: Text(
"Flutter Dev's",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
),
),
],
),
Chúng ta sẽ thêm văn bản trên một vùng chứa với độ mờ màu và bán kính đường viền sẽ là hình tròn do ClipRRect(). Khi ta chạy ứng dụng, ta phải lấy đầu ra của màn hình như ảnh chụp màn hình bên dưới.
Làm mờ hình ảnh & văn bản:
Trong hiệu ứng mờ này, tất cả mọi thứ sẽ giống nhau. Chúng tôi sẽ thêm Stack () , bên trong chúng tôi sẽ thêm một widget Positioned với trên cùng, bên trái và bên phải. Chúng tôi sẽ áp dụng BackdropFilter() và thuộc tính con của nó, chúng tôi sẽ thêm một container có cùng văn bản và màu sắc với độ mờ. Chúng tôi sẽ xóa ClipRRect. Tất cả các vật dụng sẽ bị mờ.
Stack(
fit: StackFit.expand,
children: <Widget>[
Image.asset("assets/devs.jpg",fit: BoxFit.contain,),
Positioned(
top: 250,
left: 0,
right: 0,
child: Center(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 10.0,
sigmaY: 10.0,
),
child: Container(
padding: EdgeInsets.all(24),
color: Colors.white.withOpacity(0.5),
child: Text(
"Flutter Dev's",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
),
],
),
Khi chạy ứng dụng, ta sẽ thấy màn hình như ảnh chụp màn hình bên dưới.
Kết luận:
Trong bài viết này, tôi đã giải thích cấu trúc cơ bản của widget BackdropFilter trong Flutter, bạn có thể sửa đổi mã này theo sự lựa chọn của bạn.