CODEWITHSUNDEEP
flutterflutter-layout
Korupt
Korupt

Reputation: 21

Flutter Checkbox/CheckBoxListTile vertical Alignment options

This is simplified example of what Im working on

return SizedBox(
  width: 300,
  height: 200,
  child: Padding(
    padding: const EdgeInsets.all(12.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text('text line'),
        Row(
          children: [
            Checkbox(
                value: false,
                onChanged: (bool? value) {}),
            const Expanded(
                child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit,'
                    'sed do eiusmod tempor incididunt ut labore et dolore magna'
                    'aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
                    'ullamco laboris nisi ut aliquip ex ea commodo consequat.'),
            ),
          ],
        ),
      ],
    ),
  ),
);

Since Im trying to vertical Align the checkbox(leading) in the row with the 3 lines of text(trailing).

Is it possible to modify the vertical alignment of the checkbox without having to go with a fully custom widget, like using a stack/positioned?

I have tried modifying with visual density, transform.translate with very little vertical control. I tried to also both CheckBox and CheckBoxListTile using controlAffinity.leading, contentpadding.zero.

enter image description here

Upvotes: 2

Views: 1392

Answers (3)

Nafees
Nafees

Reputation: 1034

It is a working solution, it's horizontal min value is -4 visual density is used for compactness. visualDensity:VisualDensity(horizontal: -4.0, vertical: -4.0),

Shrinks the tap target size to the minimum provided by the Material specification. materialTapTargetSize:MaterialTapTargetSize.shrinkWrap,

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      padding: EdgeInsets.only(right: 10),
      child: Theme(
        data: ThemeData(
          materialTapTargetSize:
              MaterialTapTargetSize.shrinkWrap,
          visualDensity:
              VisualDensity(horizontal: -4.0, vertical: -4.0),
        ),
        child: Checkbox(
          value: _isChecked,
          onChanged: (newValue) {
            FocusManager.instance.primaryFocus?.unfocus();
            setState(() {
              _isChecked = newValue!;
              print(newValue);
            });
          },
          side: BorderSide(
              color: Colors.grey.shade400,
              style: BorderStyle.solid,
              width: 2),
        ),
      ),
    ),
    Expanded(
      child: RichText(
        text: TextSpan(
          text: 'I agree to the ',
          style: TextStyle(fontSize: 16, color: Colors.black),
          children: <TextSpan>[
            TextSpan(
              text: 'Terms of Service',
              style: TextStyle(
                color: Colors
                    .blue, // Set your desired color for the Terms o
                fontWeight: FontWeight.bold,
              ),
            ),
            TextSpan(
              text: ' and ',
            ),
            TextSpan(
              text: 'Privacy Policy',
              style: TextStyle(
                color: Colors
                    .blue, // Set your desired color for the Privacy
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    ),
  ],
),

Upvotes: 1

Alwayss Bijoy
Alwayss Bijoy

Reputation: 844

I think you can use CheckboxListTile 

 CheckboxListTile(
                    controlAffinity: ListTileControlAffinity.leading,
                    title: Text('In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.'),
                    value: true, onChanged: (value) {}),

Upvotes: -1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63614

Use crossAxisAlignment: CrossAxisAlignment.start, on Row.

SizedBox(
    width: 300,
    height: 200,
    child: Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('text line'),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Checkbox(value: false, onChanged: (bool? value) {}),
              const Expanded(
                child: Text(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit,'
                    'sed do eiusmod tempor incididunt ut labore et dolore magna'
                    'aliqua. Ut enim ad minim veniam, quis nostrud exercitation'
                    'ullamco laboris nisi ut aliquip ex ea commodo consequat.'),
              ),
            ],
          ),
        ],
      ),
    ),
  ),

Upvotes: 1

Related Questions