Hướng dẫn sử dụng Flutter CircleBorder
Xem thêm các chuyên mục:
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}
)
(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
)
)
)
)
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!
