A modern Flutter login screen featuring a glassmorphic form, dynamic twinkling star-field background, and glowing gradient accents.
1. LoginForm Widget
- LoginForm is a StatefulWidget because it has animations (stars twinkling).
- The _LoginFormState manages:
- An AnimationController → drives star twinkling.
- Randomly generated star positions and twinkling speeds.
2. initState
- AnimationController runs infinitely (..repeat()) every 4 seconds.
- _starPositions → generates 120 stars at random Offset(x, y) (normalized 0–1).
- _starSpeeds → assigns each star a random twinkle speed (0.5–2.0).
This makes stars twinkle at different timings, so the sky looks natural.
3. Scaffold Layout
Inside build() → you use a Stack:
- Big circle glow effects → multiple Positioned containers with gradient shadows.
- Creates a planet / glowing orb look.
- _starView() → draws the animated stars (CustomPaint).
- _loginView() → the actual Sign-In form.
4. Star View
_starView() → returns an AnimatedBuilder
- Listens to _controller updates.
- Calls StarPainter with current animation progress (_controller.value).
- StarPainter → draws stars with sinusoidal opacity (so they fade in/out smoothly).
👉 Formula:
opacity = 0.3 + 0.7 * (0.5 + 0.5 * sin(animationValue * speed * 2π));This means: each star’s brightness goes up and down like a real star twinkle.
5. Login Form UI
Inside _loginView():
- Frosted glass effect → BackdropFilter + blur.
- Container → semi-transparent with rounded corners.
- Text fields:
- Email/Phone
- Password (with visibility icon).
- Buttons:
- Sign In → with gradient background + bounce effect.
- Divider with “Or”.
- Apple sign-in button.
- Footer → “New to Atomz? Join Now”.
Fonts → all styled with GoogleFonts for modern look.
6. StarPainter
CustomPainter draws stars:
- Iterates through each position.
- Multiplies normalized position by screen size to get real coordinates.
- Calculates opacity with sinusoidal function.
- Draws a small white circle (radius = 1.2).
This gives the twinkling night sky effect.
In short:
- Background: glowing orb (planet-like).
- Animated stars: twinkling using sine function.
- Foreground: frosted glass sign-in form.
- Modern typography, gradients, and animations.
👉 This code is a cosmic / futuristic login screen.
It mixes UI design (glassmorphism + gradients) with graphics (CustomPainter stars).
Download the Source Code:
👉 Complete source code and explore the starry animated login screen built with Flutter
