Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.
Neonpen
A Flutter package to add a Neon Pen style on text.
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
