gradient_ring 1.0.0

gradient_ring: ^1.0.0 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:gradient_ring/gradient_ring.dart';

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

class GradientRingExampleApp extends StatelessWidget {
  const GradientRingExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gradient Ring Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const GradientRingDemoPage(),
    );
  }
}

class GradientRingDemoPage extends StatelessWidget {
  const GradientRingDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    final rings = [
      const GradientRing(size: 96),
      const GradientRing(
        size: 120,
        strokeWidth: 8,
        colors: [Color(0xFF89F7FE), Color(0xFF66A6FF)],
        dotDiameter: 10,
        dotGap: 10,
        dotAngleDegrees: 135,
        padding: EdgeInsets.all(8),
        child: Icon(Icons.play_arrow_rounded, color: Colors.white, size: 48),
      ),
      const GradientRing(
        size: 96,
        colors: [Color(0xFFFBAB7E), Color(0xFFF7CE68)],
        dotColor: Color(0xFFFFF59D),
        dotAngleDegrees: 300,
        enableDotGap: false,
      ),
      GradientRing(
        size: 96,
        strokeWidth: 12,
        colors: [Colors.teal.shade200, Colors.teal.shade700],
        dotDiameter: 8,
        dotDecoration: BoxDecoration(
          gradient: const LinearGradient(
            colors: [Colors.white, Colors.tealAccent],
          ),
          border: Border.all(color: Colors.black26, width: 1),
          shape: BoxShape.circle,
        ),
        dotShadow: const [
          BoxShadow(color: Colors.tealAccent, blurRadius: 12, spreadRadius: 2),
        ],
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('GradientRing Demo / 示例'),
        backgroundColor: Colors.black,
      ),
      backgroundColor: const Color(0xFF080B12),
      body: ListView(
        padding: const EdgeInsets.all(24),
        children: [
          Text(
            'Play with the gradient ring widget to create futuristic radial indicators.\n'
            '尝试通过 GradientRing 构建具有科幻感的环形指示器。',
            style: Theme.of(context).textTheme.bodyLarge,
          ),
          const SizedBox(height: 24),
          Wrap(
            spacing: 24,
            runSpacing: 24,
            children: rings
                .map(
                  (ring) => Container(
                    width: 140,
                    height: 140,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      color: Colors.white.withValues(alpha: 0.03),
                      borderRadius: BorderRadius.circular(16),
                      border: Border.all(color: Colors.white10),
                    ),
                    child: ring,
                  ),
                )
                .toList(),
          ),
          const SizedBox(height: 32),
          Text(
            'Try editing the code to change dot angles, gradients, or embed any child widget in the center.',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
        ],
      ),
    );
  }
}