Search code examples
flutteruser-interfacewidgetcss-cascade

How Can I See The Style Applied to a Widget?

Is there a way to see what style is being applied to a widget? In website development there is the Style tab in the Chrome Dev Tools which shows what style is applied and how this cascades and this is really useful to debug the page.

Is there a similar feature in Flutter?

Solution

  • A small example to see information about fontSize, color etc. for a Text widget:

    Open the Widget Inspector and switch to the Widet Details Tree Open the Widget Inspector and switch to the Widet Details Tree

    Hover over dependencies to see the DefaultTextStyle. For this to work, you must have enabled "hover inspection" in the Inspector Settings (top right gear icon). enter image description here

    Hover over dependencies to see the DefaultTextStyle

    Open the DefaultTextStyle to see the style element, which has all the information. Open the DefaultTextStyle to see the style element, which has all the information