Description:

neonpen

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';
copied to clipboard

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),
],
),
),
);
}
copied to clipboard

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

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter