es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Flutter web: obtener el tamaño de pantalla completa – no el tamaño de la ventana.

29 Jul, 2023 Programación

Mi aplicación web de Flutter para escritorio tiene una interfaz de usuario compleja que sería demasiado complicada de hacer adaptable. Así que en su lugar quiero colocarla en un FittedBox que simplemente reducirá todo la aplicación si el usuario hace la ventana del navegador más pequeña.

class CustomPage extends StatelessWidget {
  final Widget child;

  const CustomPage({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetPlatform.isDesktop
          ? FittedBox(
              child: SizedBox(
                width: Get.width,
                height: Get.height,
                child: Center(child: child),
              ),
            )
          : Text('¡Lo siento! Esto estaba destinado solo para escritorio.'),
    );
  }
}

Pero Get.width and WidgetsBinding.instance.window.physicalSize.width solo obtienen el tamaño inicial de la ventana. Así que si la aplicación se inicia en un navegador de pantalla completa, esto funciona muy bien, pero si la aplicación se inicia en un navegador pequeño, no funciona. MediaQuery.of(context).size.width solo obtiene el tamaño de pantalla actual.

¿Hay alguna manera de obtener el tamaño físico de la pantalla de escritorio?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma de obtener el tamaño físico de la pantalla del escritorio. Puedes usar la biblioteca dart:html y su objeto window para acceder al tamaño de la pantalla. Aquí tienes un ejemplo de código:

    import 'dart:html' as html;

double obtenerTamañoPantallaEscritorio() {
  if (html.window != null && html.window.screen != null) {
    return html.window.screen.availWidth.toDouble();
  }
  return 0.0;
}

    Puedes llamar a esta función para obtener el ancho de la pantalla del escritorio y usarlo en tu widget CustomPage de la siguiente manera:

    class CustomPage extends StatelessWidget {
  final Widget child;

  const CustomPage({
    Key? key,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double anchoPantallaEscritorio = obtenerTamañoPantallaEscritorio();
    return Scaffold(
      body: GetPlatform.isDesktop
          ? FittedBox(
              child: SizedBox(
                width: anchoPantallaEscritorio,
                height: Get.height,
                child: Center(child: child),
              ),
            )
          : Text('¡Lo siento! Esto está diseñado solo para escritorio.'),
    );
  }
}

    De esta manera, la FittedBox utilizará el tamaño real de la pantalla del escritorio en lugar del tamaño de la ventana inicial.

Comments are closed.