Reducing Spacing in an Expanded in Flutter Project

0 votes

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:

enter image description here

Here is the required outcome:

enter image description here

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

Mar 16, 2023 in Android by sarit
• 1,830 points
3,474 views

1 answer to this question.

0 votes

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.

answered Mar 20, 2023 by vishalini

Related Questions In Android

0 votes
1 answer
0 votes
0 answers

What is an Intent in Android?

I have a few questions related to ...READ MORE

Nov 9, 2022 in Android by Edureka
• 12,690 points
181 views
0 votes
2 answers

How can I inspect element in an Android browser?

On Android smartphones, there are various ways ...READ MORE

answered Nov 15, 2022 in Android by Edureka
• 13,620 points
544 views
0 votes
0 answers

How to define a circle shape in an Android XML drawable file?

I'm having some trouble locating the Android ...READ MORE

Nov 22, 2022 in Android by Edureka
• 12,690 points
1,657 views
0 votes
1 answer

What is the future of flutter?

Hi@MD, Flutter is a rather new cross-platform framework ...READ MORE

answered Jul 17, 2020 in Others by akhtar
• 38,230 points
903 views
0 votes
1 answer

What is Flutter?

Hi@akhtar, Flutter is an app SDK for building ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,440 points
1,067 views
0 votes
1 answer

How to install Flutter in Windows system?

Hi@akhtar, You can follow the below-given steps to ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,440 points
1,513 views
0 votes
1 answer

How to add a ListView to a Column in Flutter?

To add a ListView to a Column ...READ MORE

answered Mar 9, 2023 in Android by pooja
8,705 views
0 votes
1 answer

How do I disable a Button in Flutter?

To disable a button in Flutter, you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
9,523 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP