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.

Banding en la gradiente lineal de Flutter web en Chrome.

01 Aug, 2023 Programación

Tengo problemas para crear un degradado lineal suave en Flutter web sin obtener un efecto de bandas. Mi código simplificado se ve así.

void main() {
  Paint.enableDithering = true;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(fontFamily: 'Interstate'),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color.fromRGBO(20, 20, 20, 1), Color.fromRGBO(37, 37, 37, 1)],
          ),
        ),
      ),
    );
  }
}

Y este es el resultado en Google Chrome.

Renderización en Google Chrome de un degradado lineal con efecto de bandas

El efecto es especialmente notable en mi MacBook Retina.

Como puedes ver, ya he intentado activar el dithering, pero no hay ninguna diferencia visible con esta configuración activada. También probé esto con varias pantallas.
Estoy usando Flutter versión 2.5.2 y también probé la versión 2.8.0 y el problema seguía presente.

¿Alguien ha experimentado el mismo problema y tiene una solución para esto?

También me gustaría saber cuál es la máxima profundidad de color en Flutter web/Skia.

¡Gracias por tu ayuda!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Crear un degradado lineal suave en Flutter web sin efecto de banding

    El efecto de banding que estás experimentando se debe a la limitada profundidad de color de las pantallas modernas. Para crear un degradado lineal suave en Flutter web sin efecto de banding, puedes usar más paradas de color para distribuir la transición entre más colores.

    class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Color.fromRGBO(20, 20, 20, 1),
                Color.fromRGBO(27, 27, 27, 1),
                Color.fromRGBO(34, 34, 34, 1),
                Color.fromRGBO(41, 41, 41, 1),
                Color.fromRGBO(48, 48, 48, 1),
                Color.fromRGBO(55, 55, 55, 1),
                Color.fromRGBO(62, 62, 62, 1),
                Color.fromRGBO(69, 69, 69, 1),
                Color.fromRGBO(76, 76, 76, 1),
                Color.fromRGBO(83, 83, 83, 1),
                Color.fromRGBO(90, 90, 90, 1),
                Color.fromRGBO(97, 97, 97, 1),
                Color.fromRGBO(104, 104, 104, 1),
                Color.fromRGBO(111, 111, 111, 1),
                Color.fromRGBO(118, 118, 118, 1),
                Color.fromRGBO(125, 125, 125, 1),
                Color.fromRGBO(132, 132, 132, 1),
                Color.fromRGBO(139, 139, 139, 1),
                Color.fromRGBO(146, 146, 146, 1),
                Color.fromRGBO(153, 153, 153, 1),
                Color.fromRGBO(160, 160, 160, 1),
                Color.fromRGBO(167, 167, 167, 1),
                Color.fromRGBO(174, 174, 174, 1),
                Color.fromRGBO(181, 181, 181, 1),
                Color.fromRGBO(188, 188, 188, 1),
                Color.fromRGBO(195, 195, 195, 1),
                Color.fromRGBO(202, 202, 202, 1),
                Color.fromRGBO(209, 209, 209, 1),
                Color.fromRGBO(216, 216, 216, 1),
                Color.fromRGBO(223, 223, 223, 1),
                Color.fromRGBO(230, 230, 230, 1),
                Color.fromRGBO(237, 237, 237, 1),
              ],
            ),
          ),
        ),
      );
  }
}

    Aumentar el número de colores en el degradado creará más paradas y reducirá el efecto de banding. Sin embargo, es importante equilibrar el número de colores y el rendimiento en tu aplicación.

    También es importante tener en cuenta que la profundidad de color máxima de Flutter web/skia puede variar según la pantalla y el dispositivo que se esté utilizando.

Comments are closed.