creta_random_image 0.1.0

creta_random_image: ^0.1.0 copied to clipboard

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Creta Random Image Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: const DemoHomePage(),
    );
  }
}

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

  @override
  State<DemoHomePage> createState() => _DemoHomePageState();
}

class _DemoHomePageState extends State<DemoHomePage> {
  double _width = 320;
  double _height = 200;
  bool _blur = false;
  bool _strongFade = false;
  Duration? _refreshInterval = const Duration(seconds: 5);
  Duration _transitionDuration = const Duration(milliseconds: 300);

  static const List<Duration?> _intervalOptions = <Duration?>[
    null,
    Duration(seconds: 5),
    Duration(seconds: 10),
  ];

  static const List<Duration> _transitionOptions = <Duration>[
    Duration(milliseconds: 200),
    Duration(milliseconds: 300),
    Duration(milliseconds: 500),
    Duration(milliseconds: 800),
  ];

  String _intervalLabel(Duration? duration) {
    if (duration == null) {
      return '자동 갱신 없음';
    }
    return '${duration.inSeconds}초';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('CretaRandomImage 데모'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: CretaRandomImage(
                width: _width,
                height: _height,
                blur: _blur,
                refreshInterval: _refreshInterval,
                transitionDuration: _transitionDuration,
                enableStrongFade: _strongFade,
                fadeInCurve: Curves.easeIn,
                fadeOutCurve: Curves.easeOut,
              ),
            ),
            const SizedBox(height: 32),
            Text('설정', style: Theme.of(context).textTheme.titleLarge),
            const SizedBox(height: 16),
            _buildSlider(
              label: 'Width (${_width.toStringAsFixed(0)} px)',
              value: _width,
              onChanged: (value) => setState(() => _width = value),
            ),
            const SizedBox(height: 12),
            _buildSlider(
              label: 'Height (${_height.toStringAsFixed(0)} px)',
              value: _height,
              onChanged: (value) => setState(() => _height = value),
            ),
            const SizedBox(height: 12),
            SwitchListTile(
              title: const Text('Blur 처리'),
              value: _blur,
              onChanged: (value) => setState(() => _blur = value),
            ),
            SwitchListTile(
              title: const Text('강한 페이드 사용'),
              subtitle: const Text('이미지 전환 시 보다 뚜렷한 fade-in/out 효과'),
              value: _strongFade,
              onChanged: (value) => setState(() => _strongFade = value),
            ),
            const SizedBox(height: 12),
            DropdownButtonFormField<Duration>(
              value: _transitionDuration,
              decoration: const InputDecoration(
                labelText: '전환 애니메이션 시간',
                border: OutlineInputBorder(),
              ),
              items: _transitionOptions
                  .map(
                    (duration) => DropdownMenuItem<Duration>(
                      value: duration,
                      child: Text('${duration.inMilliseconds} ms'),
                    ),
                  )
                  .toList(),
              onChanged: (value) {
                if (value != null) {
                  setState(() => _transitionDuration = value);
                }
              },
            ),
            const SizedBox(height: 12),
            DropdownButtonFormField<Duration?>(
              value: _refreshInterval,
              decoration: const InputDecoration(
                labelText: '자동 갱신 주기',
                border: OutlineInputBorder(),
              ),
              items: _intervalOptions
                  .map(
                    (duration) => DropdownMenuItem<Duration?>(
                      value: duration,
                      child: Text(_intervalLabel(duration)),
                    ),
                  )
                  .toList(),
              onChanged: (value) => setState(() => _refreshInterval = value),
            ),
            const SizedBox(height: 12),
            FilledButton.icon(
              onPressed: () => setState(() {}),
              icon: const Icon(Icons.refresh),
              label: const Text('이미지 수동 새로고침'),
            ),
            const SizedBox(height: 24),
            const Text(
              'CretaRandomImage 위젯은 Picsum.photos를 이용해 간단히 샘플 이미지를 '
              '불러올 수 있도록 도와줍니다. width, height, blur 옵션과 자동 갱신 주기를 '
              '조절해 보세요. 강화된 페이드 옵션도 테스트할 수 있습니다.',
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSlider(
      {required String label, required double value, required ValueChanged<double> onChanged}) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label),
        Slider(
          value: value,
          min: 100,
          max: 600,
          divisions: 10,
          label: value.toStringAsFixed(0),
          onChanged: onChanged,
        ),
      ],
    );
  }
}