blur

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Blur é um pacote do Flutter que fornece widgets wrapper para aplicar efeitos de desfoque a widgets ou imagens filhas. Inclui ImageBlur.asset e ImageBlur.network para desfocar imagens de recursos locais ou URLs remotas. O widget Frost oferece desfoque de fundo, ideal para criar efeitos de vidro fosco. Projetado para uso em múltiplas plataformas, suporta Android, iOS, Web, macOS, Windows e Linux. O pacote simplifica a implementação de profundidade visual e elementos modernos de interface com pouquíssimo código.

Casos de uso

Criando interfaces de vidro fosco
Adicionando efeitos de desfoque de fundo
Desfocar imagens dos recursos
Imagens de rede desfocadas
Aumentando a profundidade visual nas interfaces
Implementando camadas de desfoque sobrepostas

Principais recursos

ImageBlur.asset para imagens locais
ImageBlur.network para imagens remotas
Widget de geada para desfoque de fundo
Compatibilidade multiplataforma
API simples com widgets de envoltório
Leve e fácil integração

Indicado para

Designers de UI procurando estética moderna
Desenvolvedores construindo interfaces imersivas
Aplicativos que exigem camadas visuais
Projetos usando sobreposições de imagem
Equipes direcionadas para múltiplas plataformas
Aplicativos Flutter com designs de vidro fosco

Considerações

Impacto no desempenho em layouts complexos
Opções limitadas de personalização para intensidade do desfoque
Pode exigir otimização em dispositivos de baixa potência
Não adequado para animações de alto desempenho
Melhor usado com conteúdo estático ou pouco atualizado
Depende das capacidades específicas da plataforma para renderização

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Blur is a wrapper widget that blur it's child. There are ImageBlur.asset and ImageBlur.network that blur the image. Frost is another wrapper which blurs the background.

Getting Started

To use this package, add blur as a dependency in your pubspec.yaml file.

blur

Add dependency

dependencies:
  blur: ^4.0.0

Import

import 'package:blur/blur.dart'

Usage

Blur(
  blur: 2.5,
  blurColor: Theme.of(context).primaryColor,
  child: Padding(
    padding: EdgeInsets.all(8.0),
    child: Text(
      'Blur',
      style: Theme.of(context).textTheme.headline3,
    ),
  ),
),

Output

blur_text

Normal Image

normal_image

Using extensions

Input

 Image.asset('assets/cat.png').blurred(
     colorOpacity: 0.2,
     borderRadius: BorderRadius.horizontal(right: Radius.circular(20)),
     blur: blurValue,
     overlay: Text(
       'Cat',
       style: theme.textTheme.headline2!.copyWith(color: theme.scaffoldBackgroundColor),
     ),
   ),

Output

blur_image

Frost

Stack(
  alignment: Alignment.center,
  children: [
    Image.asset(
      'assets/cat.png',
      scale: 3.5,
    ),
    Text(
      'Frost',
      style: theme.textTheme.headline4,
    ).frosted(
       blur: blurValue,
       borderRadius: BorderRadius.circular(20),
       padding: EdgeInsets.all(8),
     ),
  ],
),