3

I am creating a Meme generator application in flutter..i just need to know is there a way that user itself can add text over image and drag that text anywhere in the image area...so that the picture would look funny .I tried dragbox widget but dont know how can i use that for textfield..so that i too can move my text anywhere on the image.I need something like this

akshay dhone
  • 43
  • 1
  • 6
  • You can include images in your post. You should at least an example of what you have tried so far. – Mike Sep 17 '19 at 10:20

1 Answers1

10
    class TextOverImage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        Size size = MediaQuery.of(context).size;
        return Scaffold(
        appBar: AppBar(
            centerTitle: true,
            title: Text('Text Over Image Image Example'),
        ),
        body: Center(
            child: Container(
            height: 300,
            width: 300,
            child: Stack(
                children: <Widget>[
                Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        color: Colors.blue,
                        image: DecorationImage(
                            image: new NetworkImage(
                                "https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
                            fit: BoxFit.fill)),
                ),
                HomePage()
                ],
            ),
            ),
        ),
        );
    }
    }

    class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {
    Offset offset = Offset.zero;

    @override
    Widget build(BuildContext context) {
        return Container(
        child: Positioned(
            left: offset.dx,
            top: offset.dy,
            child: GestureDetector(
                onPanUpdate: (details) {
                setState(() {
                    offset = Offset(
                        offset.dx + details.delta.dx, offset.dy + details.delta.dy);
                });
                },
                child: SizedBox(
                width: 300,
                height: 300,
                child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Center(
                    child: Text("You Think You Are Funny But You Are Not",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 28.0,
                            color: Colors.red)),
                    ),
                ),
                )),
        ),
        );
    }
    }

enter image description here

Amit Prajapati
  • 13,525
  • 8
  • 62
  • 84
  • thanks for the solution @amitprajapati..its working totally fine..but a small additional part is yet missing..is there a way i can manually drag and drop the text at another position on the image itself..i have some idea about **"Dragbox"** widget..but dont know how can i integrate text within it..if you would suggest some ,it would be great..! – akshay dhone Sep 17 '19 at 11:54
  • yes @amit prajapati..i tried the updated code but i am facing the error of "Media query size"..so since yesterday ..i am trying to solve the issue..but dint got through – akshay dhone Sep 18 '19 at 09:42
  • I tried now..it worked like a charm..Thank you so much for the solution@amit prajapati..! – akshay dhone Sep 18 '19 at 09:55
  • Enjoy your code, don't forgot to check answer as mark – Amit Prajapati Sep 18 '19 at 09:59
  • 1
    Thank you so much again..i checked the answer as marked..Your efforts are priceless..! – akshay dhone Sep 18 '19 at 10:22
  • @amitprajapati..is there a way i can add the same draggable text on a image captured from camera/gallery..?..if there is please try to answer this,it would be very helpful for me..i searched on google but dint found any..https://stackoverflow.com/questions/58022688/how-to-add-a-text-on-a-image-captured-from-camera-or-gallery-in-flutter?noredirect=1#comment102449098_58022688 – akshay dhone Sep 20 '19 at 06:57
  • @amitprajapati.What if i want to save the image with the text in firebase storage..any help would be appreciated..thanks – akshay dhone Sep 25 '19 at 11:19
  • @akshaydhone will look into this and update you to night – Amit Prajapati Sep 25 '19 at 11:21
  • how can we add more text? – Muhammad Anus Jan 21 '21 at 08:35
  • @muhammad I'm not getting actually what your question is. If you want text there is just add text in Text widget – Amit Prajapati Jan 23 '21 at 07:59
  • @AmitPrajapati i waana to get this can user add their text by clicking on Floating Button...Like *PixelLab* Add Text In Image – Muhammad Anus Jan 25 '21 at 11:36
  • @muhammad it's not Dynamic you have to do your self sorry – Amit Prajapati Jan 25 '21 at 12:16