자식 위젯 한개를 포함하며 코기를 지정할 수 있다.
만약, 크기를 지정하지 않으면 자식 위젯의 크기에 맞춰지고 (자식 위젯의 크기가 지정되어있어야함)
자식 위젯이 없거나 크기가 지정되어 있지 않으면 width와 height는 최대값으로 고정됨
build(BuildContext context) {
return MaterialApp(
title: 'Container',
home: Scaffold(
appBar: AppBar(
title: Text('Container'),
centerTitle: true,
),
body: Container(
width: 300,
height: 300,
// 패딩 속성
padding: EdgeInsets.all(50),
// 마진 속성
margin: EdgeInsets.all(50),
// 컨테이너 꾸미기
decoration: BoxDecoration(
// 컨테이너의 background color
color: Colors.cyanAccent,
// 컨테이너의 border 모양
borderRadius: BorderRadius.all(
Radius.circular(70),
),
// 컨테이너의 그림자
boxShadow: [
BoxShadow(
color: Colors.grey[600],
blurRadius: 20,
spreadRadius: 2,
),
],
// border 꾸미기
border: Border.all(
color: Colors.black,
width: 3,
),
),
child: Text(
"컨테이너",
style: TextStyle(fontSize: 50),
),
),
),
);
}
Widget
Container의 BoxDecoration 속성을 이용해서 그라디언트 버튼을 만들 수 있다.
padding
속성을 사용하여 설정하며, 이 값은 요소 내부의 여백을 픽셀 또는 다른 길이 단위로 지정합니다.margin
속성을 사용하여 설정하며, 이 값은 요소 주변의 여백을 픽셀 또는 다른 길이 단위로 지정합니다.Container(
height: 44.0,
decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.pink, Colors.green])),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(backgroundColor: Colors.transparent, shadowColor: Colors.transparent),
child: Text('Elevated Button'),
),
)
Container를 이용해 만들 수 있다.
class GradientButton extends StatelessWidget {
final String? label;
final IconData? icon;
final VoidCallback? onPressed;
const GradientButton({
super.key,
this.label,
this.icon,
this.onPressed,
}) : assert(label != null || icon != null, 'Label or icon must be provided.');
Widget build(BuildContext context) {
return Container(
height: 55.0,
decoration: BoxDecoration(
gradient: CGColor.gradient,
borderRadius: BorderRadius.circular(Const.radius.r14)),
child: ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (icon != null) Icon(icon, size: 18.0),
if (icon != null && label != null)
SizedBox(width: Const.spacing.s8),
if (label != null)
Text(
label!,
textAlign: TextAlign.center,
style: CGTextStyle.title3.copyWith(color: CGColor.white),
),
],
),
),
);
}
}