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

Absolute positioning of text on a container – flutter

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.

Tags:

3

Answers


  1. 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

    Login or Signup to reply.
  2. 0

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

    Output result

    Login or Signup to reply.
  3. 0

    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'),
        )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search