Absolute positioning of text on a container - flutter

Question

I want to absolutely position a text on a container.


    return Container(
      height: 150,
      width: 150,
      decoration: BoxDecoration(
          color: Color(0xE5E5EAee), borderRadius: BorderRadius.circular(20)),
      child: Text('Camping'),
    );

This is the present image This is what need to be acheived

Did tried to position it with the 'align positioned' dependency. But got stuck with the same result.

score 1 · Accepted Answer · answered Dec 16 '22 at 13:11

using your own example considering there is only one child in the container u can do the following but if u do have additional childrens the best way would be to use a Stack widget and use Align/Positioned widget to position the child widgets as per ur needs

Container(
          height: 150,
          width: 150,
          padding: EdgeInsets.only(bottom: 10), // how much space from the bottom
          alignment: Alignment.bottomCenter,
          decoration: BoxDecoration(
              color: Color(0xE5E5EAee),
              borderRadius: BorderRadius.circular(20)),
          child: Text('Camping'),
        )

Nams · Answer 2 · 2022-12-16T12:32:52.393

0

Wrap the Text widget with Align widget and give alignment as the below code

 Container(
       height: 150,
       width: 150,
       decoration: BoxDecoration(
          color: Color(0xE5E5EAee), borderRadius: 
      BorderRadius.circular(20)),
      child: Align(
          alignment: Alignment.bottomCenter, // ADD THIS
          child: Text('Camping')),
    ),

Then give padding as per your need

edited Dec 16 '22 at 12:32

answered Dec 16 '22 at 12:06

Nams

282
9

This works. With padding on bottom works as needed. – Vaishnav k Dec 16 '22 at 19:19

Wilson Toribio · Answer 3 · 2022-12-16T12:18:51.583

You can try this, use a Stack and positioned the Text with the widget Positioned as you need it, Positioned has 4 properties for position top, rigth, bottom and left for you to positioned the widget wherever you want.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      width: 150,
      decoration: BoxDecoration(
          color: Color(0xE5E5EAee), borderRadius: BorderRadius.circular(20)),
      child: Stack(
        children: [
          Positioned(
            top: 120,
            left: 48,
            child: Text('Camping'))
          ,
        ],
      ),
    );
    ;
  }
}

Absolute positioning of text on a container - flutter

I want to absolutely position a text on a container.

3 Answers3