Flutter - Widget(Spacer, Padding, Image, Expanded, SizedBox, Divider

Spacer Widget

Row나 Column에서 위젯 사이의 간격을 조정하는 데 사용, 사용 가능한 모든 공간을 차지함

// Middle과 End의 간격은 Begin 과 Middle 간격의 2배
const Row(
  children: <Widget>[
    Text('Begin'),
    Spacer(), // 기본 flex 1
    Text('Middle'),
    Spacer(flex: 2),
    Text('End'),
  ],
)

Padding Widget

자식 위젯 주변에 여백을 주는 위젯

사용 방법

• 상하좌우 모두
  • EdgeInsets.all(8.0)
• 좌우 만
  • EdgeInsets.symmetric(vertical: 8.0)
• 상하 만
  • EdgeInsets.symmetric(horizontal: 8.0)
• 상하좌우 각각 지정
  • EdgeInsets.only(left: 40.0) , EdgeInsets.only(right: 40.0)

Image Widget

이미지를 삽입하는 위젯

사용 방법

• 네트워크

  • 인터넷의 이미지를 바로 사용

    Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

• Asset

  • 프로젝트에 추가해준 이미지 사용

    Image.asset('assets/image.png')

• File

  • 디바이스 내 저장된 사진 사용

    Image.file(File('디바이스_내_파일경로'))

• 메모리

  • 메모리 내에 있는 이미지 사용

    Image.memory(bytes)

Expanded Widget

Row, Column 내에서 남은 공간을 확장하여 공간을 채울 수 있도록 하는 위젯

  const Expanded({
    super.key,
    super.flex,
    required super.child,
  }) : super(fit: FlexFit.tight);

SizedBox Widget

width, height의 크기를 가지는 빈 상자, 상자 내에 위젯을 배치할 수도 있으며 빈 상자로도 사용 가능

SizedBox(
  width: 200.0,
  height: 300.0,
  // SizedBox도 DecoratedBox를 이용해서 색상 커스텀이 가능하다
	child: DecoratedBox(
		decoration: BoxDecoration(
			color: Colors.grey[400],
        ),
	),
)

Column(
	children:[
		Text("1"),
		SizedBox(height:10),
		Text("2"),
	]
)

// SizedBox의 width와 height의 크기가 같은 때
SizedBox.square(
dimension: 250, // width와 height의 크기가 동일하게 250으로 설정된다.
child: <Widget>(),
)

Divider Widget

단순하게 하나의 라인을 그리고 싶을 때 사용하는 위젯

Divider(),