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

Reducing Spacing in an Expanded in Flutter Project

I am trying to reduce the spaces around an expanded in my flutter project as it is taking a lot 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 aligning 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.

Tags:

2

Answers


  1. 0

    You need to use Row instead of Column on for TextFiled.

    Form(
  child: Expanded(
    child: Row(
      children: [
        Expanded(child: TextFormField()),
        SizedBox(width: 8),
        Expanded(child: TextFormField()),
      ],
    ),
  ),
),

    And there are top level nested widgets like Row>Expanded>Column for single item can be remove.

    Login or Signup to reply.
  2. 0

    You have used so many nested Rows and Columns which are redundant. Check below code for your desired result with screenshot.

    class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(10),
          width: double.infinity, // Set the width of the container to be as wide as possible
          child: SingleChildScrollView(
            child: Column(
              children: [
                Card(
                  child: Row(
                    children: const [
                      Expanded(
                        flex: 1,
                        child: Text('No.', textAlign: TextAlign.center,),
                      ),
                      Expanded(
                        flex: 2,
                        child: Text('No.', textAlign: TextAlign.center,),
                      ),
                      Expanded(
                        flex: 4,
                        child: Text('New Log'),
                      ),
                    ],
                  ),
                ),
                Card(
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 8.0, right: 8.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        const Expanded(
                          flex: 1,
                          child: Text('1', textAlign: TextAlign.center,),
                        ),
                        const Expanded(
                          flex: 2,
                          child: Text('12', textAlign: TextAlign.center,),
                        ),
                        Expanded(
                          flex: 4,
                          child: Form(
                            child: Row(
                              children: [
                                Expanded(flex:2, child: TextFormField()),
                                const Spacer(),
                                Expanded(flex: 2, child: TextFormField()),
                                const Spacer(),
                                ElevatedButton(style: ElevatedButton.styleFrom(
                                  elevation: 5,
                                  backgroundColor: Colors.white,
                                  shape: RoundedRectangleBorder(
                                    side: const BorderSide(color: Colors.grey),
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                ),onPressed: () {}, child: const Icon(Icons.check_circle, color: Colors.grey,))
                              ],
                            ),
                          ),
                        )
                        // Form(
                        //   child: Expanded(
                        //     child: Column(
                        //       children: [
                        //         TextFormField(),
                        //         TextFormField(),
                        //         OutlinedButton(
                        //           onPressed: () async {},
                        //           child: Icon(Icons.check),
                        //         ),
                        //       ],
                        //     ),
                        //   ),
                        // ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

    Screenshot

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

Back To Top
Search