Is it possible to create image from Text in a flutter? - flutter

Question

I am working on a app where user can logged into a app and can enter a text in a textformfileld it and can also apply different fontstyle and font family and generate a image from it.
is it possible ?
Any help would be highly appreciated

Answer 1

Here is an example for you. You can test it in an app.
It draw the text to a canvas then save canvas as an image. So you can apply any font style to ParagraphBuilder.
I hope it helps
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TextEditingController controller = TextEditingController();
Image? img;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextFormField(
controller: controller,
),
ElevatedButton(onPressed: _onPressedButton, child: const Text("Create Image")),
Container(width: 200, height: 200, color: Colors.blueGrey, child: img ?? Container())
],
),
),
);
}
void getCanvasImage(String str) async {
var builder = ParagraphBuilder(ParagraphStyle(fontStyle: FontStyle.normal));
builder.addText(str);
Paragraph paragraph = builder.build();
paragraph.layout(const ParagraphConstraints(width: 100));
final recorder = PictureRecorder();
var newCanvas = Canvas(recorder);
newCanvas.drawParagraph(paragraph, Offset.zero);
final picture = recorder.endRecording();
var res = await picture.toImage(100, 100);
ByteData? data = await res.toByteData(format: ImageByteFormat.png);
if (data != null) {
img = Image.memory(Uint8List.view(data.buffer));
}
setState(() {});
}
void _onPressedButton() {
getCanvasImage(controller.text);
}
}

Answer 2

You need to send your text through External API like this https://rapidapi.com/seikan/api/img4me-text-to-image-service/ after that you need to download the image and show it to the user