How to add text on an Image in flutter?

Question

Here's the code for an image with border,

Container(
 child: Image.network(
        "https://drive.google.com/uc?export=view&id=139Wu8bbLz5ubRECzdEmZof8crfGhx0oA", height: 140,fit: BoxFit.cover),
 decoration: BoxDecoration(
   border: Border.all(color: Colors.black12, width: 1),
            ),
          ),

How do I add text to it in such a way that I get an output like in the given image ?

Answer 1

you can use Stack, here is a sample:

Stack(
  children: [
    Container(
      child: Image.network(
        "https://drive.google.com/ucexport=view&id=1GgUaQNmNaY2h2oRqgBECQZzJ4I6MnV8G",
        height: 140,
        fit: BoxFit.cover,
      ),
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(7)),
        border: Border.all(color: Colors.black12, width: 1),
      ),
    ),
    Positioned(
      child: Text(
        'Vegetables',
        style: TextStyle(
          fontSize: 42,
          shadows: <Shadow>[
            Shadow(
              offset: Offset(1.0, 5.0),
              blurRadius: 2.0,
              color: Color.fromARGB(255, 0, 0, 0),
            ),
          ],
        ),
      ),
      top: 45,
      left: 20,
    )
  ],
)

Answer 2

Instead of having image as a child of Container, you can use image:ImageDecoration and have the Text as the child:

   Container(
                    child: Text('Vegetables'),
                    decoration: BoxDecoration(
                      image: const DecorationImage(
                        image: NetworkImage(
                            'https://drive.google.com/ucexport=view&id=1GgUaQNmNaY2h2oRqgBECQZzJ4I6MnV8G'),
                        fit: BoxFit.cover,
                      ),
                      border: Border.all(color: Colors.black12, width: 1),
                    ),
                  ),

Answer 3

Try below code hope its help to you

     Container(
              height: 100,
              width: 200,
              child: Text(
                'data',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
              decoration: BoxDecoration(
                image: const DecorationImage(
                  image: NetworkImage(
                      'https://drive.google.com/uc?export=view&id=1GgUaQNmNaY2h2oRqgBECQZzJ4I6MnV8G'),
                  fit: BoxFit.cover,
                ),
                border: Border.all(color: Colors.black12, width: 1),
              ),
            ),

Your result screen

Answer 4

You can use Stack Widget to make beautiful designed widget