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

Flutter – Quickly 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    Expanded is what youre looking for.

    I’d propose to change to code to 1 Row with 2 Columns but both works:

    Wrap every single child of the rows in an Expanded() widget.
    Expanded makes a Widget take as much space as possible within a row or column.

    Multiple Expanded share the available space evenly.

    In your case both widgets will take 50% of the row which automatically aligns them.

    If you want you can set a flex parameter in the Expanded Widget, which changes the share of the space.

    Details on Expanded: https://api.flutter.dev/flutter/widgets/Expanded-class.html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search