Author: doanquyet

Để hiểu điều này trước tiên chúng ta hãy hiểu Stateful Builder là gì?

StatefulBuilder là một widget có trạng thái có thể thay đổi (trạng thái có thể thay đổi), điều làm cho nó trở nên đặc biệt là chỉ xây dựng lại widget cụ thể được bao bọc trong Stateful Builder. Rất may là không có việc xây dựng lại toàn bộ widget, không có vấn đề gì widget được bao bọc trong Stateful Builder nằm trong Stateless hay stateful Widget.

Bây giờ câu hỏi đặt ra là chúng ta biết rằng nó không thể xây dựng lại Stateless Widget cho đến khi có một phiên bản mới. (SetState không hoạt động)

Stateful builder có sức mạnh của StateSetter chức năng được truyền cho trình xây dựng được sử dụng để gọi một quá trình xây dựng lại chính nó thay vì một trạng thái điển hình của toàn bộ Widget.

StatefulBuilder(
builder: (BuildContext context, StateSetter setState) => Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value;
    });
  },
),
),

GHI NHỚ

Bất kỳ biến nào đại diện cho trạng thái nên được giữ bên ngoài hàm build có nghĩa là Bạn phải khai báo biến bên ngoài phương thức build để thay đổi xảy ra.

Như tôi đã đề cập ở trên, nó chỉ xây dựng lại một widget cụ thể. Nó chỉ cung cấp một thể hiện mới (State) cho widget cụ thể đó. vì vậy bạn đã gói tất cả widget (chế độ xem) mà bạn muốn thấy sự thay đổi trong StatefulBuilder.

Để hiểu Tại sao Stateful Builder không thể thay thế một Stateful widget. Đầu tiên chúng ta hãy hiểu điều gì tạo nên sự khác biệt giữa Widget không trạng thái và Widget trạng thái.

Bạn có nhận thấy trong phương pháp xây dựng ghi đè không trạng thái và mặt khác trong tiện ích con Stateful trước tiên sẽ ghi đè createState và sau đó ghi đè phương thức build? Điều xảy ra ngầm là khi widget không trạng thái nhận được một phiên bản mà hàm xây dựng của nó được gọi. và trong widget trạng thái trước tiên, hãy tạo thể hiện trạng thái để xây dựng hàm.Đó là cách setState đang hoạt động. Sau khi chạy setState, createState đưa ra một thể hiện mới để xây dựng lại phương thức và tiện ích con.

Giờ chúng ta sẽ hiểu tại sao Stateful Builder không thể thay thế tiện ích Stateful.

Nếu nó đang xây dựng lại phần cụ thể của cây widget. Tại sao chúng ta không thể sử dụng thay thế cho Stateful Widget?

Nếu bạn lưu trữ bất kỳ trạng thái nào trong các biến cá thể trong widget không trạng thái, nó có thể bị mất bất cứ lúc nào vì hàm tạo cho widget không trạng thái có thể được gọi lặp lại, giống như phương thức build. Chỉ có Trạng thái phiên bản liên quan của tiện ích con Stateful được lưu giữ bởi Flutter.

StatefulWidget vẫn được giữ nguyên trạng thái của nó ngay cả trong các lần xây dựng lại, đó là lý do tại sao đôi khi bạn thấy các hoạt động sai của TextEditorController trong Stateless Widget

Hoặc nếu bạn không đủ khả năng sử dụng StatefulBuilder với Stateless Widget thì bạn phải lưu trạng thái bằng các khóa Toàn cục.

Cảm ơn bạn đã đọc bài viết này nếu bạn thấy bất cứ điều gì có thể được cải thiện, vui lòng cho tôi biết, tôi rất muốn cải thiện.

Lớp con CustomPainter ghi đè hai phương thức: paint()và shouldRepaint().

Hãy để tôi hướng dẫn bạn qua mã để hiểu rõ hơn về những gì đang xảy ra ở đây. Như bạn có thể thấy giao diện người dùng mà chúng ta sẽ đạt được theo đó, tôi đã tạo một lớp CustomPaintExample chứa mã cho giao diện người dùng. Có hai yếu tố chính, hình dạng và hoạt ảnh của nút. Nút khi được nhấn sẽ tăng giá trị percentValue lên 10 và theo đó có thể thấy tiến trình trên đường viền nút đang tăng lên. Tiện ích này cũng được chia thành hai phần tử CustomPainterExample.buildShape() và CustomPainterExample.buildButtonAnimation() tôi đã tạo trong các lớp khác nhau CustomPainterExampleWidgets.

