flutteralignment

Align Row items listed in a Column widget


I've searched, but have not found a question/answer that quite addresses my issue. As or my own solution, this is as close as I got it with padRight(20): TextField() not aligned.

The TextField() widgets are the same length, and I want them to line up, but I've drawn a blank as to how to readily do it! The code is listed below:

  Material(
      child: Padding(
        padding: EdgeInsets.only(left: 10.w),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _Row(
                text: 'Project Name'.tr,
                controller: TextEditingController(text: con.name)),
            _Row(
                text: 'Project Location'.tr,
                controller: TextEditingController(text: con.location)),
            _Row(
                text: 'Description'.tr,
                controller: TextEditingController(text: con.description)),
            _Row(
                text: 'Organization'.tr,
                controller: TextEditingController(text: con.organization)),
            _Row(
                text: 'Android Language'.tr,
                controller: TextEditingController(text: con.androidLanguage)),
            _Row(
                text: 'iOS Language'.tr,
                controller: TextEditingController(text: con.iOSLanguage)),
            _Row(
                text: 'Platforms'.tr,
                controller: TextEditingController(text: con.platforms)),
            CheckboxListTile(
              title: Text('Create Project Offline'.tr),
              tristate: true,
              value: con.offLineValue,
              onChanged: con.offLineChanged,
            ),
          ],
        ),
      ),
    );

class _Row extends StatelessWidget {
  const _Row({
    super.key,
    required this.text,
    required this.controller,
  });

  final String text;
  final TextEditingController controller;

  @override
  Widget build(BuildContext context) => Row(
        children: [
          Flexible(child: Text(text.trim().padRight(25))),
          Flexible(
            child: SizedBox(
              width: 100.w,
              child: TextField(
                controller: controller,
                decoration: const InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(6, 6, 6, 6),
                  fillColor: Colors.grey,
                  isCollapsed: true,
                  filled: true,
                  //                labelText: 'Your Email',
                  //                floatingLabelBehavior: FloatingLabelBehavior.never,
                  border: OutlineInputBorder(
                    //                  borderRadius: BorderRadius.circular(12),
                    borderSide: BorderSide(color: Colors.grey),
                  ),
                ),
              ),
            ),
          ),
        ],
      );
}

I was hoping padRight() would do the trick, and I don't want to use a GridView(). There's got to be a quick fix for this.


Solution

  • You have chosen a wrong widget structure, the one i suggest is a Row of two columns.

    One column for text and the other for the text field, if you prefer you can adjust that structure.

    The structure in the question can be padded but it will require each text to allocate a specific predefined percent of the width, can be done with expanded.

    i suggest the first option.