3/23 TIL

3790 단어 TILTIL

margin, padding, Align

  1. Container는 좀 무거운 위젯이기때문에 width, height, child만 필요한 박스의 경우 SizedBox를 쓰는 것이 성능상 이득이다.

  2. 박스에 여백을 주고 싶다면 Container 안에 margin(바깥 여백 양), padding(안쪽 여백 양) 을 사용하면 된다. 사용법은 아래와 같다.

    Container(
    	margin: EdgeInsets.all(30),
    	padding: EdgeInsets.fromLTRB(10, 20, 30, 40)
    	//all은 전방향으로 여백을 주는 것이고 LTRB는 원하는 구간에 나눠서 여백을 주는 것이다.
    )
  3. 박스 스타일은 decoration: BoxDecoration() 안에 넣으면 된다. 안에는 색깔, 경계선, 이미지 등 찾아서 넣으면 된다.

    Container(
      decoration : BoxDecoration(
        border : Border.all(color : Colors.black)
      )
    )
  4. 박스를 정렬하려면 Align()안에 Container를 담으면 된다. 참고로 쉽게 넣으려면 그냥 Container 옆에 있는 저 노란색 전구 눌러서 Wrap with ~~ 눌러서 한번 감싼 뒤에 내가 원하는 걸로 바꾸면 된다.

    Align() 안에는 alignment: Alignment.원하는방향 로 원하는 방향으로 정렬할 수 있다.

    body: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
  5. 박스 폭을 꽉차게 주려면 Container의 width, height 를 무한히 주면 된다. 이 둘은 double값이므로 무한히 주려면 double.infinity 하면 된다. 하지만 이래도 부모 박스의 폭을 넘어가지 않는다.

    body: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          width: double.infinity, height: double.infinity,

    width와 height를 모두 무한히 줘도 부모 박스인 body의 값을 넘어가지 않는다.

좋은 웹페이지 즐겨찾기