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.

  • es.davy.ai/
  • Programación /
  • Cómo envolver una lista de Widgets sin cambiar el diseño cuando se desenrolla y se distribuye en un Row.

Cómo envolver una lista de Widgets sin cambiar el diseño cuando se desenrolla y se distribuye en un Row.

27 Jul, 2023 Programación

Actualmente, la siguiente estructura me da el diseño deseado:

Consumer<state>(
  builder: (context, state, child) => Row(
    children: [
      Widget1(...), // ancho fijo
      ...List.generate(state.length, (index) => Expanded(child: Widget2(index, state))),
    ]
  )
)

Widget1 no necesita estar conectado al estado y no quiero que se vuelva a renderizar cuando cambie. Sería genial si el List.generate pudiera estar conectado a un Consumer, pero el builder debe devolver un solo widget, no una lista de widgets.

He intentado usar el widget Wrap alrededor de la lista y conectarlo a un Consumer. Esto logra mi objetivo de no volver a renderizar Widget1, pero cambia el diseño: los Widget2 ya no se expanden para llenar el espacio restante.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución sería envolver el widget Row en un SizedBox, estableciendo su ancho a double.infinity, y luego envolverlo en un SingleChildScrollView para permitir el desplazamiento horizontal si el contenido se desborda. De esta manera, podemos mantener el diseño deseado y también conectar el List.generate a un Consumer sin cambiar el diseño.

    Así es como se vería el código actualizado:

    Consumer<state>(
  builder: (context, state, child) => SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: SizedBox(
      width: double.infinity,
      child: Row(
        children: [
          Widget1(...), // ancho fijo
          ...List.generate(state.length, (index) => Expanded(child: Widget2(index, state))),
        ],
      ),
    ),
  ),
);

    Al envolver el Row en un SizedBox con width: double.infinity, nos aseguramos de que el Row ocupe todo el espacio horizontal disponible. Al envolver esto en un SingleChildScrollView con scrollDirection: Axis.horizontal, el usuario puede desplazarse horizontalmente si el contenido se desborda, manteniendo aún el diseño deseado.

    Ahora podemos conectar el List.generate a un Consumer sin afectar el diseño de nuestra interfaz de usuario.

Comments are closed.