How can i combine text widget over the image

Mohammed Hamdan 0
Viewed 51

here is some of my process

1- i am picking image from galley using image_picker

2- i display it using Image.file widget

3- i wrap Image.file into stack widget and put Text at center like following

                    Stack(
                    alignment: Alignment.center,
                    children: [
                      Image.file(
                        File(myImage),
                        fit: BoxFit.cover,
                        height: double.infinity,
                        width: double.infinity,
                      ),
                      const Text('Hello world')
                    ],
                  ),

4- then uploading image to server using firebase_storage

now the question

How can i upload my image with my Text('Hello world')
in other world : How do I make text as part of an image

any plugins for that ?

What should I look for?

dart flutter
1 Answers

You can use screenshot package, and take a screen shot of stack widget and send you screenshot image to your server. like this:

ScreenshotController screenshotController = ScreenshotController();

Screenshot(
    controller: screenshotController,
    child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Image.file(
                        File(myImage),
                        fit: BoxFit.cover,
                        height: double.infinity,
                        width: double.infinity,
                      ),
                      const Text('Hello world')
                    ],
                  ),
),

and you can get the image like this:

screenshotController.capture().then((Uint8List image) {
    //Capture Done
    setState(() {
        _imageFile = image;
    });
}).catchError((onError) {
    print(onError);
});

here _imageFile is Uint8List , and you can send _imageFile to your server.

eamirho3ein0
Related