Trong Class CustomPainterExampleWidgets, Phần tử CustomPainterExample.buildShape()trả về một ClipPath bao gồm clipper CustomShapeClass và phần tử còn lại CustomPainterExample.buildButtonAnimation() bao gồm một Container với CustomPaint là phần tử con của nó hiển thị ở giữa màn hình. . Phần trăm tăng được hiển thị bằng phương thức onPressed tại nút Raised.

import 'package:flutter/material.dart';
class CustomShapeClass extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    // TODO: implement getClip
    var path = new Path();
    path.lineTo(0, size.height / 4.25);
    var firstControlPoint = new Offset(size.width / 4, size.height / 3);
    var firstEndPoint = new Offset(size.width / 2, size.height / 3 - 60);
    var secondControlPoint =
    new Offset(size.width - (size.width / 4), size.height / 4 - 65);
    var secondEndPoint = new Offset(size.width, size.height / 3 - 40);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstEndPoint.dx, firstEndPoint.dy);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondEndPoint.dx, secondEndPoint.dy);
    path.lineTo(size.width, size.height / 3);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }
  @override
  bool shouldReclip(CustomClipper oldClipper)
  {
    return true;
  }
}

CustomShapeClass kế thừa CustomClipper được minh họa ở trên . Trong điều khiển này, các điểm điều khiển và điểm kết thúc được xác định trong đó đường cong bezier bậc hai được vẽ. Bây giờ hãy khai báo lõi của ứng dụng lớp ButtonPainter

