SetState does not update immediately

Question

I'm new to flutter and I'm having a problem here.

I'm developing an application to schedule meals and I wanted that when he got to the widget to confirm the appointments the calendar would appear gray and disabled

Booking Area widget

import 'package:app/widgets/booking/datepicker.dart';
import 'package:app/widgets/booking/pageone.dart';
import 'package:flutter/material.dart';

bool confirmationPage = false;

class BookingArea extends StatefulWidget {
  const BookingArea({Key? key}) : super(key: key);

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

class _BookingAreaState extends State<BookingArea> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Row(
        children: [
          Container(
            width: 600,
            height: 350,
            color: Colors.amber,
            child: const PageOne(),
          ),
          Container(
            foregroundDecoration: confirmationPage
                ? const BoxDecoration(
                    color: Colors.grey,
                    backgroundBlendMode: BlendMode.saturation,
                  )
                : null,
            width: 300,
            height: 300,
            child: const DatePicker(),
          ),
        ],
      ),
    );
  }
}

Confirmation Page widget

import 'package:app/widgets/booking/booking_area.dart';
import 'package:flutter/material.dart';

class PageOne extends StatefulWidget {
  const PageOne({Key? key}) : super(key: key);

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

class _PageOneState extends State<PageOne> {
  @override
  Widget build(BuildContext context) {
    setState(() {
      confirmationPage = true;
    });
    return const Center(
      child: Text("Pagina 1"),
    );
  }
}

what happens is that when I give the setState on PageOne it only applies the state (changes the widget color) when I "restart" the page through routes.

What I wanted was that when he got to page one he would immediately change the color of the calendar

sorry for bad english

Thanks :)

Answer 1

That is because you are only updating your PageOne with this setState((){}) call.

It doesn't rebuild the parent widget.

This would be the quick solution, but I would highly recommend looking for a sophisticated statemanagement solution

import 'package:app/widgets/booking/datepicker.dart';
import 'package:app/widgets/booking/pageone.dart';
import 'package:flutter/material.dart';

class BookingArea extends StatefulWidget {
  const BookingArea({Key? key}) : super(key: key);

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

class _BookingAreaState extends State<BookingArea> {

  bool confirmationPage = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Row(
        children: [
          Container(
            width: 600,
            height: 350,
            color: Colors.amber,
            child: PageOne(onInit:() {
              setState((){
                confirmation = true;
              });
            }),
          ),
          Container(
            foregroundDecoration: confirmationPage
                ? const BoxDecoration(
                    color: Colors.grey,
                    backgroundBlendMode: BlendMode.saturation,
                  )
                : null,
            width: 300,
            height: 300,
            child: const DatePicker(),
          ),
        ],
      ),
    );
  }
}

import 'package:app/widgets/booking/booking_area.dart';
import 'package:flutter/material.dart';

class PageOne extends StatefulWidget {
  const PageOne({Key? key, required this.onInit}) : super(key: key);
  final VoidCallback onInit;
  @override
  _PageOneState createState() => _PageOneState();
}

class _PageOneState extends State<PageOne> {


  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      widget.onInit();
    });
  }


  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("Pagina 1"),
    );
  }
}