#3 flutter 박스를 이용해 앱 제작하기

*해당 블로그는 코딩애플의 쉬운 플러터 강의를 보고 제작되었습니다.

 

박스를 이용해 앱 제작하기

---

우리는 앱을 제작할때 여러 박스를 만들어 꾸미는 값을 주어 제작하게 된다.

 

필수로 사용하는 요소에 대해 정리해보았다.

 

 

1. margin

body: Container:(
	width : 150, height, 150, color : Colors.blue,
	margin : EdgeInsets.all(20)
)

 

 

margin의 경우 margin 이라는 파라미터에 EdgeInsets라는 값을 넣어주고 뒤에 옵션과 함께 마진 값을 넣어주게 된다.

EdgeInsets뒤 all 이라는 것은 모든 면에 마진값을 넣어준다는 뜻 이며, 방향마다 다른 값을 넣어주고 싶을 경우에는

 

body: Container:(
	width : 150, height, 150, color : Colors.blue,
	margin : EdgeInsets.fromLTRB(Left, Top, Right, Bottom)
)

 

해당 코드와 같이 Left, Top, Right, Bottom 순서대로 마진 값을 넣어주면 된다.

 

 

 

2. padding

padding의 경우 margin과 큰 차이가 없다

body: Container(
	 width: 150, height: 150, color: Colors.blue,
     padding : EdgeInsets.fromLTRB(10, 30, 0, 0),
     child : Text("hhhhhhh"),
    )

margin과 설정 방법이 동일하며 결과값을 확인해보기 위해 Container 안에 Text를 만들어 표현해주었다.

 

 

3. border

border의 경우 width, height, color과 같이 단독으로 값을 넣어주는 것이 아닌 decoration이라는 값의 파라미터에서도 Boxdecoration이라는 위젯에 border라는 파라미터에 값을넣어 제작해준다

body: Container: (
	width: 150, height: 150,
    	decoration: BoxDecoration(
    	border: Border.all(color: Colors.black),
    )
 )

이때 Container의 color 파라미터를 제거하는 이유는 color의 두번 정의로 인해 오류가 나기 때문에 제거하였다.

 

만약 박스 안의 컬러를 지정해주고 싶은 경우 Container의 값에 파라미터를 넣어 작업하는 것이 아닌 BoxDecoration안의 파라미터에 color를 지정해 작업해주면 된다.

 

body: Container: (
	width: 150, height: 150,
    	decoration: BoxDecoration(
        color: (Colors.blue),
    	border: Border.all(color: Colors.black),
    )
 )

 

 

이 외에도 박스에 효과를 주고 싶으면 BoxDecoration 안에서 BoxShadow, borderRadius 등의 파라미터에 값을 넣어주면 된다.

 

 

4. 박스 위치 정렬하기

저번 강의에서 박스를 정렬할 때 Center()로 감싸주면 해당 위젯에 맞게 작동된다고 하였는데 더 쉽게 정렬하는 방법에 대해 알아보고자 한다.

 

 

 

Container에 커서를 가져다 대면 왼쪽에 전구 표시가 뜨게 된다.

 

 

 

전구를 클릭하게 된 경우 자동으로 감싸게 될 옵션을 선택할 수 있게 되는데, 난 Center로 감쌀 수 있도록 선택하겠다.

 

 

해당 옵션을 클릭하게 되면

 

 

코드를 지웠다가 다시 붙여넣기를 할 필요 없이 자동으로 감싸져서 편리하게 사용할 수 있다!

 

 

 

4-1. 다양한 위치의 정렬

위에서 가운데 정렬과 함께 자동완성을 배웠다. 그럼 실제 정렬에 대해 알아보자.

 

가운데 정렬 외 왼쪽 정렬, 하단 정렬 등 다른 위치에서의 정렬은 이런식으로 진행된다.

body: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
              width: 150, height: 150,
              decoration: BoxDecoration(
                color: (Colors.blue),
                border: Border.all(color: Colors.black),
              ),
            ),
        ),

 

• bottomCenter : 하단 중앙 정렬
• topCenter : 상단 중앙 정렬 
• BottomRight : 하단 오른쪽 정렬

등 상세한 정보는 공식 문서에서 찾아보면 된다.

 

 

 

5. 박스를 가로로 무한하게 채우는 법

우리가 실제 앱을 제작할때 요소의 값을 특정 값 보다 기기에 꽉 채우는 등의 개발을 더 많이 진행할 것 같다. (기기마다 크기가 다르므로) 때문에 기기의 width 값을 무한으로 지정하는 방법이 있는데 이것이 double.infinity 값이다.

 

 body: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
              width: double.infinity, height: 150,
              decoration: BoxDecoration(
                color: (Colors.blue),
                border: Border.all(color: Colors.black),
              ),
            ),
        ),

 

단, double.infinity는 width 의 값은 부모요소를 넘어가지 않는 선에서 무한으로 적용된다.