패키지, 저장소 및 앱 카테고리 검색

패키지 상세v1.1.0

blurred

blurred - Flutter 위젯과 이미지를 흐리게 만드는 가장 쉬운 방법입니다.

30일 다운로드
46
좋아요
10
Pub 점수
40

패키지 설치

flutter pub add blurred

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

블러 패키지는 플러터에서 위젯과 이미지에 블러 효과를 적용하는 간단하고 효율적인 방법을 제공합니다. ShaderMask와 CustomPaint 사용의 복잡성을 추상화하여 부드럽고 실시간 블러링을 구현할 수 있는 깔끔한 API를 제공합니다. UI 컴포넌트의 시각적 깊이를 강조하거나 배경 효과나 오버레이를 만들기에 이상적입니다. 패키지는 가볍고 쉽게 통합할 수 있으며, 단일 import와 최소한의 코드만 필요합니다. 이미지 및 위젯 블러링을 지원하며, 사용자 정의 가능한 블러 강도를 제공합니다.

사용 사례

  • 흐린 배경 만들기
  • 블러 효과를 통한 UI 깊이 강화
  • 모달 오버레이 구현
  • 카드 또는 컨테이너 하이라이트 설계
  • 이미지에 미세한 시각적 효과 추가
  • 사용자 인터페이스 미적 요소 향상

주요 기능

  • 블러 적용을 위한 간단한 API
  • 위젯과 이미지 둘 다 지원합니다
  • 사용자 정의 블러 강도
  • 경량이고 성능이 뛰어남
  • Flutter 프로젝트와의 간편한 통합
  • 실시간 블러 렌더링

적합한 대상

  • 시각적 향상을 원하는 UI 디자이너
  • 현대 앱 인터페이스를 구축하는 개발자
  • 배경 흐림 효과가 필요한 프로젝트
  • 동적 또는 상호작용 배경을 가진 앱
  • 시각적으로 풍부한 화면의 프로토타이핑

고려 사항

  • 저사양 기기에서 성능에 영향을 미칠 수 있습니다
  • 블러 품질은 원본 이미지 해상도에 따라 달라집니다
  • 블러 반경을 초과한 사용자 정의는 제한적입니다
  • 매우 큰 위젯에 최적화되지 않음
  • 중간 블러 강도에 가장 적합

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

blurred

An easy way to blur your widgets and images.

blurred example

Usage

Blurred(
  Text(
    "Hello World!",
    style: TextStyle(
      fontSize: 72,
    ),
  ),
  blurValue: 3,
)

Output:

Hello World


Check the example for BlurredImage example


Acrylic

Acrylic

To easily create a container with an acrylic effect.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Acrylic Header',
      theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(12, 10, 30, 1),
      body: Stack(
        children: [
          ListView.builder(
            itemBuilder: (_, __) => ListTile(
              leading: Icon(Icons.ac_unit_rounded, size: 30),
              title: Text('Lorem Ipsum'),
            ),
          ),
          SizedBox(
            height: 80,
            child: Acrylic(
              child: Center(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    FlutterLogo(size: 40),
                    SizedBox(width: 10),
                    Text('Acrylic Header', style: TextStyle(fontSize: 40)),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
Output

Acrylic Example

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.