flutter - Container with bottom text field

Question

I have circle avatars. I want to add each circle's avatar name at the bottom of the avatar. But I can not do this. when I run the below code, the text appears on the avatar.

My code

child: Container(
              height: 60.0,
              width: 60.0,
              margin: EdgeInsets.all(6.0),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100.0),
                  boxShadow: [
                    new BoxShadow(
                        color: Color.fromARGB(100, 20, 0, 0),
                        blurRadius: 5.0,
                        offset: Offset(5.0, 5.0))
                  ],
                  border: Border.all(
                      width: 2.0,
                      style: BorderStyle.solid,
                      color: Colors.purple),
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(userData[x]["image"]))),
                      child: new Text(userData[x]["name"], style: TextStyle(fontSize: 20.0),),
                      )
                      ));

Just give top padding around the Text widget. – Jiten Basnet Mar 13 '20 at 11:38 — Jiten Basnet, Mar 13 '20 at 11:38
@JitenBasnet it doesnt work properly. same. – jancooth Mar 13 '20 at 11:44 — jancooth, Mar 13 '20 at 11:44
@jancooth I updated the answer please check – Blasanka Mar 13 '20 at 12:20 — Blasanka, Mar 13 '20 at 12:20

score 4 · Accepted Answer · edited Mar 13 '20 at 13:19

If you are trying to Implementing like this:

then you can use Column or Stack widget. I used Stack with Align widget.

Code:


Container(
       height: 80.0,
       width: 80.0,
       child: Stack(
        children: <Widget>[
           Container(
             height: 60.0,
             width: 60.0,
             margin: EdgeInsets.all(6.0),
             decoration: BoxDecoration(
               //  shape: BoxShape.circle,
                 borderRadius: BorderRadius.circular(100.0),
                 boxShadow: [
                   new BoxShadow(
                       color: Color.fromARGB(100, 20, 0, 0),
                       blurRadius: 5.0,
                       offset: Offset(5.0, 5.0))
                 ],
                 border: Border.all(
                     width: 2.0,
                     style: BorderStyle.solid,
                     color: Colors.purple),
                 image: DecorationImage(
                     fit: BoxFit.cover,
                     image: NetworkImage("https://image.shutterstock.com/image-photo/cute-baby-girl-sitting-on-260nw-689375770.jpg"))),
                   // child:
           ),
           Align(
             alignment: Alignment.bottomCenter,
             child:  new Text("name", style: TextStyle(fontSize: 20.0),),
           )
         ],
      ),
    )

@jancooth pleasure's all mine :) – Shruti Ramnandan Sharma Mar 13 '20 at 13:12 — Shruti Ramnandan Sharma, Mar 13 '20 at 13:12

score 1 · Answer 2 · answered Mar 13 '20 at 12:19

You can try something like this following:

Container(
      child: Column(
        children: <Widget>[
          Container(
            height: 60.0,
            width: 60.0,
            alignment: Alignment.bottomCenter,
            margin: EdgeInsets.all(6.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100.0),
                boxShadow: [
                  new BoxShadow(
                      color: Color.fromARGB(100, 20, 0, 0),
                      blurRadius: 5.0,
                      offset: Offset(5.0, 5.0))
                ],
                border: Border.all(
                    width: 2.0,
                    style: BorderStyle.solid,
                    color: Colors.purple),
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(
                        "https://source.unsplash.com/random"))),
          ),
          Text(
            "text....",
            style: TextStyle(fontSize: 16.0),
          )
        ], 
      ),
    )

Manpreet Singh Pandher · Answer 3 · 2020-03-13T12:39:55.033

you can use stack widget, like this:-

Container(
          height: 60,
          child: Stack(
            children: <Widget>[
            Container(
            height: 60.0,
            width: 60.0,
            margin: EdgeInsets.all(6.0),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100.0),
                boxShadow: [
                  new BoxShadow(
                      color: Color.fromARGB(100, 20, 0, 0),
                      blurRadius: 5.0,
                      offset: Offset(5.0, 5.0))
                ],
                border: Border.all(
                    width: 2.0,
                    style: BorderStyle.solid,
                    color: Colors.purple),
                image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(userData[x]["image"]))),
          ),
              Positioned(
                bottom: 5.0,
                right:5.0
                child: Text(userData[x]["name"], style: TextStyle(fontSize: 20.0),),
              )
            ],
          ),
        )

where would you like to display the text ,on the bottom of the image or below the image? — Manpreet Singh Pandher, Mar 13 '20 at 12:09
because of the over text size the text can't placed at the bottom try to decline the the text size or increase the size of container — Manpreet Singh Pandher, Mar 13 '20 at 12:21

flutter - Container with bottom text field

3 Answers3