A Flutter package to add a Neon Pen style on text.
There are options for color, opacity, ziggle, double layer and so on.
Add neonpen: ^2.0.5 to your pubspec.yaml dependecies. And import it:
import 'package:neonpen/neonpen.dart';
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),
],
),
),
);
}
| 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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent