TSS Poster #

A powerful Flutter package for creating posters, flyers, and social media graphics.

Features #

• Drag & Drop Editor: Add text, images, and shapes. Move, resize, and rotate layers.
• Auto-Creator: Generate posters automatically from a simple form.
• Templates: Support for free and paid templates.
• Export: Export designs as high-quality images.
• Customizable: Built-in property editor for text and colors.

Getting Started #

Add tss_poster to your pubspec.yaml:

dependencies:
  tss_poster: ^0.0.1

Step-by-Step Guide #

1. Installation #

Add the package to your pubspec.yaml:

dependencies:
  tss_poster: ^1.2.0

2. Basic Usage #

Simply add the PosterEditor widget to your page. This gives you a full-featured editor with all tools enabled.

import 'package:tss_poster/tss_poster.dart';

class CreatePosterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PosterEditor(),
    );
  }
}

3. Customizing the Toolbar #

You can control which tools are visible to the user. For example, to create a text-only editor:

PosterEditor(
  showImage: false, // Hide image tool
  showShape: false, // Hide shape tool
  showText: true,   // Show text tool (default)
)

4. Handling Exports #

By default, the editor saves the image to the device. To handle the image data yourself (e.g., upload to a server), use the onExport callback:

PosterEditor(
  showExport: false, // Hide default export button
  onExport: (Uint8List imageBytes) async {
    // Upload 'imageBytes' to your server
    await myApiService.uploadPoster(imageBytes);
  },
)

You can then trigger the export programmatically using a controller.

5. Programmatic Control #

Use PosterController to manipulate the editor from outside:

class MyPage extends StatefulWidget {
  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  final _controller = PosterController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // External controls
        Row(
          children: [
            ElevatedButton(
              onPressed: () => _controller.addLayer(TextLayer(text: "New Text")),
              child: Text("Add Text"),
            ),
            ElevatedButton(
              onPressed: () async {
                // Get poster data
                final json = _controller.poster.toJson();
                print(json);

                // Export image
                final image = await _controller.exportAsPNG();
                // Use 'image' (ui.Image) as needed
              },
              child: Text("Save & Export"),
            ),
          ],
        ),
        Expanded(
          child: PosterEditor(controller: _controller),
        ),
      ],
    );
  }
}

Basic Editor #

import 'package:tss_poster/tss_poster.dart';

class MyEditor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PosterEditor();
  }
}

Customized Editor #

You can customize the editor by hiding specific tools or handling the export manually:

PosterEditor(
  showText: true,
  showImage: true,
  showShape: false, // Hide shape tool
  showExport: false, // Hide default export button
  onExport: (Uint8List imageBytes) {
    // Handle the exported image bytes (e.g., upload to server)
    print('Exported image size: ${imageBytes.length}');
  },
)

Using Your Own Controller #

You can control the editor programmatically by passing a PosterController:

final controller = PosterController();

// In your build method:
PosterEditor(controller: controller);

// Later:
controller.addLayer(TextLayer(text: "Hello"));

Auto-Generate Poster #

AutoPosterForm(
  onGenerate: (poster) {
    // Handle generated poster
  },
)

License #

MIT