Reducing Spacing in an Expanded in Flutter Project

Question

I am trying to reduce the spaces around an Expaned in my flutter project as it is taking alot of space in all directions.

I have 2 expanded with texts in them and 2 Forms with input from users. They are taking almost 3 lines of wasted white space. I tried to reduce the spacing as much as possible by alligning to the left but it is still showing the same.

I initially tried to have them in a table but did not work because I have builder inside. Here is the simplified code:

Builder(builder: (context) {
  return Container(
    width: double
        .infinity, // Set the width of the container to be as wide as possible
    child: SingleChildScrollView(
      child: Column(
        children: [
          Card(
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: const [
                          Text('No.'),
                        ],
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: const [
                          Text('No.'),
                        ],
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: const [
                      Text('New Log'),
                    ],
                    crossAxisAlignment: CrossAxisAlignment.start,
                  ),
                ),
              ],
            ),
          ),
          Card(
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Text('1'),
                    ],
                  ),
                ),
                Expanded(
                  child: Column(
                    children: [
                      Text('12'),
                    ],
                  ),
                ),
                Form(
                  child: Expanded(
                    child: Column(
                      children: [
                        TextFormField(),
                        TextFormField(),
                        OutlinedButton(
                          onPressed: () async {},
                          child: _selectedButtons.contains(1)
                              ? const Icon(FluentSystemIcons
                                  .ic_fluent_checkmark_circle_filled)
                              : const Icon(FluentSystemIcons
                                  .ic_fluent_checkmark_circle_regular),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
});

Here is the current outcome:

Here is the required outcome:

My question: how can I reduce the space in the expanded to make all on the same line.

Answer 1

To reduce the space around the Expanded widgets, you can try wrapping them with a Flexible widget instead. Flexible works similarly to Expanded, but allows its children to take up less space if there is not enough space available. Here's an example of how you can modify your code to use Flexible:

Builder(builder: (context) {
  return Container(
    width: double.infinity,
    child: SingleChildScrollView(
      child: Column(
        children: [
          Card(
            child: Row(
              children: [
                Flexible(
                  flex: 1,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: const [
                          Text('No.'),
                        ],
                      ),
                    ],
                  ),
                ),
                Flexible(
                  flex: 1,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: const [
                          Text('No.'),
                        ],
                      ),
                    ],
                  ),
                ),
                Flexible(
                  flex: 1,
                  child: Column(
                    children: const [
                      Text('New Log'),
                    ],
                    crossAxisAlignment: CrossAxisAlignment.start,
                  ),
                ),
              ],
            ),
          ),
          Card(
            child: Row(
              children: [
                Flexible(
                  flex: 1,
                  child: Column(
                    children: [
                      Text('1'),
                    ],
                  ),
                ),
                Flexible(
                  flex: 1,
                  child: Column(
                    children: [
                      Text('12'),
                    ],
                  ),
                ),
                Flexible(
                  flex: 2,
                  child: Form(
                    child: Column(
                      children: [
                        TextFormField(),
                        TextFormField(),
                        OutlinedButton(
                          onPressed: () async {},
                          child: _selectedButtons.contains(1)
                              ? const Icon(FluentSystemIcons
                                  .ic_fluent_checkmark_circle_filled)
                              : const Icon(FluentSystemIcons
                                  .ic_fluent_checkmark_circle_regular),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
});

In this modified code, I replaced Expanded with Flexible and added a flex property to each one to specify how much space they should take up relative to each other. You can adjust these flex values to get the desired spacing between the widgets.