constructor doesn't work properly on flutter-CodePudding

I have create a class called Size

Class name: Size

enter code

import 'package:flutter/material.dart';
import 'package:firstapp/pages/components/font.dart';

// ignore: must_be_immutable
class Size extends StatefulWidget {
  double font = sizevar.fontSizeRatio;
  double fontH = sizevar.fontSizeRatioH;
  Size();

  @override
  _SizeState createState() => _SizeState();
}

class _SizeState extends State<Size> {
  void initState() {
    sizevar.fontSizeRatio = 25;
    sizevar.fontSizeRatioH = 30;

    super.initState();
  }

  _SizeState();

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          onPressed: () => setState(() {
            sizevar.fontSizeRatio = sizevar.fontSizeRatio - 2;
          }),
          icon: Icon(Icons.remove_circle_outline, color: Colors.red),
        ),
        IconButton(
            onPressed: () => setState(() {
                  sizevar.fontSizeRatio = sizevar.fontSizeRatio   2;
                }),
            icon: Icon(Icons.add_circle_outlined, color: Colors.red)),
      ],
    );
  }
}

the above code is used to resize the font of the text daynamically. I want to use it on different other class like a class named SizeCheck.

class name: SizeCheck

enter code

import 'package:firstapp/pages/components/body.dart';
import 'package:firstapp/pages/components/bodyTitle.dart';
import 'package:firstapp/pages/components/font.dart';
import 'package:firstapp/pages/components/size.dart';
import 'package:flutter/material.dart';

class SizeCheck extends StatefulWidget {
  @override
  State<SizeCheck> createState() => SizeCheckState();
}

class SizeCheckState extends State<SizeCheck> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Resize",
            style: TextStyle(
              fontSize: sizevar.fontSizeRatio,
            )),
        **actions: [Size()],**
      ),
      body: ListView(
        children: <Widget>[
          Column(
            children: [
              BodyTitle("Title"),
              ContentBody('how we resize the text'),
            ],
          ),
        ],
      ),
    );
  }
}

When I pressed the button the text size doesn't change immediately img when i press the button ,but when I hot reload the emulator it works. img after hot reload the emulator I am using flutter v2.5.

CodePudding user response：

I am not sure what sizevar is, but here is why this issue is happening and how to fix it:

The issue is dead simple, you are updating the value, but you are not telling SizeCheck to rebuild itself, to do that, you must call setState from within SizeCheck calling it from Size is not enough.

To fix this, I recommend you add a callback into Size, like this:

class Size extends StatefulWidget {
  double font = sizevar.fontSizeRatio;
  double fontH = sizevar.fontSizeRatioH;

  VoidCallback? onSizeIncrease;
  VoidCallback? onSizeDecrease;
  
  Size({required this.onSizeIncrease, required this.onSizeDecrease});

  @override
  _SizeState createState() => _SizeState();
}

then on Size's state:

IconButton(
          onPressed: onSizeDecrease,
          icon: Icon(Icons.remove_circle_outline, color: Colors.red),
        ),
        IconButton(
            onPressed: onSizeIncrease,
            icon: Icon(Icons.add_circle_outlined, color: Colors.red)),

This way you can call these on the SizeCheck widget:

actions: [Size(
  onSizeIncrease: () => setState(() {
            sizevar.fontSizeRatio = sizevar.fontSizeRatio   2;
          }),
  onSizeDecrease: () => setState(() {
            sizevar.fontSizeRatio = sizevar.fontSizeRatio - 2;
          }),
)]