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

Why is Spacer() not working in this structure in Flutter?

I have just started learning flutter, and I cannot figure out why a Spacer() will not work in the following structure between the 2 Texts, shouldnt it create space vertically between the 2 Text so that the height of the column is the same as the height of the circular avatar?

import 'package:flutter/material.dart';

class TestSpacer extends StatelessWidget {
  const TestSpacer({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Column(
        children: [
          Row(
            children: [
              CircleAvatar(
                radius: 48,
                backgroundColor: Colors.white,
                child: Icon(Icons.person),
              ),
              Column(
                children: [
                  Text("123"),
                  // Spacer(),
                  Text("456"),
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}

I tried putting expandables around the column that wraps the text, and still the spacer doesnt work as expected.

Tags:

2

Answers


  1. 0

    The Spacer widget fills the available space within the column.

    Lets wrap the column with a red colored container to troubleshoot.

                  Container(
                color: Colors.red,
                child: const Column(
                  children: [
                    Text("123"),
                    Spacer(),
                    Text("456"),],),),

    You will see that the size of the column is small, leaving no space for the Spacer() to expand. This is because it has no parent widget that determines the height and width of the Column.

    enter image description here

    If we wrap them into an Expanded widget, it only expands horizontally.

    enter image description here

    So your only solution is to specify the height parameter of the Container (or SizedBox).

    Instead of hard coding it, you can make the height match the CircleAvatar in two ways.

    1. Label a variable:

               const double myRadius = 48.0;
         CircleAvatar(
             radius: myRadius,
           ),
         Expanded(child: 
           Container(
             height: myRadius * 2, // *2 to match diameter
             color: Colors.red,
             child: const Column(
               children: [
                 Text("123"),
                 Spacer(),
                 Text("456"),],),),),

    2. Incase CircleAvatar is not the only widget you are trying to align with, you can use the LayoutBuilder widget to get the height constraint of the whole Row.

        LayoutBuilder(
     builder: (BuildContext context, BoxConstraints constraints){ 
       return Row(
    children: [
       const CircleAvatar(
         radius: 48,
         backgroundColor: Colors.white,
         child: Icon(Icons.person),
       ),
      Expanded(child: 
       Container(
         height: constraints.maxHeight,
         color: Colors.red,
         child: const Column(
           children: [
             Text("123"),
             Spacer(),
             Text("456"),],),),),],);}),

    enter image description here

    Login or Signup to reply.
  2. 0

    Hope this will help u,

    return Scaffold(
      appBar: AppBar(),
      body: const Column(
        children: [
          IntrinsicHeight(
          child: Row(
            children: [
              CircleAvatar(
                radius: 48,
                backgroundColor: Colors.white,
                child: Icon(Icons.person),
              ),
              Column(
                children: [
                  Text("123"),
                  Spacer(),
                  Text("456"),
                ],
              )
            ],
          ))
          
        ],
      ),
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search