import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ButtonPainter extends CustomPainter
{
  Color buttonBorderColor;
  Color progressColor;
  double percentage;
  double width;
  ButtonPainter({this.buttonBorderColor,this.progressColor,this.percentage,this.width});
  @override
  void paint(Canvas canvas, Size size) {
    Paint line = Paint()
      ..color = buttonBorderColor
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;
    Paint complete =  Paint()
      ..color = progressColor
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = width;
    Offset center  = Offset(size.width/2, size.height/2);
    double radius  = min(size.width/2,size.height/2);
    canvas.drawCircle(
        center,
        radius,
        line
    );
    double arcAngle = 2*pi* (percentage/100);
    canvas.drawArc(
        Rect.fromCircle(center: center,radius: radius),
        -pi/2,
        arcAngle,
        false,
        complete
    );
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Ở đây chúng ta nhận được các thuộc tính khác nhau lineColor, có nghĩa là màu cho đường đi, trên đó tiến trình sẽ được vẽ, completeColor cho tiến độ đã hoàn thành, completePercent cho mức tiến độ đã hoàn thành. Từ tiện ích con của nó, chúng tôi gửi thuộc tính này xuống, ở đây chúng tôi chỉ đơn giản là vẽ.

ButtonPainter kế thừa lớp CustomPainter và chúng ta cần ghi đè paint phương thức của nó để vẽ đồ họa. Để vẽ, ngay từ đầu, chúng ta cần thông báo một thứ gọi là Paint , nó định hình tất cả các thuộc tính dự kiến ​​sẽ vẽ thứ gì đó trên màn hình. Vì vậy, chúng ta có hai đối tượng Paint ; đầu tiên là một dòng nói lên đường theo dõi mà tiến trình sẽ được vẽ trên đó. Chúng tôi cung cấp cho nó một màu sắc, được cung cấp dưới dạng thuộc tính, strokeCap ​​là hình tròn và chúng tôi yêu cầu style là PaintingStyle cho một trong những cung cấp. Vì vậy, ngoài ra, chúng tôi thông báo đối tượng Paint hoàn chỉnh cho tiến trình đã hoàn thành.

Tóm lại, chúng ta phải vẽ một vòng tròn đầy đủ và sau đó vẽ một vòng cung trên đó, thế là đã hoàn thành.

Offset center  = Offset(size.width/2, size.height/2);
double radius  = min(size.width/2,size.height/2);

Trong hai đường thẳng này, chúng tôi tính toán các hướng cho tâm của hình tròn và bán kính cơ bản của nó, tâm là chiều rộng và chiều cao của thùng chứa chia cho 2. Chúng tôi cần chính xác tâm của các hình tròn ở giữa. size là những gì chúng ta nhận được dưới dạng một tham số trong hàm paint, là kích thước của thùng chứa. radius Đây là mức tối thiểu của một nửa chiều rộng và chiều cao và bây giờ chúng tôi đang lấy mức tối thiểu của cả hai vì vùng chứa có thể không phải luôn luôn là hình vuông

canvas.drawCircle(center,radius,line);

Bây giờ chúng ta chỉ vẽ với hàm drawCircle được gọi trên đối tượng canvas được cung cấp, chúng ta chuyền vào tâm, bán kính và đối tượng Paint .

canvas.drawArc(Rect.fromCircle(center: center,radius: radius),
    -pi/2,arcAngle,false,complete);

Bây giờ, chúng ta tìm góc cho cung tròn đã hoàn thành, mà nó đã xuất hiện. Tôi không đi sâu vào tính toán hình học. Để gọi drawArc, chúng ta cần chỉ định một Rect , là hộp giới hạn của cung tròn, chúng ta nhận được Rect bao gồm các tham số của đường tròn mà chúng ta đã vẽ trước đó. Tại thời điểm đó, chúng ta cho một góc bắt đầu là -pi / 2 radian, hãy nhớ nó không phải là 0. Đỉnh là -pi/2, 0 là đích ngoài cùng bên phải của đường tròn. Chúng tôi cung cấp arcAngle tại điểm đó, đó là cung sẽ kéo dài bao nhiêu. Sau đó, chúng tôi chuyền vào false để nói rằng chúng tôi không muốn phần cuối của vòng cung được kết nối trở lại trung tâm và cuối cùng chúng chuyền vào complete. Đó là tất cả những gì chúng tôi mong đợi để vẽ bằng cách sử dụng CustomPaint.

Bây giờ, hãy thêm các hình ảnh động.

percentageAnimationController = new AnimationController(vsync: this,
    duration: new Duration(milliseconds: 1000))
  ..addListener((){setState(() {
      percentage=lerpDouble(percentage,newPercentage,
      percentageAnimationController.value);});});

Chúng tôi thêm hoạt ảnh trên màn hình HomePage trong initState(). Sau đó, chúng tôi đã thêm một trình nghe trên AnimationController đó được gọi ở mỗi bước của hoạt ảnh và chúng tôi thay đổi tỷ lệ phần trăm. Để thay đổi tỷ lệ phần trăm, chúng tôi nhận được một giá trị được chèn với sự trợ giúp của hàm lerpDouble , giá trị nằm trong percentage và newPercentage lớn hơn giá trị ban đầu 10, chúng ta nhận dựa trên giá trị AnimationController’s.

Chúng ta thêm dòng này vào nút onPressed để bắt đầu hoạt ảnh.

percentageAnimationController.forward(from: 0.0);

Bạn sẽ thấy mã đầy đủ trên GitHub và đây là một ví dụ về quy trình vòng tròn nhỏ để tích hợp với custom paint và video dưới đây cho biết cách CustomPaint sẽ hoạt động.

Hy vọng blog này sẽ cung cấp cho bạn đầy đủ thông tin trong việc thử Custom Paint trong các dự án hiện tại của bạn . Cảm ơn vì đã đọc bài viết này

Container

Một trong những Widget được sử dụng nhiều nhất – và vì những lý do này:

Container as a layout tool

Khi bạn không chỉ định height và width của Container, nó sẽ khớp với child kích thước của nó

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container as a layout')),
    body: Container(
      color: Colors.yellowAccent,
      child: Text("Hi"),
    ),
  );
}

Nếu bạn muốn kéo dài Container để khớp với cha của nó, hãy sử dụng double.infinity cho các thuộc tính height và width

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container as a layout')),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.yellowAccent,
      child: Text("Hi"),
    ),
  );
}

Container as decoration

Bạn có thể sử dụng thuộc tính color để làm thay đổi màu nền của Container bằng decoration và foregroundDecoration.

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container.decoration')),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(color: Colors.yellowAccent),
      child: Text("Hi"),
    ),
  );
}

. . .

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container.foregroundDecoration')),
    body: Container(
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(color: Colors.yellowAccent),
      foregroundDecoration: BoxDecoration(
        color: Colors.red.withOpacity(0.5),
      ),
      child: Text("Hi"),
    ),
  );
}

