ambient_gradient_border

ambient_gradient_border 패키지는 Flutter 앱에서 사용할 수 있는 아름다운 애니메이션 그라데이션 테두리 효과를 제공하는 라이브러리입니다. 어두운 배경에서 최적의 효과를 나타내며, 위젯에 현대적인 글로우 효과를 추가할 수 있습니다.

The ambient_gradient_border package is a library that provides beautiful animated gradient border effects for Flutter apps. It delivers optimal effects on dark backgrounds and adds modern glow effects to widgets.

RPReplay_Final1744108764

특징 / Features

  • 부드러운 그라데이션 테두리 애니메이션 / Smooth gradient border animation
  • 사용자 정의 가능한 글로우 효과 / Customizable glow effects
  • 커스텀 모서리 반경 지원 / Custom corner radius support
  • 간단한 API로 모든 Flutter 위젯과 함께 사용 가능 / Simple API that works with all Flutter widgets
  • 다양한 조절 가능한 파라미터로 시각적 효과 커스터마이징 / Visual effect customization with various adjustable parameters

설치 / Installation

pubspec.yaml에 패키지 추가: / Add the package to pubspec.yaml:

dependencies:
  ambient_gradient_border: ^0.1.0

기본 사용법 / Basic Usage

import 'package:flutter/material.dart';
import 'package:ambient_gradient_border/ambient_gradient_border.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black, // 어두운 배경 권장 / Dark background recommended
      body: Center(
        child: AmbientGradientBorder(
          width: 300,
          height: 150,
          strokeWidth: 4.0,
          radius: 30.0,
          gradientColors: const [
            Colors.deepOrangeAccent,
            Colors.redAccent,
            Colors.purpleAccent,
            Colors.blueAccent,
            Colors.deepOrangeAccent,
          ],
          glowSpread: 12.0,
          glowWidthMultiplier: 3.5,
          showSharpBorder: true,
          child: Container(
            child: Center(
              child: Text(
                'Ambient Gradient',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

속성 / Properties

속성 / Property 설명 / Description 기본값 / Default 필수 여부 / Required
width 위젯의 전체 너비 / Total width of the widget - 필수 / Required
height 위젯의 전체 높이 / Total height of the widget - 필수 / Required
strokeWidth 테두리 선의 두께 (픽셀) / Border line thickness (pixels) - 필수 / Required
radius 테두리 모서리의 반경 / Border corner radius - 필수 / Required
gradientColors 그라데이션에 사용할 색상 목록 (최소 2개) / List of colors for gradient (minimum 2) - 필수 / Required
glowSpread 글로우 효과의 퍼짐 정도 (블러 시그마 값) / Glow effect spread (blur sigma value) - 필수 / Required
glowWidthMultiplier 글로우 효과의 두께 배율 / Glow effect thickness multiplier - 필수 / Required
child 테두리 내부에 표시할 위젯 / Widget to display inside the border - 필수 / Required
animationDuration 그라데이션 애니메이션 한 사이클의 지속 시간 / Duration of one gradient animation cycle Duration(seconds: 5) 선택적 / Optional
showSharpBorder 선명한 외곽선 표시 여부 / Whether to show sharp outline false 선택적 / Optional

고급 사용법 / Advanced Usage

AmbientGradientBorder는 다양한 매개변수를 조절하여 원하는 효과를 만들 수 있습니다:

AmbientGradientBorder allows you to create desired effects by adjusting various parameters:

AmbientGradientBorder(
  width: 320,
  height: 220,
  strokeWidth: 8.0,
  radius: 24.0,
  gradientColors: [
    Colors.red,
    Colors.green,
    Colors.blue,
  ],
  glowSpread: 5.0,
  glowWidthMultiplier: 2.0,
  animationDuration: Duration(seconds: 3),
  showSharpBorder: false,
  child: YourWidget(),
)

사용 팁 / Usage Tips

  1. 최상의 글로우 효과를 위해 어두운 배경에서 사용하세요. / Use on dark backgrounds for the best glow effect.
  2. 글로우 효과의 퍼짐 정도는 glowSpread 값으로 조절할 수 있습니다. / The glow effect spread can be adjusted with the glowSpread value.
  3. 테두리의 두께는 strokeWidth로, 글로우의 두께는 glowWidthMultiplier로 조절할 수 있습니다. / Border thickness can be adjusted with strokeWidth, and glow thickness with glowWidthMultiplier.
  4. 외곽선이 필요 없고 글로우 효과만 원하는 경우 showSharpBorder를 false로 설정하세요. / If you only want the glow effect without an outline, set showSharpBorder to false.
  5. 그라데이션 색상 목록의 첫 번째와 마지막 색상을 동일하게 설정하면 부드러운 순환 효과를 얻을 수 있습니다. / Setting the first and last colors in the gradient color list to be the same creates a smooth cycling effect.

예제 앱 / Example App

패키지에 포함된 예제 앱에서 다양한 매개변수를 조절하며 효과를 직접 확인할 수 있습니다:

You can try different parameters and see the effects directly in the example app included with the package:

cd example
flutter run

Libraries

ambient_gradient_border