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.

¿Cómo alinear el contenedor inferior dentro de un listview?

02 Aug, 2023 Programación

Quería alinear un botón en la parte inferior del centro de la lista de vista.

Scaffold(
  backgroundColor: Colors.white,
  appBar: buildAppBar(context, ''),
  body: ListView(
    physics: ClampingScrollPhysics(),
    children: [
      Column(
        children: [
          Text(
            'check up',
            style: TextStyle(
              fontSize: 35,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
          SizedBox(height: 12),
          Text(
            'SachsenwaldStr. 3. 12157 Berlin',
            style: TextStyle(
              fontSize: 20,
              color: Colors.black,
            ),
          ),
        ],
      ),
      Spacer(),
      buildNextButton(context),
    ],
  ),
)

Intenté usar Align, pero no funcionó y Spacer() tampoco:

  Align(
        alignment: Alignment.bottomCenter,
        child: buildNextButton(context),
      ),

¿Hay alguna manera de alinear buildNextButton en la parte inferior?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una forma de alinear buildNextButton en la parte inferior central de la ListView. En lugar de utilizar Align, puedes envolver la ListView y buildNextButton con un widget Stack y utilizar Positioned para posicionar el botón en la parte inferior central. Aquí tienes un ejemplo:

    Scaffold(
  backgroundColor: Colors.white,
  appBar: buildAppBar(context, ''),
  body: Stack(
    children: [
      ListView(
        physics: ClampingScrollPhysics(),
        children: [
          Column(
            children: [
              Text(
                'check up',
                style: TextStyle(
                  fontSize: 35,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              SizedBox(height: 12),
              Text(
                'SachsenwaldStr. 3. 12157 Berlin',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.black,
                ),
              ),
            ],
          ),
        ],
      ),
      Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: buildNextButton(context),
      ),
    ],
  ),
);

    En este ejemplo, la ListView es el primer hijo del Stack y ocupa todo el espacio. Luego, el buildNextButton se posiciona en la parte inferior central del Stack utilizando Positioned con bottom: 0 para alinearlo en la parte inferior, y left: 0 y right: 0 para estirarlo horizontalmente.

Comments are closed.