Home > Enterprise >  Is it possible to create image from Text in a flutter?
Is it possible to create image from Text in a flutter?

Time:11-12

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

CodePudding user response:

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

CodePudding user response:

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);
  }
}
  • Related