Search code examples
androidfluttersetstate

why flutter_fortune_wheel always run instantly after page open?


Hi I want use flutter_fortune_wheel in my project. I want the wheel move only user click on button or touch the wheel, But the wheel moved always instantly after screen show. I set "animateFirst: false", but not working. how can i fix this? this is my fortune_wheel code:

 Expanded(
              child: FortuneWheel(
                selected: Stream.value(selected),
                animateFirst: false,
                duration: const Duration(seconds: 3),
                items: [
                  FortuneItem(child: Text("1", style: subtitleText)),
                  FortuneItem(child: Text("2", style: subtitleText)),
                  FortuneItem(child: Text("3", style: subtitleText)),
                  FortuneItem(child: Text("4", style: subtitleText)),
                  
                ],
              ),
            ),

and this is my button code:

ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        fixedSize: const Size.fromHeight(40),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50),
                        ),
                        backgroundColor: Colors.deepOrange,
                        // Background color
                        elevation: 5,
                        // Elevation
                        shadowColor: Colors.black),
                    onPressed: () {
                      setState(
                        () {
                          selected = Random().nextInt(4);
                        },
                      );
                    },
                    child: Text(
                      "spin",
                      style: smallText,
                    ),
                  ),

Solution

  • Try this one

    import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:flutter_fortune_wheel/flutter_fortune_wheel.dart';
    
    List<FortuneItem> items = const [
      FortuneItem(child: Text("1")),
      FortuneItem(child: Text("2")),
      FortuneItem(child: Text("3")),
      FortuneItem(child: Text("4")),
    ];
    
    class HomePage extends StatefulWidget {
      const HomePage({Key? key}) : super(key: key);
    
      @override
      State<HomePage> createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      StreamController<int> selected = StreamController<int>();
    
      @override
      initState() {
        super.initState();
      }
    
      @override
      void dispose() {
        selected.close();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Column(
            children: [
              Expanded(
                child: FortuneWheel(
                  selected: selected.stream,
                  animateFirst: false,
                  duration: const Duration(seconds: 3),
                  items: items,
                ),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                    fixedSize: const Size.fromHeight(40),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(50),
                    ),
                    elevation: 5,
                    shadowColor: Colors.black),
                onPressed: () {
                  setState(
                    () => selected.add(
                      Fortune.randomInt(0, items.length),
                    ),
                  );
                },
                child: const Text(
                  "spin",
                  style: TextStyle(color: Colors.white),
                ),
              )
            ],
          ),
        );
      }
    }