Flutter - Widget(AppBar, Container, ClipRRect, aspectRatio)

AppBar Widget

Scaffold 에서 최상단에 배치되는 위젯

Container Widget

Container는 decoration을 통해 자식위젯의 비율이나 색상 등을 꾸밀 수 있다.
이 때, decoration의 BoxDecoration의 color에도 값을 지정하면 에러가 난다.

• 기본 모형

Container(
  margin: const EdgeInsets.all(10.0),
  color: Colors.amber[600],
  width: 48.0,
  height: 48.0,
)

• 테두리: border

// 상하좌우 모두
Border.all(
	width: 2.0, // 테두리 
	color: const Color(0xFFFFFFFF) // 색상
)

// 상하좌우 각각
- 모서리 둥글기 : borderRadius
	- 전체

// all 생성자에는 Radius 타입이
BorderRadius.all(Radius.circular(10))
// circular 생성자에는 double 타입이 들어감
BorderRadius.circular(10)

• 가로 각각 지정

// 왼쪽만
BorderRadius.horizontal(left: Radius.circular(10))
// 오른쪽만
BorderRadius.horizontal(right: Radius.circular(10))
// 모두 다
BorderRadius.horizontal(left: Radius.circular(10), right: Radius.circular(10))

• 세로 각각 지정

// 위쪽만
BorderRadius.horizontal(top: Radius.circular(10))
// 아래쪽만
BorderRadius.horizontal(bottom: Radius.circular(10))
// 모두 다
BorderRadius.horizontal(top: Radius.circular(10), bottom: Radius.circular(10))

• 각각 지정

// 왼쪽 윗 부분만
// 나머지 부분들은 topRight, bottomLeft, bottomRight 속성으로 지정가능
BorderRadius.horizontal(topLeft: Radius.circular(10))

컨테이너 내부 텍스트 정렬

alignment: Alignment.옵션

ClipRRect Widget

다른 설정없이 테두리만 둥글거나 깍고 싶다면 이 위젯을 사용하면 된다.

ClipRRect(
  borderRadius: BorderRadius.circular(10),
  child: Image.assets("assets/test.jpg"),
),

aspectRatio Widget

// 16:9 비율의 초록상자
AspectRatio(
  aspectRatio: 16 / 9,	// 가로 / 세로
  child: Container(
    color: Colors.green,
  ),
)