[Flutter] 모서리를 둥글게 / 테두리 넣기

2020. 8. 22. 23:56·Flutter/Flutter Widget Design

위젯의 모서리를 둥글게하고 테두리를 넣기 위해선 위젯의 속성에

decoration이나 shape가 있어야한다.

해당 속성에서 아래의 방법으로 위젯을 둥글게, 테두리를 디자인 할 수 있다.

 

아래의 두 가지 유형을 기억하면 대부분의 위젯을 처리할 수 있다.

 

Decoration 속성을 가진 위젯

Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50), //모서리를 둥글게
            border: Border.all(color: Colors.black12, width: 3)), //테두리

 

Shape 속성을 가진 위젯

 ButtonTheme(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50) //모서리
                        side: BorderSide(color: Colors.black)), //테두리

 

모서리가 둥근 버튼

버튼의 모서리를 둥글게 하려고 보니, Decoration과 Shape가 없어 당황스러울 것이다.

버튼 위젯은 두 가지 속성이 없으므로 ButtonTheme으로 감싸 이 속성을 사용한다.

둥근 버튼 예시

ButtonTheme(
                      minWidth: //버튼의 최소 가로 길이
                      height: //버튼의 세로 길이
                      shape: RoundedRectangleBorder( //버튼을 둥글게 처리
                          borderRadius: BorderRadius.circular(10)),
                      child: RaisedButton( //ButtonTheme의 child로 버튼 위젯 삽입
                        onPressed: () {},
                        child: Text(
                          '예시 버튼 텍스트',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, color: Colors.white),
                        ),
                        color: Colors.deepPurple,
                      ),
                    ),
저작자표시 비영리 변경금지 (새창열림)

'Flutter > Flutter Widget Design' 카테고리의 다른 글

[플러터] ListView 경계선 흐리게 하기  (2) 2021.10.08
[플러터] List View 애니메이션  (0) 2021.08.28
[플러터] 이미지에 그림자 넣기  (1) 2021.08.02
[플러터] Font 변경하는 방법  (0) 2020.12.14
'Flutter/Flutter Widget Design' 카테고리의 다른 글
  • [플러터] ListView 경계선 흐리게 하기
  • [플러터] List View 애니메이션
  • [플러터] 이미지에 그림자 넣기
  • [플러터] Font 변경하는 방법
코딩으로세계정복
코딩으로세계정복
Connecting the dots
  • 코딩으로세계정복
    코딩으로 세계정복
    코딩으로세계정복
  • 전체
    오늘
    어제
    • 전체 (134)
      • Who am I (10)
        • Portfolio (4)
        • Reminiscence (5)
        • Oversea (1)
        • SiliconValley (0)
      • React (36)
        • React Basic (15)
        • React Tech (5)
        • JavaScript (7)
        • TypeScript (3)
        • CSS&HTML (3)
        • Firebase (3)
      • NodeJS (1)
        • NodeJS Basic (1)
      • Flutter (55)
        • Flutter Widget Design (5)
        • Flutter Widget Basic (8)
        • Flutter Tech (18)
        • Flutter Issue (7)
        • Flutter Web (6)
        • About Flutter (2)
        • Firebase (1)
        • Dev Env (1)
        • Dart (7)
      • Programming (31)
        • Web (1)
        • General (0)
        • Algorithm (25)
        • Python (1)
        • VS Code (2)
      • Django (0)
  • 블로그 메뉴

    • Who I AM
    • React
    • NodeJS
    • Flutter
    • Programming
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    Redux
    JSON
    리액트
    JavaScript
    포트폴리오
    플러터 웹
    Lingory
    프로그래머스
    react
    useTranslation
    탐욕법
    웹
    Firebase
    플러터
    Python
    알고리즘
    Flutter
    CSS
    useRef
    HTML
    DP
    github
    자바스크립트
    파이썬
    링고리
    flutter web
    map
    useState
    DART
    TypeScript
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
코딩으로세계정복
[Flutter] 모서리를 둥글게 / 테두리 넣기
상단으로

티스토리툴바