Container as Transform

Nếu bạn không muốn sử dụng widget Transform để thay đổi bố cục của mình, bạn có thể sử dụng transform thuộc tính từ Container

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Container.transform')),
    body: Container(
      height: 300,
      width: 300,
      transform: Matrix4.rotationZ(pi / 4),
      decoration: BoxDecoration(color: Colors.yellowAccent),
      child: Text(
        "Hi",
        textAlign: TextAlign.center,
      ),
    ),
  );
}

. . .

BoxDecoration

BoxDecoration thường được sử dụng trên tiện ích Container để thay đổi diện mạo của Container.

image: DecorationImage

Đặt một hình ảnh làm nền:

Scaffold(
  appBar: AppBar(title: Text('image: DecorationImage')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        image: DecorationImage(
          fit: BoxFit.fitWidth,
          image: NetworkImage(
            'https://flutter.io/images/catalog-widget-placeholder.png',
          ),
        ),
      ),
    ),
  ),
);

border: Border

Chỉ định đường viền của Container sẽ trông như thế nào.

Scaffold(
  appBar: AppBar(title: Text('border: Border')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.black, width: 3),
      ),
    ),
  ),
);

borderRadius: BorderRadius

Cho phép làm tròn các góc của đường viền.

borderRadius không hoạt động nếu shape trong decoration là BoxShape.circle

Scaffold(
  appBar: AppBar(title: Text('borderRadius: BorderRadius')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.black, width: 3),
        borderRadius: BorderRadius.all(Radius.circular(18)),
      ),
    ),
  ),
);

shape: BoxShape

BoxDecoration có thể là hình chữ nhật / hình vuông hoặc hình elip / hình tròn.

Đối với bất kỳ hình dạng nào khác, bạn có thể sử dụng ShapeDecoration thay thế cho BoxDecoration

Scaffold(
  appBar: AppBar(title: Text('shape: BoxShape')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        shape: BoxShape.circle,
      ),
    ),
  ),
);

boxShadow: List<BoxShadow>

Thêm bóng vào Container .

Tham số này là một danh sách vì bạn có thể chỉ định nhiều bóng khác nhau và hợp nhất chúng lại với nhau.

Scaffold(
  appBar: AppBar(title: Text('boxShadow: List<BoxShadow>')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        boxShadow: const [
          BoxShadow(blurRadius: 10),
        ],
      ),
    ),
  ),
);

gradient

Có ba loại gradient LinearGradient:, RadialGradientvà SweepGradient.

Scaffold(
  appBar: AppBar(title: Text('gradient: LinearGradient')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: const [
            Colors.red,
            Colors.blue,
          ],
        ),
      ),
    ),
  ),
);

. . .

Scaffold(
  appBar: AppBar(title: Text('gradient: RadialGradient')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        gradient: RadialGradient(
          colors: const [Colors.yellow, Colors.blue],
          stops: const [0.4, 1.0],
        ),
      ),
    ),
  ),
);

. . .

Scaffold(
  appBar: AppBar(title: Text('gradient: SweepGradient')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        gradient: SweepGradient(
          colors: const [
            Colors.blue,
            Colors.green,
            Colors.yellow,
            Colors.red,
            Colors.blue,
          ],
          stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
        ),
      ),
    ),
  ),
);

backgroundBlendMode

backgroundBlendMode là tài sản phức tạp nhất của BoxDecoration.
Nó chịu trách nhiệm trộn các màu / độ chuyển màu với nhau BoxDecorationvà bất cứ thứ gì BoxDecorationở trên cùng.

Với backgroundBlendModebạn có thể sử dụng một danh sách dài các thuật toán được chỉ định trong BlendModeenum.

Đầu tiên, hãy đặt BoxDecoration là foregroundDecoration

Scaffold(
  appBar: AppBar(title: Text('backgroundBlendMode')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      foregroundDecoration: BoxDecoration(
        backgroundBlendMode: BlendMode.exclusion,
        gradient: LinearGradient(
          colors: const [
            Colors.red,
            Colors.blue,
          ],
        ),
      ),
      child: Image.network(
        'https://flutter.io/images/catalog-widget-placeholder.png',
      ),
    ),
  ),
);

. . .

Material

