如何从 function 获取价值并在文本小部件 flutter 中显示

Question

 import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const RootPage(),
    );
  }
}

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int value = 75;
  Timer? _timer;
  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  void valuerandomer() {
    _timer = Timer.periodic(
      Duration(milliseconds: 500),
      (t) {
        int count = 0;
        int max = 1000;
        int min = 1;
        Random rnd = new Random();
        while (count != -1) {
          count++;
          value += rnd.nextInt(6) + (-5);
        }
        if (value > (max - 1)) {
          value = 999;
        } else if (value < 0) {
          value = 0;
        }
        print(value);
        setState(() {});
      },
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 12, 12, 12),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Stack(
            alignment: Alignment.center,
            children: [
              Image.asset('images/SQUARE.png'),
              Center(
                child: Text(
                  '$valuerandomer()',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Color.fromARGB(255, 255, 106, 0),
                      fontSize: 90,
                      fontFamily: "MyFont"),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

The output of the code:

I want the function to print every 500 miliseconds in the text widget so the value parameter starts with the value of 75 and changes every 500 milliseconds with this function. How do I do that? How do I declare this function in the text widget like Text('$valuerandomer')? cuz its just dont work. I tried just to type there $value but still doesnt work.

Answer 1

It says void function because your function returns void type void valuerandomer() . Try changing it to String valuerandomer and return your value at the end of the function.

Answer 2

You wrote that your value has to change but it's not really clear how it should change and what your valuerandomer tries to do.

My guess is that your are trying to randomize a number between min and max . And this should happen count times.

EDIT: This code now runs forever and changes the number.

 import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const RootPage(),
    );
  }
}

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

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  
  ValueNotifier<int> valueNotifier = ValueNotifier(75);
  late final Timer? _timer;
  final Random rnd = Random();
  final Duration duration = const Duration(milliseconds: 500);
  final int max = 1000;
  final int min = 1;

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

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

  void valuerandomer() {
    _timer = Timer.periodic(
      duration,
      (Timer t) {
        int value = rnd.nextInt(max-min) + min;
        valueNotifier.value = value;
      },
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 12, 12, 12),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Stack(
            alignment: Alignment.center,
            children: [
              Center(
                child: ValueListenableBuilder<int>(
                  valueListenable: valueNotifier,
                  builder: (context, value, child) {
                    return Text(
                      '$value',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        color: Color.fromARGB(255, 255, 106, 0),
                        fontSize: 90,
                        fontFamily: "MyFont"),
                    );
                  }
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

First of all we call valueRandomer to start the timer. The method itself does nothing else. The timer calls the callback function every 0.5 seconds. Inside the callback function we generate a random number between min and max .

The rnd.nextInt(num) actually just generates number between 0 and num . That's why we need interval shifting. Substract by min to get the range between 0 and (max-min). After that we add min back to number to get our real random number in our range.

Finally we set the value of the ValueNotifier to the newly generated number. ValueNotifier and ValueListenableBuilder are pretty handy in this case. The ValueListenableBuilder rebuilds itself whenever the ValueNotifier changes its value. We dont need to call setState here anymore because ValueListenableBuilder handles that for us.