> ## Documentation Index
> Fetch the complete documentation index at: https://starrycodes.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# BuildContext Superpowers - MediaQuery

> Eliminate boilerplate and access screen metrics, orientation, and system themes instantly via simple BuildContext getters.

<Steps titleSize="h3">
  <Step title="📐 Screen Dimensions">
    <ResponseField name="screenSize" type="double">
      The total size of the screen. Equivalent to `MediaQuery.sizeOf(context).`

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      final width = context.screenSize;
      ```
    </ResponseField>

    <ResponseField name="screenWidth" type="double">
      The width of the screen in logical pixels.

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      final width = context.screenWidth;
      ```
    </ResponseField>

    <ResponseField name="screenHeight" type="double">
      The height of the screen in logical pixels.

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      // Dynamically size a container to half the screen height
      Container(height: context.screenHeight * 0.5);
      ```
    </ResponseField>
  </Step>

  <Step title="🧭 Orientation">
    <ResponseField name="orientation" type="Orientation">
      Current device orientation (`portrait` or `landscape`)

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      Orientation currentOrientation = context.orientation;
      ```
    </ResponseField>

    <ResponseField name="isLandscape" type="bool">
      Returns `true` if the device is in landscape mode.

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      bool wideMode = context.isLandscape;
      ```
    </ResponseField>

    <ResponseField name="isPortrait" type="bool">
      Returns `true` if the device is in portrait mode.

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      bool tallMode = context.isPortrait;
      ```
    </ResponseField>
  </Step>

  <Step title="🎨 Theme & System">
    <ResponseField name="isDarkMode" type="bool">
      Returns `true` if the system theme is dark.

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
       final color = context.isDarkMode ? Colors.white : Colors.black;
      ```
    </ResponseField>

    <ResponseField name="brightness" type="Brightness">
      The current platform brightness (light or dark).

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
       Brightness current = context.brightness;
      ```
    </ResponseField>

    <ResponseField name="safePadding" type="EdgeInsets">
      Safe area padding (e.g., for notches or Dynamic Island).

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      Padding(padding: context.safePadding, child: ...);
      ```
    </ResponseField>

    <ResponseField name="isKeyboardVisible" type="bool">
      Returns `true` if the software keyboard is currently visible (bottom view insets > 0).

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      if (context.isKeyboardVisible) FocusScope.of(context).unfocus();
      ```
    </ResponseField>
  </Step>
</Steps>