Flutter setState()

What happens when Flutter startup and when we call setState(). Just an example to easy understand

Layout summary

/// App
/// WgFullState
///   + Button
///   + Container
///     + Button 
///   + SubWgStateless
///     + Container
///   + SubWgFullState
///     + Button
///     + SubWgStateless
/// WgStateless
///   + WgFullState
///     + Button
///     + Container
///       + Button 
///     + SubWgStateless
///       + Container
///     + SubWgFullState
///       + Button
///       + SubWgStateless

First, run

Restarted application in 1,955ms.
I/flutter (19233): app build
I/flutter (19233): initState WgFullState
I/flutter (19233): build WgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): initState SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): build WgStateless
I/flutter (19233): initState WgFullState
I/flutter (19233): build WgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): initState SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): app build
I/flutter (19233): didUpdateWidget WgFullState
I/flutter (19233): build WgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): didUpdateWidget SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): build WgStateless
I/flutter (19233): didUpdateWidget WgFullState
I/flutter (19233): build WgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): didUpdateWidget SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless

Press the button 1st

I/flutter (19233): setState WgFullState
I/flutter (19233): build WgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): didUpdateWidget SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless

Press the button 2nd

I/flutter (19233): setState WgFullState Btn2
I/flutter (19233): build WgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): didUpdateWidget SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless

Press the button 3rd

I/flutter (19233): setState SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless

Press the button 4th

I/flutter (19233): setState WgFullState
I/flutter (19233): build WgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): didUpdateWidget SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless

Press the button 5th

I/flutter (19233): setState WgFullState Btn2
I/flutter (19233): build WgFullState
I/flutter (19233): build SubWgStateless
I/flutter (19233): didUpdateWidget SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless

Press the button 6th

I/flutter (19233): setState SubWgFullState
I/flutter (19233): build SubWgFullState
I/flutter (19233): build SubWgStateless

Compendious

  • For the fist running, app build twice with the first for initState and the last for didUpdate
  • When setState call, the app will re-build all sub component and cascade widget

Leave a Reply

Your email address will not be published.Required fields are marked *