📦박스📦 잘 그려야 앱 잘 만든다!!!!

ㅇㅈ...

 

오늘의 차례

1. 박스 여백 주는 법: margin, padding 파라미터

1-1. margin 적용 전후

1-2. padding 적용 전후

2. 박스 기타 꾸미는 옵션들: decoration

3. 박스 Center()말고도 다르게 정렬 바꾸는 법: Align()

4. 나 혼자 해보기

---

 

 

1. 박스 여백 주는 법: margin, padding 파라미터

1-1. magin 적용 전후

 

margin: 바깥쪽 여백

margin 파라미터를 쓰지 않으면 박스가 왼쪽 위에 딱 붙어버린다.

 

1-2. padding 적용 전후

padding: 안쪽 여백

padding 파라미터만 쓰면 차이를 모르기 때문에 잠깐 박스 안에 글자를 넣어서 테스트한 것.

child를 사용해서 텍스트 추가!

왼쪽은 박스의 왼쪽 위에 딱 붙어서 텍스트가 나오기 때문에 가독성/판독성이 떨어짐.

우측은 패딩을 적용해서 글자가 안정적으로 안쪽으로 나옴!!

 

 

 

 

 

2. 박스 기타 꾸미는 옵션들: decoration

나머지 박스에 선 넣는 등 찌끄레기(???) 설정들은 decoration이라는 파라미터를 사용해야한다고 함

이걸 안쓰면 이렇게 에러 뜸...

난 그냥 따라했는데 에러 나오게 일부러 보여준 거였음 ㅋㅋㅋㅋ;;;;

컬러를 위 아래 두번 정의하고 있어서 그런 것 같다며…

이런 에러는 중복을 방지해주는 에러이기 때문에 당황하지 말고 구글 찾아보면 된다 함.

위에 있던 박스 컬러를 blue로 정의했던 부분만 빼주면 에러가 사라짐!

선을 분명 나는 grey로 해줬는데 왤케 찐하냥… 나중에 해시값 넣을 수 있겠지 모,,,

섬세한 박스 디자인이 필요하다면 decoration 파라미터를 쓰는 걸로 기억!!!

(radius, shadow 등 더 다양한 옵션 있음)

 

 

 

 

 

3. 박스 Center()말고도 다르게 정렬 바꾸는 법: Align()

박스를 다시 정중앙으로 보내고 하고 싶으면

child 다시 써서 머 어쩌구저쩌구 해도 되지만

이렇게 Container 선택 해주고 뜨는 전구 눌러써 Wrap with Center로 묶어주는 것도 방법이라고 한당.

어제 숙제하면서 전구 찾아서 잘 해결해서 다행이다... ㅎ

그러면 이렇게 정중앙으로 가는데, 왼쪽 기준이나 아래쪽 기준으로 정렬하고 싶을 수도 있잖어?

그건 Align() 위젯 사용하면 된다 함.

(근데 내 타이틀은 언제 저렇게 가운데로 간걸가…?? 처음부터였나 혹시…????)

 

Align() 위젯을 쓰면 alignment라는 파라미터를 쓸 수 있고,

자동완성 목록을 보면 이렇게 다양하게 할 수 있당.

👆 Figma의 Constraints 기능 생각하면 딱임!

 

 

 

부모 박스를 꽉 채우고 싶으면 이렇게 double.infinity를 입력하면 된다고 함.

(나는 강의처럼 width에 써봤는데, 빨간 전구 떠서 height랑 자리를 바꾸라길래 걍 그렇게 했음 ㅇㅅㅇ… 뭔 차인지는 모르겠음…)

이 상태면 Scaffold나 MaterialApp(부모)의 폭을 넘지 않는 선에서 꽉 채워준다고 함!

 

 

 

 

 

 

4. 나 혼자 해보기

자동 완성으로 뜨는 컬러 아무거나 적용해보기!

border는 orange로 적용해보았다 ㅎㅎ

 

아까 텍스트 넣었던 걸 더 예쁘게 해보고 싶어서, 텍스트가 있는 카드 UI를 만들어봤다!

return MaterialApp(
      home: Scaffold(
        appBar: AppBar( title: Text('앱임') ),
        body: Align(
          alignment: Alignment.topCenter,
          child: Container(
            height: 160, width: double.infinity,
            margin: EdgeInsets.fromLTRB(16, 24, 16, 24),
            padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
            child: Text('안녕하세용'),
            decoration: BoxDecoration(
              color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(color: Colors.grey),
            ),
            ),
          ),
        ),

      );

 

재밌다 재밌어 깔깔