How to place an online symbol inside a flutter image

Asked

Viewed 417 times

0

Hi, I have to put an online symbol inside an image, but I don’t know how to do it, I want something like :

inserir a descrição da imagem aqui

All I could do was:

inserir a descrição da imagem aqui

As I pass this green ball to image, as in the example up there, my code:

 Widget _itemListOnline(String texto, String imagem){
      return Container(
        padding: EdgeInsets.only(left: 30),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              children: [
                Container(
                  width: 70,
                  height: 70,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    image: DecorationImage(
                      image: AssetImage("$imagem"),
                    ),
                  ),
                ),
                Container( //Esse é o símbolo de online
                  width: 15,
                  height: 15,
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(0, 255, 0, 1),
                    shape: BoxShape.circle,
                  ),
                ),
              ],
            ),
            Text("$texto")
          ],
        ),
      );
  }

1 answer

1


It’s simple, you can use the widget Stack for this. And with the Positioned control the position of the online.

return Stack(
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: NetworkImage(
                  'https://api.adorable.io/avatars/283/[email protected] to Clipboard'),
            ),
          ),
        ),
        Positioned(
          bottom: 10,
          right: 10,
          child: Container(
            width: 15,
            height: 15,
            decoration: BoxDecoration(
              color: Color.fromRGBO(0, 255, 0, 1),
              shape: BoxShape.circle,
            ),
          ),
        ),
      ],
    );

Upshot:

inserir a descrição da imagem aqui

Take an example running on the dartpad.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.