Detalhes do pacotev2.0.5

neonpen

Um pacote Flutter para adicionar um estilo de caneta neon ao texto.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 23
Curtidas: 12
Pontos Pub: 140

Instalar pacote

flutter pub add neonpen

Visão geral do pacote

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

NeonPen é um pacote Flutter que permite aos desenvolvedores aplicar um efeito vibrante estilo caneta neon ao texto, criando exibições visuais chamativas. Ele realça o texto com contornos brilhantes e mudanças dinâmicas de cor, ideal para interfaces modernas e aplicações interativas. O pacote suporta múltiplas plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux, garantindo estilos consistentes entre dispositivos. Com instalação mínima via comando pub, integra-se facilmente em projetos existentes do Flutter. Perfeito para adicionar charme a títulos, botões ou qualquer elemento de texto que precise de uma estética destacada.

Casos de uso

Adicionando efeitos de texto brilhante em aplicativos
Criando elementos de interface do usuário visualmente envolventes
Melhorando interfaces de jogo ou painel
Criando telas promocionais ou de marketing
Implementando rótulos de texto animados
Melhorando o engajamento do usuário por meio de apelo visual

Principais recursos

Efeitos de texto neon brilhante
Transições dinâmicas de cor
Compatibilidade multiplataforma
Integração simples com pub
Intensidade de brilho personalizável
Suporta todas as principais plataformas do Flutter

Indicado para

Designers de UI/UX procurando impacto visual
Desenvolvedores construindo jogos ou painéis
Criadores de aplicativos focados em estética moderna
Equipes trabalhando simultaneamente em aplicativos web e móveis
Desenvolvedores front-end querendo efeitos de animação rápidos

Considerações

Pode afetar o desempenho em dispositivos de baixa gama
Requer gerenciamento cuidadoso do contraste para legibilidade
Mais adequado para elementos de texto curtos
Não recomendado para texto principal ou conteúdo crítico para acessibilidade
As escolhas de cor devem considerar o brilho da tela e as condições de visualização

README original

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

Neonpen

A Flutter package to add a Neon Pen style on text.
There are options for color, opacity, ziggle, double layer and so on.

Preview

Installation

Add neonpen: ^2.0.5 to your pubspec.yaml dependecies. And import it:

import 'package:neonpen/neonpen.dart';

How to use

Simply add a Animation List widget with required params.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.red,
              opacity: 0.3,
              emphasisWidth: 5,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 0.5,
              enableLineZiggle: true,
              lineZiggleLevel: 0,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.yellow,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
              opacity: 0.3,
              disableEmphasis: true,
              lineZiggleLevel: 1,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.orange,
              padding: EdgeInsets.only(
                top: -10,
                left: 5,
                right: 5,
              ),
              opacity: 0.3,
              disableEmphasis: true,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.grey,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
              opacity: 0.7,
              emphasisWidth: 5,
              emphasisOpacity: 0.5,
              emphasisAngleDegree: 0.5,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.blue,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
              opacity: 0.3,
              emphasisWidth: 15,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 2,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.purple,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
              opacity: 0.3,
              emphasisWidth: 10,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 2,
              enableLineZiggle: true,
              lineZiggleLevel: 2,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.green,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
              opacity: 0.3,
              emphasisWidth: 5,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 0.5,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: true,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.lime,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
              opacity: 0.3,
              emphasisWidth: 5,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 2,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: true,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.amber,
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
              opacity: 0.3,
              emphasisWidth: 5,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 0.5,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: true,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.indigo,
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
              opacity: 0.3,
              emphasisWidth: 8,
              emphasisOpacity: 0.1,
              emphasisAngleDegree: 0.8,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: true,
            ),
            SizedBox(height: 30),
          ],
        ),
      ),
    );
}

Properties

Attribute	Data type	Description	Default
text	Text	A Text widget that will be covered by neonpen effect	-
color	Color	A color of neonpen style	-
opacity	double	An opacity of neonpen style	0.5
padding	EdgeInsets	A padding of between Text widget and neonpen style	EdgeInsets.symmetric(horizontal: 5)
disableEmphasis	bool	A bool value to disable emphasis effect	false
emphasisWidth	double	The start and end's neonpen style thickness	5.0
emphasisOpacity	double	An opacity of the start and end's neonpen style	0.55
emphasisAngleDegree	double	An angle degree of the start and end's neonpen style	1
enableLineZiggle	bool	Add a ziggle style to neonpen line	false
lineZiggleLevel	double	A level of ziggle style to neonpen line	1
isDoubleLayer	bool	Add a two neopen style on Text widget	false

Categorias

Decoração de Texto, Efeito e Animação

Repositório-fonte

turlvo/neonpen

neonpen

☆ 0 Estrelas⑂ 0 Forks

DartSwift

Projetos que usam este pacote

Ainda não há dados.