GS Template Maker #

A Flutter web-focused library for creating and editing visual templates with drag-and-drop functionality, layer management, and property editing.

Features #

• 🎨 Template Creation: Create and manage visual templates with customizable canvas sizes and ratios

• 🖱️ Drag & Drop Canvas: Interactive canvas with zoom controls and layer manipulation

• 📝 Text Layers: Add and edit text layers with customizable fonts, colors, and positioning

• 🔷 Shape Layers: Create and customize shapes (rectangles, circles, triangles, etc.)

• 🎯 Property Panel: Real-time property editing for selected layers

• 📤 Export: JSON export functionality for templates

• 🔄 Smart Export: Base64 background images automatically converted to placeholder URLs for web optimization

• 🖼️ Background Support: Set and manage background images for templates

• 📱 Web Optimized: Specifically designed for web applications

Quick Start #

Installation #

Add gs_template_maker to your pubspec.yaml:

dependencies:
  gs_template_maker: ^1.0.0

------------------OR----------------

# Add to pubspec.yaml
dependencies:
  gs_template_maker:
    git:
      url: https://github.com/GauravNikk/Image-Template-Maker-Flutter.git
      ref: gs_template_maker

Basic Usage #

1. Simple Implementation

import 'package:gs_template_maker/gs_template_maker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => TemplateProvider()),
      ],
      child: MaterialApp(
        home: GSTemplateEditorScreen(),
      ),
    );
  }
}

2. Custom Implementation

import 'package:gs_template_maker/gs_template_maker.dart';

class CustomTemplateEditor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => TemplateProvider()),
      ],
      child: Scaffold(
        appBar: AppBar(title: Text('My Template Editor')),
        body: Row(
          children: [
            Expanded(
              child: GSTemplateCanvas(),
            ),
            GSPropertyPanel(),
          ],
        ),
      ),
    );
  }
}

API Reference #

Core Widgets #

GSTemplateEditorScreen

Complete template editor with all features integrated.

GSTemplateCanvas

Interactive canvas for template editing with drag-and-drop support.

GSPropertyPanel

Properties panel for editing selected layers.

Models #

TemplateModel

final template = TemplateModel(
  id: 'template_1',
  name: 'My Template',
  ratio: '16:9',
  canvas: CanvasModel(width: 800, height: 450, background: BackgroundModel(type: 'image')),
  layers: [],
);

TextLayerModel

final textLayer = TextLayerModel(
  id: 'text_1',
  type: 'text',
  x: 50,
  y: 50,
  fontSize: 24,
  color: '#333333',
  font: 'poppins_regular.ttf',
  defaultText: 'Hello World',
  label: 'Title',
);

ShapeLayerModel

final shapeLayer = ShapeLayerModel(
  id: 'shape_1',
  type: 'shape',
  x: 100,
  y: 100,
  shapeType: 'rectangle',
  width: 200,
  height: 100,
  fillColor: '#2196F3',
);

Provider #

TemplateProvider

State management for template operations.

final provider = context.read<TemplateProvider>();

// Create new template
provider.createNewTemplate('My Template', '16:9', 800, 450);

// Add text layer
provider.addTextLayer(
  id: 'text_1',
  label: 'Title',
  defaultText: 'Hello World',
  x: 50,
  y: 50,
);

// Add shape layer
provider.addShapeLayer(
  id: 'shape_1',
  shapeType: 'rectangle',
  x: 100,
  y: 100,
  width: 200,
  height: 100,
  fillColor: '#2196F3',
);

// Export template
final json = provider.exportToJson();

Utilities #

File Picker Service #

Web-optimized file picking for images.

final result = await FilePickerService.pickImageWithDimensions();
if (result != null) {
  print('Image: ${result.dataUrl}');
  print('Size: ${result.width}x${result.height}');
}

Dependencies #

• flutter (SDK)
• provider - State management
• json_annotation - Model serialization
• http - HTTP requests
• file_picker - File handling

Development Dependencies #

• flutter_test
• flutter_lints
• json_serializable
• build_runner

Example #

The library includes a complete example application that demonstrates all features. You can find it in the lib/main.dart file.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing #

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support #

For support and questions, please open an issue in the GitHub repository.

GS Template Maker - Making template creation easy for Flutter web developers.