[Flutter] 그라디언트 버튼 만들어 사용하기 with Container

Container?

자식 위젯 한개를 포함하며 코기를 지정할 수 있다.

만약, 크기를 지정하지 않으면 자식 위젯의 크기에 맞춰지고 (자식 위젯의 크기가 지정되어있어야함)

자식 위젯이 없거나 크기가 지정되어 있지 않으면 width와 height는 최대값으로 고정됨

@override
  Widget 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),
          ),
        ),
      ),
    );
  }

Container의 BoxDecoration 속성을 이용해서 그라디언트 버튼을 만들 수 있다.

• 번외) Padding 과 Margin
  1. 패딩(Padding)
     • 패딩은 요소 내부의 여백(공백)을 나타냅니다. 즉, 요소의 내부 콘텐츠와 요소의 경계(테두리) 사이의 공간입니다.
     • 패딩은 요소의 내부 컨텐츠에 대한 간격을 조절하기 위해 사용됩니다. 예를 들어, 텍스트 블록 주위에 패딩을 추가하여 텍스트와 테두리 사이의 공간을 조절할 수 있습니다.
     • 주로 padding 속성을 사용하여 설정하며, 이 값은 요소 내부의 여백을 픽셀 또는 다른 길이 단위로 지정합니다.
  2. 마진(Margin)
     • 마진은 요소와 주변 요소(다른 요소) 사이의 간격을 나타냅니다. 즉, 요소의 외부와 주변 요소 사이의 공간입니다.
     • 마진은 요소와 주변 요소 사이의 간격을 조절하기 위해 사용됩니다. 예를 들어, 두 개의 요소 사이에 간격을 두려면 하나의 요소의 마진을 조절합니다.
     • 주로 margin 속성을 사용하여 설정하며, 이 값은 요소 주변의 여백을 픽셀 또는 다른 길이 단위로 지정합니다.

Gradient Button 만들기

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를 이용해 만들 수 있다.

클래스로 Gradient Button 만들기

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.');

  @override
  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),
              ),
          ],
        ),
      ),
    );
  }
}