[Flutter] 기본 위젯 4가지(Text, Icon, Image, Container)

글자넣는 Text()

Text(
  '텍스트',
  style: TextStyle(
    fontSize: 24, // 폰트 크기
    fontWeight: FontWeight.bold, // 폰트 두께
    color: Colors.red, // 폰트 색상
  ),
),

아이콘 넣을 땐 Icon()

Icon(Icons.star)

이미지 넣고 싶으면

Image.asset('assets/dog.png')
Image.network("이미지url"),

네모 박스 넣을 땐 Container(), SizedBox()

Container(
  width: 200, // 폭
  height: 200, // 높이
  color: Colors.green, // 박스 색상
  child: Text("This is Container"), // 자식 위젯
),

: Container()는 특정 공간을 책임지는 위젯

: SizedBox()는 사이즈만 필요하면 이거 쓰면 됨(똑같은 박스 위젯인데 훨씬 가벼움)

 

<특징>

• child를 넣을 수 있다.
• 위젯 width, height, margin, padding, flutter inspector를 사용할 수 있다.

Container() 여백주기 : margin, padding

margin: EdgeInsets.all(30), //바깥여백양
padding: EdgeInsets.fromLTRB(10, 20, 30, 40), //안쪽여백양

Container() 꾸미기 : BoxDecoration()

Container(
  decoration : BoxDecoration(
    border : Border.all(color : Colors.black)
  )
)

* BoxDecoration() 안에 넣을 수 있는 것들은 color, shape, boxShadow, gradient, image, borderRadius 등등이 있습니다~

 

박스정렬하기 : Align()

Center()안에 자식으로 담으면 중앙정렬

Align()안에 자식으로 담으면 좌상단 우하단 정렬

Align(
  alignment : Alignment.bottomLeft,
  child : Container( width : 50, height : 50, color : Colors.blue )
)

 

박스 폭 가로 꽉차게 : double.infinity

Container( width : double.infinity, height : 50, color : Colors.blue )