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
Asked
Active
Viewed 4,500 times
3
-
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 Answers
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)),
),
),
)),
),
);
}
}

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
-
-
1Thank 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
-
-
-
@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
-