I have a Row which has a Text and a Checkbox, how can I align the Checkbox so they are all aligned vertically?

Column(
      children: [
        Row(
          children: [
            const Padding(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Text(
                  "Some",
                  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(
                  "Some other very long name",
                  style: TextStyle(fontWeight: FontWeight.bold),
                )),
            Checkbox(
              checkColor: Colors.white,
              fillColor: MaterialStateProperty.resolveWith(getColor),
              value: isSecondChecked,
              onChanged: (bool? value) {
                setState(() {
                  isSecondChecked = value!;
                });
              },
            ),
          ],
        ),
      ],
    );

CodePudding user response：

I recommend using Table layout

CodePudding user response：

Please refer to below code

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ChatSampleWidget(),
      ),
    );
  }
}

class ChatSampleWidget extends StatefulWidget {
  @override
  _ChatSampleWidgetState createState() => _ChatSampleWidgetState();
}

class _ChatSampleWidgetState extends State<ChatSampleWidget> {
  bool isSecondChecked = false;
  bool isChecked = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chatter'),
      ),
      body: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Padding(
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Text(
                    "Some",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
              Checkbox(
                checkColor: Colors.white,
                value: isChecked,
                onChanged: (bool? value) {
                  setState(() {
                    isChecked = value!;
                  });
                },
              ),
            ],
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Padding(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Text(
                  "Some other very long name",
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              Checkbox(
                checkColor: Colors.white,
                value: isSecondChecked,
                onChanged: (bool? value) {
                  setState(
                    () {
                      isSecondChecked = value!;
                    },
                  );
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

Column(
      children: [
        Row(
              mainAxisAlignment:MainAxisAlignment.spaceBetween,

          children: [
            const Padding(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Text(
                  "Some",
                  style: TextStyle(fontWeight: FontWeight.bold),
                )),
            Checkbox(
              checkColor: Colors.white,
              fillColor: MaterialStateProperty.resolveWith(getColor),
              value: isChecked,
              onChanged: (bool? value) {
                setState(() {
                  isChecked = value!;
                });
              },
            ),
          ],
        ),
        Row(                  
mainAxisAlignment: MainAxisAlignment.spaceBetween,

          children: [
            const Padding(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Text(
                  "Some other very long name",
                  style: TextStyle(fontWeight: FontWeight.bold),
                )),
            Checkbox(
              checkColor: Colors.white,
              fillColor: MaterialStateProperty.resolveWith(getColor),
              value: isSecondChecked,
              onChanged: (bool? value) {
                setState(() {
                  isSecondChecked = value!;
                });
              },
            ),
          ],
        ),
      ],
    );