자식 위젯의 크기를 지정할 수 있는 위젯인
Container & SizedBox를 알아보겠습니다.
위젯이란?
-
플러터에서 위젯은 사용자 인터페이스를 구성하는 기본적인 구성 요소
-
플러터에서는 다양한 종류의 위젯을 사용하여 애플리케이션의 UI를 구성할 수 있음
-
위젯의 수는 매우 많음. 플러터 == 위젯할 정도
-
기본적으로 위젯 내의 차일드의 크기 만큼만 차지
-
즉, 내가 텍스트 위젯을 사용했다면, 내가 사용한 글자 만큼만 크기가 지정이 된다!!!
-
Container & SizedBox가 자식 위젯 크기를 지정해 줄 수 있음
Container
-
자식 위젯의 크기를 지정하는 위젯
- Text위젯이나 Image위젯 등을 감싸서 크기를 지정한다고 생각하면 쉽습니다.
-
추가로, 마진, 패딩, 배경색 등 다양한 스타일도 꾸며줄 수 있다
-
마진 주는 방법
- 마진1.fromLTRB(left, top, right ,bottom)
- 마진2. all(double->int)
- 마진3. only() -{named method}
-
borderRadius 주는 방법
-
지정한 만큼 radious 주기
borderRadius: BorderRadius.only(topLeft: Radius.circular(50),bottomLeft: Radius.circular(50)) -
모든 면에 radious 주기
borderRadius: BorderRadius.all(Radius.circular(100))
-
-
- 코드로 알아보는 Container
class Ex01Container extends StatelessWidget {
const Ex01Container({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
// 숫자의 단위는 lp
width: 200,
height: 200,
// 마진 1.fromLTRB(left, top, right ,bottom)
// margin: EdgeInsets.fromLTRB(16, 16, 16, 16),
// 마진2. all(double->int)
// margin: EdgeInsets.all(24.0),
// 마진3. only() -{named method}
// 메소드 매개변수가 순서와 상관없이 이름으로 값을 대입
margin: EdgeInsets.only(top:20, left:10),
// 패딩 : 마진과 동일
// padding: EdgeInsets.only(top: 30, right: 20, left: 30, bottom: 30),
alignment: Alignment.center,
// color: Colors.blueAccent,
// color와 decoration은 같이 있을 수 없다.
decoration: BoxDecoration(
color: Colors.pink,
border: Border.all(color: Colors.black, width: 8, style: BorderStyle.solid),
// 지정한 만큼 radious 주기
//borderRadius: BorderRadius.only(topLeft: Radius.circular(50),bottomLeft: Radius.circular(50))
// 모든 면에 radious 주기
// borderRadius: BorderRadius.all(Radius.circular(100))
borderRadius: BorderRadius.circular(77)
),
child: Text('Hello world', style: TextStyle(fontSize: 32),
// textAlign: TextAlign.center,
),
),
),
);
}
}-
결과
-
이런식으로 자식인 텍스위젯의 크기 조정 및 스타일을 지정할 수 있답니다.
Container를 활용해 아이콘 만들기
- 코드
class Ex02MakeIcon extends StatelessWidget {
const Ex02MakeIcon({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Row(
children: [
Container(
width: 120,
height: 120,
margin: EdgeInsets.fromLTRB(32, 32, 0, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.green[500],
),
child: Icon(
Icons.call,
color: Colors.white, // 아이콘의 색상 설정
size: 80.0, // 아이콘의 크기 설정
),
),
Container(
width: 120,
height: 120,
margin: EdgeInsets.fromLTRB(32, 32, 0, 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.red[500],
),
child: Icon(
Icons.camera_alt_outlined,
color: Colors.white, // 아이콘의 색상 설정
size: 80.0, // 아이콘의 크기 설정
),
),
],
),
)
);
}
}- 결과
가로(세로) 길이 꽉차게 하기
class Ex03width extends StatelessWidget {
const Ex03width({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
height: 100,
//가로(세로)가 꽉 차게하는 코드
// double.infinity
width: double.infinity,
color: Colors.grey,
),
),
);
}
}
SizedBox
-
container : 자식위젯의 크기를 결정 & 꾸미기(color, border ...)
- 특징 : 기능이 많아 더 무겁다...꾸미지 않을거면 sizedBox 꾸밀거면 컨테이너
-
SizedBox : 자식위젯의 크기를 결정
-
width, height 만 조정 가능
-
Row, column의 위젯들 간 사이 공간을 만들기 위해 사용
-
class Ex04SizedBox extends StatelessWidget {
const Ex04SizedBox({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Row(
children: [
Text('Hello'),
SizedBox(
width: 120,
height: 120,
// child: Text('Hello World!'),// 컬러나 보더를 확인하기 어려움
),
Text("world"),
],
),
),
);
}
}-
결과
- 이런식으로 위젯 사이에 공간을 주고 싶은데 사용한답니다!.
Container & SizedBox를 활용한 예제
- 코드
\class Ex05Kakao extends StatelessWidget {
const Ex05Kakao({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
height: 50,
margin: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.yellowAccent,
borderRadius: BorderRadius.circular(10)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'image/klogo.png',
width: 30,
height: 30,
),
SizedBox(
width: 20,
),
Text("카카오톡으로 로그인하기"),
],
),
),
),
);
}
}
promising