Skip to content
On this page

Use Query

Use to adapt styling property to MediaQuery.

"".n
    ..useQuery(
        context,
        (v, query) => v..color = Colors.red
    );

n.Box()
    ..useQuery((v, query) => ..bg = Colors.blue);

This will adapt the style to Query you conditional return.

n.Box()
    ..size = [100, 100]
    ..useQuery((v, query) {
        if(query.platformBrightness == Brightness.dark)
            return v..bg = Colors.gray.shade700
        else
            return v..bg = Colors.gray.shade100
    });

Best Practice

  • If you want to get device theme, then use useThemeSelector instead.
  • If you're trying to get device screen size, then use useSize instead.
  • If you want to use predefined screen size, then use useScreen instead.
  • If you're detecting platform specific UI, then use usePlatform instead.