Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
neonpen cover
Package detailsv2.0.5

neonpen

A Flutter package to add a Neon Pen style on text.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
23
Likes
12
Pub points
140

Install package

flutter pub add neonpen

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

NeonPen is a Flutter package that enables developers to apply a vibrant neon pen-style effect to text, creating eye-catching visual displays. It enhances text with glowing outlines and dynamic color shifts, ideal for modern UIs and interactive applications. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent styling across devices. With minimal setup via the pub command, it integrates smoothly into existing Flutter projects. Perfect for adding flair to titles, buttons, or any text element requiring standout aesthetics.

Use cases

  • Adding glowing text effects in apps
  • Creating visually engaging UI elements
  • Enhancing game or dashboard interfaces
  • Designing promotional or marketing screens
  • Implementing animated text labels
  • Improving user engagement through visual appeal

Key features

  • Glowing neon text effects
  • Dynamic color transitions
  • Cross-platform compatibility
  • Simple integration with pub
  • Customizable glow intensity
  • Supports all major Flutter platforms

Suitable for

  • UI/UX designers seeking visual impact
  • Developers building games or dashboards
  • App creators focusing on modern aesthetics
  • Teams working on web and mobile apps simultaneously
  • Frontend developers wanting quick animation effects

Considerations

  • May impact performance on low-end devices
  • Requires careful contrast management for readability
  • Best suited for short text elements
  • Not recommended for body text or accessibility-critical content
  • Color choices should consider screen brightness and viewing conditions

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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

Categories

Text Decoration, Effect & Animation

Source repository

Projects using this package

No data available yet.