openplanning

Hướng dẫn sử dụng Flutter CircleBorder

Xem thêm các chuyên mục:

1- CircleBorder

CircleBorder được sử dụng để tạo ra một đường viền hình tròn lớn nhất có thể nằm trong một không gian sẵn có. Nó thường được sử dụng với ShapeDecoration để vẽ hình tròn.
  • TODO Link!
  • TODO Link!
Nếu không gian sẵn có là một hình chữ nhật, CircleBorder sẽ vẽ ra một đường tròn có kích thước lớn nhất có thể tại trung tâm của hình chữ nhật.
CircleBorder constructor
const CircleBorder(
    {BorderSide side: BorderSide.none}
)

2- Examples

(ex1)
Container(
    width: 150,
    height: 300,
    child: Center(
        child: Text(
            "GO",
            style: TextStyle(fontSize: 50)
        )
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        )
    )
)
Sử dụng toán tử cộng ( + ) để cộng 2 ShapeBorder để tạo ra một viền kết hợp.
(ex2)
Container(
    width: 150,
    height: 300,
    child: Center(
        child: Text(
            "GO",
            style: TextStyle(fontSize: 50)
        )
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        ) +  CircleBorder (
            side: BorderSide(
                width: 20,
                color: Colors.green
            )
        )
    )
)
Ví dụ tạo một Avatar đơn giản:
(ex3)
Container(
    width: 200,
    height: 200,
    child: Center(
        child: Image.network("https://s3.o7planning.com/images/boy-128.png")
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        )
    )
)

3- side

side - Cung cấp các thông số liên quan tới viền chẳng hạn như mầu sắc, chiều rộng, kiểu dáng.
BorderSide side: BorderSide.none
BorderSide constructor
const BorderSide (
    {Color color: const Color(0xFF000000),
    double width: 1.0,
    BorderStyle style: BorderStyle.solid}
)
  • TODO Link!

Xem thêm các chuyên mục:

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.