[Flutter] BoxDecoration 에서 gradient 넣는 법 예시

BoxDecoration에 그라디언트(gradient)를 적용하려면 gradient 속성을 사용하여 그라디언트를 정의하고 지정해주어야 합니다. 아래는 그라디언트를 사용하는 예제 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('그라디언트가 적용된 원'),
        ),
        body: Center(
          child: GradientCircleWidget(),
        ),
      ),
    );
  }
}

class GradientCircleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200.0,
      height: 200.0,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: RadialGradient(
          colors: [
            Colors.blue,
            Colors.green,
          ],
          center: Alignment.center,
          radius: 0.7,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 5.0,
        ),
      ),
    );
  }
}

이 코드에서는 BoxDecoration의 gradient 속성을 사용하여 RadialGradient를 정의하고 있습니다. RadialGradient는 중심을 중심으로 반경에 따라 색상이 변경되는 그라디언트를 나타냅니다. colors 속성에는 그라디언트의 시작과 끝 색상이 포함된 리스트를 지정합니다. 그라디언트의 중심은 Alignment.center로 지정하고, radius는 그라디언트의 반경을 나타냅니다.

원하는 그라디언트 효과에 따라 LinearGradient, SweepGradient 등의 다른 그라디언트를 사용할 수 있습니다. 이를 통해 배경이나 테두리에 다양한 그라디언트 효과를 적용할 수 있습니다.