[Flutter] 플러터 박스 디자인

 

먼저 body 영역에 간단하게 Container 위젯을 작성해본다.

 

 

margin

- margin을 통해 컨테이너의 바깥쪽 영역에 여백을 줄 수 있다.

padding

- padding을 통해 컨테이너의 안쪽 영역에 여백을 줄 수 있다.

 

 

- EdgeInsets.all(크기) : 모든 외부 면에 크기만큼의 여백을 준다.

- EdgeInsets.fromLTRB(크기, 크기, 크기, 크기) : 왼쪽(L), 위쪽(T), 오른쪽(R), 아래(B) 만큼의 여백을 준다.

- EdgeInsets.only(top:크기, bottom:크기, left:크기, right:크기) : 외부 면 중 원하는 부분에 원하는 크기만큼의 여백을 준다.

margin

padding

 

decoration: BoxDecoration()

- 하위 속성들은 BoxDecoration 아래에 작성하도록 한다.

- color : 색상을 지정할 수 있다.

decoration: BoxDecoration(
   color: Colors.red,
),

- image : 이미지를 지정할 수 있다. (DecorationImage 하위에 작성)

decoration: BoxDecoration(
   color: Colors.red,
   image: DecorationImage(
   image: AssetImage(
     'images/image.png'
   )
  )
 ),

- border : 테두리를 지정할 수 있다.

decoration: BoxDecoration(
   border: Border.all(
   color: Colors.black,
   style: BorderStyle.solid,
   width: 10
  )
),

- shape : 모양을 바꿀 수 있다.(BoxShape)

decoration: BoxDecoration(
   color: Colors.red,
   shape: BoxShape.circle
),

- borderRadius : 테두리에 곡률을 정할 수 있다.(BorderRadius)

decoration: BoxDecoration(
   color: Colors.red,
   borderRadius: BorderRadius.circular(10.0)
),

- BorderRadius.vertical or horizontal : 테두리 곡률을 위 아래 혹은 좌우로 지정할 수 있다.

borderRadius: BorderRadius.vertical(
	bottom: Radius.circular(30)
)

- gradient : 박스에 그래디언트를 설정한다.

decoration: BoxDecoration(
    color: Colors.red,
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.red,
        Colors.blue,
      ]
   )
),

- boxShadow : 박스 테두리쪽에 그림자를 지정할 수 있다.

decoration: BoxDecoration(
     color: Colors.red,
     boxShadow: [
       BoxShadow(
         color: Colors.grey,
         blurRadius: 5.0,
         spreadRadius: 3.0,
         offset: Offset( // 오프셋을 통해 그림자 위치를 수정할 수 있다
           3,
           3,
         )
       ),
     ],
   ),

 

 

박스의 위치 정렬

Center

- Container를 Center로 감싸면 박스가 화면 정중앙에 위치하게 된다.

body: Center(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),

Center 사용

Align

- 하지만 위젯의 위치를 항상 정중앙에만 위치시킬 수는 없기 때문에 alignment를 사용하여 위젯의 위치를 원하는 곳에 정렬시킬 수 있다.

body: Align(
        alignment: Alignment.topCenter,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),

- bottomLeft : 하단 좌측

- bottomCenter : 하단 중앙

- bottomRight : 하단 우측

- centerLeft : 중단 좌측

- center : 중단 중앙

- centerRight : 중단 우측

- topLeft : 상단 좌측

- topCenter : 상단 중앙

- topRight : 상단 우측

topCenter 적용 예시

 

위젯의 길이를 화면에 꽉차게 적용시키고 싶을 때?

- width 혹은 height 값에 double.infinity를 적용시키면 된다.

좌측 : width 우측 : height에 각각 double.infinity 값을 적용시켰을 때 모습