I want to place row at the bottom of the screen wrapping it with expanded widget is not working-CodePudding

I want to place this row at the bottom of the screen

 Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    SizedBox(
      width: 40,
    ),
    CircleAvatar(
      backgroundColor: Colors.blue,
      radius: 27,
      child: Icon(Icons.add_call),
    ),
    SizedBox(
      width: 40,
    ),
    CircleAvatar(
        backgroundColor: Colors.blue,
        radius: 27,
        child: Icon(Icons.mail)),
    SizedBox(
      width: 40,
    ),
    CircleAvatar(
        backgroundColor: Colors.blue,
        radius: 27,
        child: Icon(Icons.credit_card)),
  ],
),

CodePudding user response：

You can use bottomNavigationBar of Scaffold.

 return Scaffold(
      bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: 40,
          ),
          CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 27,
            child: Icon(Icons.add_call),
          ),
          SizedBox(
            width: 40,
          ),
          CircleAvatar(
              backgroundColor: Colors.blue,
              radius: 27,
              child: Icon(Icons.mail)),
          SizedBox(
            width: 40,
          ),
          CircleAvatar(
              backgroundColor: Colors.blue,
              radius: 27,
              child: Icon(Icons.credit_card)),
        ],
      ),

CodePudding user response：

To move Row to the bottom of the screen in Column you can use mainAxisAlignment: MainAxisAlignment.end property in Column.

Updated Code:

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        SizedBox(
          width: 40,
        ),
        CircleAvatar(
          backgroundColor: Colors.blue,
          radius: 27,
          child: Icon(Icons.add_call),
        ),
        SizedBox(
          width: 40,
        ),
        CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 27,
            child: Icon(Icons.mail)),
        SizedBox(
          width: 40,
        ),
        CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 27,
            child: Icon(Icons.credit_card)),
      ],
    ),
  ],
);

CodePudding user response：

if you want to place the row on the bottom you can't wrap the row with an expanded widget.

but if you want that the row has the width of the screen you can set the width to that:

width: MediaQuery.of(context).size.width,

and if you want place the row to the bottom then you can do that with a flexible sizedBox

Column(
  children: [
    ...,
    Flexible(
      child: SizedBox(height: MediaQuery.of(context).size.height,),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        SizedBox(
          width: 40,
        ),
        CircleAvatar(
          backgroundColor: Colors.blue,
          radius: 27,
          child: Icon(Icons.add_call),
        ),
        SizedBox(
          width: 40,
        ),
        CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 27,
            child: Icon(Icons.mail)),
        SizedBox(
          width: 40,
        ),
        CircleAvatar(
            backgroundColor: Colors.blue,
            radius: 27,
            child: Icon(Icons.credit_card)),
      ],
    ),
  ],
)

;

CodePudding user response：

You can try this as well, Wrap Column with Align and Align with stack

Stack(
     children: <Widget>[
              Align(
                    alignment: Alignment.bottomCenter,
                    child: Column()
                    
    ],)