SPINNING WHELL

Merhaba Flutter Geliştiricileri,Bir Firmaya mobil uygulama geliştiriyosunuz diyelim.Her ne kadar firmanın istekleri doğrultusunda bir uygulama geliştirsenizde sizi siz yapan o uygulamaya kattığınız kendinize özgü yaratıcı fikirleriniz olur.Kullanıcıyı Firmaya bağlı tutucak kısım da Promosyon veya Hediyedir işte bu gibi durumlarda splining whell kullanarak uygulamanızı kaliteli bir hale getirebilirsiniz. Sizden istenilen hediyeyi dağıtmak için bir çark sistemi yapılmasıysa.Yapmanız gereken Çarkınızın bir görüntüsünü oluşturmaktır.Kendi tasarımınızı üstüne koyup istediğiniz sayıda bölümlere ayırıp işlem yaptırabilirsiniz

Çark Sistemimizin üzerinde 2 tane resim mevcuttur 1.Resim dönen resmimiz 2.Resim sabit olup hediyeyi yada sürprizi belirleyen resmimizdir.Çarkımızın dönme olayını ister tıklanma ile istenirse sürükleme ile sağlayabiliriz.Ben yatayda ve dikeyde sürüklemeyi tercih ettim.Kod kısmında bütün olayları detaylı şekilde yazdım. Yalnız burda dikkat edilmesi gereken kısım çarkın dönme hızının random olmasıdır.Yoksa her kullanıcı istediği hediyeyi seçebilir bununda bir anlamı olmaz.Dikkat edilmesi gereken bir kısımda tasarladığınız resim ile program içerisindeki bölmelerinizin sayısı tutmalıdır.Kodda inceleyelim.

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_spinning_wheel/flutter_spinning_wheel.dart';
  class CarkPage extends StatefulWidget {
  @override
  _CarkPageState createState() => _CarkPageState();
}
class _CarkPageState extends State<CarkPage> {
  int sayac=0; //verilen hak için tanımladım (StfulWidgetClass tanımladım)
  final StreamController _dividerController = StreamController<int>();
  final _wheelNotifier = StreamController<double>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Color(0xFF0A0A0A), elevation: 0.0,title: Text("KAMPANYA",),centerTitle: true,),
      backgroundColor: Color(0xFF0A0A0A),
      body:sayac<=5 ? Center(  //Hak=5 Tanımlandı
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              child: SpinningWheel(
                Image.network("https://i.imgyukle.com/2020/02/16/nNiJEy.png"),
                width: 310,
                height: 310,
                initialSpinAngle: _generateRandomAngle(),
                spinResistance: 0.6,
                canInteractWhileSpinning: false,
                dividers: 8,
                onUpdate: _dividerController.add,
                onEnd: _dividerController.add,
                secondaryImage:
                Image.network("https://i.imgyukle.com/2020/01/21/V8zv8S.png"),
                secondaryImageHeight: 110,
                secondaryImageWidth: 110,
                shouldStartOrStop: _wheelNotifier.stream,
              ),
// Diğer Dokunulma durumları için bu Fonksiyonlar kullanılabilir
//              onTap: (){
//                _wheelNotifier.sink.add(_generateRandomVelocity());
//              },
//              onLongPress: (){
//                _wheelNotifier.sink.add(_generateRandomVelocity());
//              },
//             onTapDown: (TapDownDetails details){
//
//             },
              onHorizontalDragStart: (DragStartDetails details){
                _wheelNotifier.sink.add(_generateRandomVelocity());
                setState(() {
                  sayac=sayac+1;
                });
              },
              onVerticalDragStart: (DragStartDetails details){
                _wheelNotifier.sink.add(_generateRandomVelocity());
                setState(() {
                  sayac=sayac+1;
                });
                debugPrint(sayac.toString());
              },
            ),
            SizedBox(height: 30),
            sayac>0 ?
            StreamBuilder( //ilk durumda ekranda bişey yazmaması için..
              stream: _dividerController.stream,
              builder: (context, snapshot) =>
              snapshot.hasData ? RouletteScore(snapshot.data) : Container(),
            ): Text("ÇEVİR",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold,color: Colors.white),),
            SizedBox(height: 30),
          ],
        ),
      ): Center(child:Text("Hakkınız Bitmiştir.",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),),
    );
  }
  @override
  void dispose() {
    _dividerController.close();
    _wheelNotifier.close();
    super.dispose();
  }
  double _generateRandomVelocity() => (Random().nextDouble() * 6000) + 2000;
  double _generateRandomAngle() => Random().nextDouble() * pi * 2;
}

class RouletteScore extends StatelessWidget {
  final int selected;
  final Map<int, String> labels = {
    1: '1000 PUAN KAZANDINIZ',
    2: '400 PUAN KAZANDINIZ',
    3: '800 PUAN KAZANDINIZ',
    4: '7000 PUAN KAZANDINIZ',
    5: '5000 PUAN KAZANDINIZ',
    6: '300 PUAN KAZANDINIZ',
    7: '2000 PUAN KAZANDINIZ',
    8: '100 PUAN KAZANDINIZ',
  };

  RouletteScore(this.selected);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('${labels[selected]}',
            style: TextStyle(fontStyle: FontStyle.italic, fontSize: 24.0,color: Colors.white)),
      ],
    );
  }
}Code language: JavaScript (javascript)

Kodları detaylı olarak github inceleyebilirsiniz.