Dynamic Star Patterns with Adjustable Star Count in Flutter

dynamic_star_pattern_with_variable_count.dart

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:math';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // Size of the canvas
  final Size canvasSize = Size(400, 300);

  // Number of stars
  int numberOfStars = 10;

  // List to hold the positions of the stars
  List<Offset> starPositions = [];

  @override
  void initState() {
    super.initState();
    generateStarPositions();
  }

  void generateStarPositions() {
    starPositions = List.generate(numberOfStars, (index) {
      return Offset(
        Random().nextDouble() * canvasSize.width,
        Random().nextDouble() * canvasSize.height,
      );
    });
  }

  void updateStarPositions() {
    setState(() {
      generateStarPositions();
    });
  }

  void updateNumberOfStars(double value) {
    setState(() {
      numberOfStars = value.toInt();
      generateStarPositions();
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Color(0xff000435),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CustomPaint(
                size: canvasSize,
                painter: DynamicStarCustomPainter(
                  starPositions: starPositions,
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: updateStarPositions,
                child: Text('Update Star Positions'),
              ),
              SizedBox(height: 20),
              Text(
                'Number of Stars: $numberOfStars',
                style: TextStyle(color: Colors.white),
              ),
              Slider(
                value: numberOfStars.toDouble(),
                min: 1,
                max: 50,
                divisions: 49,
                label: numberOfStars.toString(),
                onChanged: updateNumberOfStars,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class DynamicStarCustomPainter extends CustomPainter {
  final List<Offset> starPositions;

  DynamicStarCustomPainter({required this.starPositions});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..style = PaintingStyle.fill
      ..color = Colors.white.withOpacity(1.0);

    for (var offset in starPositions) {
      drawStar(canvas, offset, paint);
    }
  }

  void drawStar(Canvas canvas, Offset position, Paint paint) {
    Path path = Path()
      ..moveTo(position.dx, position.dy)
      ..cubicTo(
          position.dx - 1.654,
          position.dy + 0.398,
          position.dx - 1.945,
          position.dy + 0.719,
          position.dx - 2.304,
          position.dy + 2.55)
      ..cubicTo(
          position.dx - 2.663,
          position.dy + 0.719,
          position.dx - 2.954,
          position.dy + 0.398,
          position.dx - 4.608,
          position.dy)
      ..cubicTo(
          position.dx - 2.954,
          position.dy - 0.398,
          position.dx - 2.663,
          position.dy - 0.719,
          position.dx - 2.304,
          position.dy - 2.55)
      ..cubicTo(
          position.dx - 1.945,
          position.dy - 0.719,
          position.dx - 1.654,
          position.dy - 0.398,
          position.dx,
          position.dy);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

Explore this GitHub Gist, which features dynamic star patterns and an adjustable star count. Customize the starfield by changing the number of stars with a slider and updating their positions with a button.

Preview