Question 224030 in Flutter Question posted in
The official Flutter documentation can be found here.

Vertically aligning a checkbox in a row in flutter

How do I align the checkbox that its at the same height as the text in the row? Seems like it’s not even reacting when I change the CrossAxisAlignment to CrossAxisAlignment.start which i want it to be. The text is behaving as it should.

import 'package:flutter/material.dart';

class filledForm extends StatefulWidget {

  final String action;
  final String details;

  const filledForm({required this.action, required this.details, Key? key}) : super(key:key);

  @override
  State<filledForm> createState() => _filledFormState();
}

class _filledFormState extends State<filledForm> {
  
  var isDone = false;
  
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Checkbox(
                shape: CircleBorder(),      ///////rigth here
                value: isDone, 
                onChanged: (bool? value) {
                  setState(() {
                    isDone = value!;
                  });
                },
              ),
              Column(
                children: [
                  Text(widget.action),
                  Text(widget.details),
                ],
              ),
            ],
          ),
          Divider(
            thickness: 1,
          ),
        ],
      ),
    );
  }
}

Thats how it looks rn

I tried with different alignments and padding, nothing seems to work for me.

Tags:

2

Answers


  1. 0

    Do not put the Text widget inside a column just put it in a container to be able to set a margin to align it the way u want.

        import 'package:flutter/material.dart';

class filledForm extends StatefulWidget {

  final String action;
  final String details;

  const filledForm({required this.action, required this.details, Key? key}) : super(key:key);

  @override
  State<filledForm> createState() => _filledFormState();
}

class _filledFormState extends State<filledForm> {
  
  var isDone = false;
  
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Checkbox(
                shape: CircleBorder(),      ///////rigth here
                value: isDone, 
                onChanged: (bool? value) {
                  setState(() {
                    isDone = value!;
                  });
                },
              ),
              Container(margin:EdgeInsets.only()//Here you can add the margin you need to align the Container property.
child:
                  Text(widget.action),
            ),
              Container(margin:EdgeInsets.only()
             cild:
                    Text(widget.details),
)
            ],
          ),
          Divider(
            thickness: 1,
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    it seems your Text widget on the details is rendered but with an empty string.

    you can make it conditional. show only there’s a value

    Column(
 children: [
   if(widget.action.isNotEmpty) Text(widget.action),
   if(widget.details.isNotEmpty Text(widget.details),
 ],
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search