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: Alinear elementos en una fila verticalmente.

06 Aug, 2023 Programación

Tengo una fila que tiene un texto y una casilla de verificación, ¿cómo puedo alinear la casilla de verificación para que estén todas alineadas verticalmente?
“`flutter
Column(
children: [
Row(
children: [
const Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text(
“Algo”,
style: TextStyle(fontWeight: FontWeight.bold),
)),
Checkbox(
checkColor: Colors.white,
fillColor: MaterialStateProperty.resolveWith(getColor),
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
),
],
),
Row(
children: [
const Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text(
“Otro nombre muy largo”,
style: TextStyle(fontWeight: FontWeight.bold),
)),
Checkbox(
checkColor: Colors.white,
fillColor: MaterialStateProperty.resolveWith(getColor),
value: isSecondChecked,
onChanged: (bool? value) {
setState(() {
isSecondChecked = value!;
});
},
),
],
),
],
);

enter image description here

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear las casillas de verificación verticalmente, puedes agregar la propiedad crossAxisAlignment a los widgets Row y establecerla como CrossAxisAlignment.start de esta manera:

    Column(
  children: [
    Row(
      crossAxisAlignment: CrossAxisAlignment.start, // <--- añade esto
      children: [
        const Padding(
            padding: EdgeInsets.only(left: 10.0, right: 10.0),
            child: Text(
              "Algo",
              style: TextStyle(fontWeight: FontWeight.bold),
            )),
        Checkbox(
          checkColor: Colors.white,
          fillColor: MaterialStateProperty.resolveWith(getColor),
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value!;
            });
          },
        ),
      ],
    ),
    Row(
      crossAxisAlignment: CrossAxisAlignment.start, // <--- añade esto
      children: [
        const Padding(
            padding: EdgeInsets.only(left: 10.0, right: 10.0),
            child: Text(
              "Algún otro nombre muy largo",
              style: TextStyle(fontWeight: FontWeight.bold),
            )),
        Checkbox(
          checkColor: Colors.white,
          fillColor: MaterialStateProperty.resolveWith(getColor),
          value: isSecondChecked,
          onChanged: (bool? value) {
            setState(() {
              isSecondChecked = value!;
            });
          },
        ),
      ],
    ),
  ],
);

    Esto alineará las casillas de verificación verticalmente entre sí, independientemente de la longitud del texto en los widgets Text.

Comments are closed.