Riverpod and MediaQuery

Question

I am trying to write a Riverpod provider that would return me a scaling factor for the screen, so that I can resize all my elements accordingly.

final scale = ref.watch(scaleProvider);
return LinearPercentIndicator(
   animation: true,
   lineHeight: 15 * scale,
   ...
);

Unfortunately for my naïve implementation the MediaQuery requires a build context that I don't have when I first create a global scaleProvider

final scaleProvider = Provider<double>((ref) {
  final availableHeight = MediaQuery.of(context).size.height -
      AppBar().preferredSize.height -
      MediaQuery.of(context).padding.top -
      MediaQuery.of(context).padding.bottom;
  
  return availableHeight / 600.0;
});

What do I do? Are the Providers meant to be used that way at all? How do I make the scaling factor available to all my controls whenever they feel like?

Answer 1

if you check it at media_query dart. size get its data in constructor as window.physical.size, so:

import 'package:flutter/material.dart';

import 'dart:ui' as ui;

import 'package:flutter_riverpod/flutter_riverpod.dart';

final scaleProvider = Provider<double>((ref) {
  final window = ui.window;

  final availableHeight = window.physicalSize.height -
      AppBar().preferredSize.height -
      window.padding.top -
      window.padding.bottom;

  return availableHeight / 600.0;
});