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

How to add some space to row items in flutter?

I have a screen that contains a Row widget with 3 Column children. I want to add a space for the first children and another space for the second children. In general, I want a screen like this:

Screenshot

I try with these codes but not work correctly.

Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Column(
                        children: [
                          item(),
                          item(),
                          item(),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 20),
                      child: Column(
                        children: [
                          item(),
                          item(),
                          item(),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 5),
                      child: Column(
                        children: [
                          item(),
                          item(),
                          item(),
                        ],
                      ),
                    ),
                  ),
                ],
              );

Can you help me?

Tags:

3

Answers


  1. 0

    Add a SizedBox to the children of the Rows, each with different height.

    Login or Signup to reply.
  2. 0

    You can add a SizedBox between the items. Like:

                  Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(top: 5),
                  child: Column(
                    children: [
                      item(),
                      SizedBox(height:20),
                      item(),
                      SizedBox(height:20),
                      item(),
                    ],
                  ),
                ),
              ),

    I think that is simple, but works.
    You can use a Container with margins in the items too.

    If you want a more complex item, you can use ListView.separated.

    ListView.separated(
  separatorBuilder: (context, index) => Divider(
        color: Colors.black,
      ),
  itemCount: 20,
  itemBuilder: (context, index) => Padding(
        padding: EdgeInsets.all(8.0),
        child: Center(child: Text("Index $index")),
      ),
)
    Login or Signup to reply.
  3. 0

    I hope this will help you and I just modified it with some Container().

    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(top: 10),
            child: Column(
              children: [
                Container(
                  height: 50,
                  color: Colors.red,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(top: 20),
            child: Column(
              children: [
              //////here you have to add SizedBox widget with different heights
                const SizedBox(
                  height: 40,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
              ],
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(top: 5),
            child: Column(
              children: [
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
                Container(
                  color: Colors.red,
                  height: 50,
                ),
              ],
            ),
          ),
        ),
      ],
    )

    Output:enter image description here

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

Back To Top
Search