Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a draggable "textfield" to add text over images in flutter?

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

like image 695
akshay dhone Avatar asked Feb 03 '26 08:02

akshay dhone


1 Answers

    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

like image 127
Amit Prajapati Avatar answered Feb 06 '26 10:02

Amit Prajapati



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!