SetState doesn't update widgets

Issue

I want the image to get bigger and to opacity 0 with animation
I tried setState() in two functions _onpre() and Future.delayed to change size and opacity of image but it doesn’t change the widgets

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class splatch extends StatefulWidget {
  static String id = 'splatch';
  @override
  _splatchState createState() => _splatchState();
}

class _splatchState extends State<splatch> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double _height =  300;
    double _width = 3;


    Future.delayed(const Duration(milliseconds: 500), () {
      setState(() {
        _height = 40;
        _width = 40;
      });

    });

    _onpre() {
        setState(() {
          _height = 40;
        });
    }

    return Container(
      child: Stack(
        children: [
            AnimatedContainer(duration: Duration(microseconds: 100),
              height: _height,
              child:Container(
                child: Image.asset('images/rond1.png'),
              ),
              curve: Curves.fastOutSlowIn,
            ),
        ]
      ),
    );
  }
}

Solution

I fixed your code.

Some important parts:

• Don’t add function inside the build widget.
• To animation work you need a trigger. In this method i used a ElevatedButton

class splatch extends StatefulWidget {
  static String id = 'splatch';
  @override
  _splatchState createState() => _splatchState();
}

class _splatchState extends State<splatch> {
  late Size size;
  double _height = 300;
  double _width = 3;

  _anim2() async {
    Future.delayed(const Duration(milliseconds: 500), () {
      setState(() {
        _height = 40;
        _width = 40;
      });
    });
  }

  _anim1() {
    setState(() {
      _height = 500;
      _width = 500;
    });
  }

  @override
  Widget build(BuildContext context) {
    size = MediaQuery.of(context).size;
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            AnimatedContainer(
              duration: Duration(seconds: 3),
              height: _height,
              child: Container(
                height: 200,
                width: 200,
                child: Icon(Icons.add),
                color: Colors.red,
              ),
              curve: Curves.fastOutSlowIn,
            ),
            ElevatedButton(
              onPressed: () {
                _anim1();
              },
              child: Text("Animation 1"),
            ),
            SizedBox(
              height: 50,
            ),
            ElevatedButton(
              onPressed: () {
                _anim2();
              },
              child: Text("Animation 2"),
            )
          ],
        ),
      ),
    );
  }
}

Answered By – Lucas Josino

Answer Checked By – Pedro (FlutterFixes Volunteer)