Đường viền với các góc cắt

Scaffold(
  appBar: AppBar(title: Text('shape: BeveledRectangleBorder')),
  body: Center(
    child: Material(
      shape: const BeveledRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(20)),
        side: BorderSide(color: Colors.black, width: 4),
      ),
      color: Colors.yellow,
      child: Container(
        height: 200,
        width: 200,
      ),
    ),
  ),
);

. . .

Slivers

SliverFillRemaining

Widget này không thể thay thế khi bạn muốn căn giữa nội dung của mình ngay cả khi không có đủ dung lượng cho nó. Ví dụ

Scaffold(
  appBar: AppBar(title: Text('SliverFillRemaining')),
  body: CustomScrollView(
    slivers: [
      SliverFillRemaining(
        hasScrollBody: false,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            FlutterLogo(size: 200),
            Text(
              'This is some longest text that should be centered'
              'together with the logo',
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    ],
  ),
);

Trong trường hợp không có đủ không gian cho nội dung được căn giữa, nội dung SliverFillRemaining sẽ có thể cuộn được:

Nếu không có SliverFillRemaining nội dung sẽ tràn như thế này:

Làm đầy không gian còn lại

Ngoài việc hữu ích cho việc căn giữa nội dung của bạn, SliverFillRemaining nó sẽ lấp đầy không gian trống còn lại của khung nhìn. Để làm được điều đó, widget này phải được đặt vào CustomScrollView và cần phải là mảnh cuối cùng

Trong trường hợp không có đủ dung lượng, tiện ích con sẽ có thể cuộn được:

Scaffold(
  appBar: AppBar(title: Text('SliverFillRemaining')),
  body: CustomScrollView(
    slivers: [
      SliverList(
        delegate: SliverChildListDelegate(const [
          ListTile(title: Text('First item')),
          ListTile(title: Text('Second item')),
          ListTile(title: Text('Third item')),
          ListTile(title: Text('Fourth item')),
        ]),
      ),
      SliverFillRemaining(
        hasScrollBody: false,
        child: Container(
          color: Colors.yellowAccent,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              FlutterLogo(size: 200),
              Text(
                'This is some longest text that should be centered'
                'together with the logo',
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);

. . .

SizedBox

Đây là một trong những Widget đơn giản nhưng hữu ích nhất

SizedBox dưới dạng ConstrainedBox

SizedBox có thể hoạt động theo cách tương tự như ConstrainedBox

SizedBox.expand(
  child: Card(
    child: Text('Hello World!'),
    color: Colors.yellowAccent,
  ),
),

. . .

SizedBox dưới dạng padding

Khi cần thêm phần đệm hoặc lề, bạn có thể chọn Padding hoặc Container các widget. Nhưng chúng có thể dài dòng hơn và khó đọc hơn so với việc thêm một Sizedbox

Column(
  children: <Widget>[
    Icon(Icons.star, size: 50),
    const SizedBox(height: 100),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),

SizedBox như một đối tượng vô hình

Nhiều khi bạn muốn ẩn / hiện một tiện ích phụ thuộc vào bool

• 

• 

Widget build(BuildContext context) {
  bool isVisible = ...
  return Scaffold(
    appBar: AppBar(
      title: Text('isVisible = $isVisible'),
    ),
    body: isVisible 
      ? Icon(Icons.star, size: 150) 
      : const SizedBox(),
  );
}

Vì SizedBox có một hàm const tạo nên việc sử dụng const SizedBox()thực sự rất tối ưu**.

** Một giải pháp tối ưu hơn sẽ là sử dụng Opacity widget và thay đổi opacity giá trị thành 0.0. Hạn chế của giải pháp này là tiện ích đã cho sẽ chỉ ẩn, vẫn chiếm không gian.

. . .

Trên các nền tảng khác nhau, có những khu vực đặc biệt như Thanh trạng thái trên Android hoặc Notch trên iPhone X mà chúng tôi có thể tránh vẽ dưới.

Giải pháp cho vấn đề này là SafeArea widget (ví dụ không có / có SafeArea)

• 

• 

Widget build(BuildContext context) {
  return Material(
    color: Colors.blue,
    child: SafeArea(
      child: SizedBox.expand(
        child: Card(color: Colors.yellowAccent),
      ),
    ),
  );
}

Kết thúc phần 3!

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.