simple_neon 1.0.0
simple_neon: ^1.0.0 copied to clipboard
A simple package for neon widgets.
Simple Neon #
A Flutter package featuring a collection of neon-styled widgets and a dynamic starry background, designed to create futuristic and visually striking user interfaces.
✨ Features #
- Neon-Styled Widgets: Buttons, text fields, cards, and text with glowing effects.
- Starry Background: Includes animated stars and shooting stars for dynamic visual appeal.
- Customizable Design: Adjust glow intensity, colors, and other properties.
- Ready-to-Use Components: Pre-built widgets for seamless integration.
- Cross-Platform: Works perfectly on Android, iOS, web, and desktop.
🛠 Installation #
Add the package to your pubspec.yaml:
dependencies:
simple_neon: ^1.0.0
Install it using the Flutter command:
flutter pub get
Import it into your project:
import 'package:simple_neon/simple_neon.dart';
🧩 Widgets Included #
1. NeonButton #
A glowing button with customizable size and color.
NeonButton(
icon: Icons.star,
onPressed: () {
print("Neon Button Pressed!");
},
neonColor: Colors.cyanAccent,
size: 60.0,
);
2. NeonCard #
A container with a neon-glowing border for grouping widgets.
NeonCard(
neonColor: Colors.pinkAccent,
children: [
NeonText(text: "Welcome to Neon World!", neonColor: Colors.greenAccent),
NeonTextButton(
text: "Get Started",
onPressed: () {},
neonColor: Colors.blueAccent,
),
],
);
3. NeonText #
Glowing text with customizable font size and animations.
NeonText(
text: "Futuristic Text",
fontSize: 30,
neonColor: Colors.greenAccent,
);
4. NeonTextButton #
A neon-styled button with press animations and hover effects.
NeonTextButton(
text: "Click Me",
onPressed: () {
print("Neon Text Button Clicked!");
},
neonColor: Colors.orangeAccent,
);
5. NeonTextField #
An input field with a neon-styled border.
NeonTextField(
textValue: _emailController,
hintText: "Enter your email",
neonColor: Colors.pinkAccent,
);
6. PulsingStarsBackground #
A dynamic background with pulsing stars and occasional shooting stars.
PulsingStarsBackground(
maxStars: 100,
spawnDuration: const Duration(milliseconds: 500),
spawnShootingStarDuration: const Duration(seconds: 10),
);
🚀 Example Usage #
Authentication Page with Neon Widgets #
This package includes an example AuthPage widget that demonstrates the integration of neon-styled components in a Login/Register form.
class AuthPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Stack(
children: [
PulsingStarsBackground(),
Center(
child: NeonCard(
neonColor: Colors.blueAccent,
children: [
NeonText(text: "Welcome Back!", fontSize: 24),
NeonTextField(
textValue: _emailController,
hintText: "Email",
neonColor: Colors.greenAccent,
),
NeonTextField(
textValue: _passwordController,
hintText: "Password",
neonColor: Colors.greenAccent,
),
NeonTextButton(
text: "Login",
onPressed: () {},
neonColor: Colors.greenAccent,
),
],
),
),
],
),
);
}
}
📸 Screenshots #
Login Form #
Registration Form #
Starry Background #
🛠 Customization #
Change Neon Colors #
Easily change the neon glow color by setting the neonColor property:
NeonText(
text: "Custom Text",
neonColor: Colors.blueAccent,
);
Adjust Glow Intensity #
Modify blurRadius or glowRadius for softer or brighter effects:
NeonTextField(
textValue: _emailController,
blurRadius: 20.0,
neonColor: Colors.cyanAccent,
);
📜 License #
This package is open-source and available under the MIT License. See the LICENSE file for details.
❤️ Support #
If you find this package helpful, please consider giving it a star ⭐ on GitHub and sharing it with others!