벨로그가 보기 편합니다.

[Flutter] CustomPaint를 이용하여 Border를 밥아저씨처럼 쉽게 그려보기 (feat. 대각선 border, Radius)

✅ 대각선 Border를 만들어보자.

🤨 어...?

Flutter를 사용하여 어플을 만드는 도중, 아래와 같은 위젯을 만들어야 했다.

border에 해당하는 부분을 SVG이미지로 받아, Stack을 사용하여 border처럼 보이게 추가해주었다.

Center(
        child: Container(
          width: double.infinity,
          height: 400,
          margin: EdgeInsets.all(20),
          color: Colors.lightBlueAccent,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                child: SvgPicture.asset(
                  "assets/custom_border.svg",
                  color: Colors.red,
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text(
                    "대충 title이 들어갈거임",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                  ),
                  Text("blah blah blah"),
                ],
              ),
            ],
          ),
        ),