Home > Software engineering >  Absolute positioning of text on a container - flutter
Absolute positioning of text on a container - flutter

Time:12-17

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'),
    );

Output result

CodePudding user response:

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

CodePudding user response:

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'),
        )

  • Related