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 |
