gs_template_maker 1.0.1

gs_template_maker: ^1.0.1 copied to clipboard

example/lib/main.dart

/// GS Template Maker - Example Application
///
/// This example demonstrates how to use the GS Template Maker library
/// in a Flutter web application.

library example_app;

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:gs_template_maker/gs_template_maker.dart';

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

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [ChangeNotifierProvider(create: (_) => TemplateProvider())],
      child: MaterialApp(
        title: 'GS Template Maker - Example',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
          useMaterial3: true,
          appBarTheme: const AppBarTheme(
            elevation: 0,
            backgroundColor: Colors.white,
            foregroundColor: Colors.black87,
          ),
        ),
        home: const ExampleHomePage(),
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

class ExampleHomePage extends StatelessWidget {
  const ExampleHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GS Template Maker - Example'),
        actions: [
          IconButton(
            icon: const Icon(Icons.info_outline),
            onPressed: () => _showAboutDialog(context),
          ),
        ],
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.web, size: 64, color: Colors.blue),
            SizedBox(height: 16),
            Text(
              'GS Template Maker Library',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(
              'Web-focused template creation library for Flutter',
              style: TextStyle(fontSize: 16, color: Colors.grey),
            ),
            SizedBox(height: 32),
            Text(
              'Features:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
            ),
            SizedBox(height: 16),
            _FeatureList(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (_) => const GSTemplateEditorScreen()),
          );
        },
        icon: const Icon(Icons.edit),
        label: const Text('Launch Template Editor'),
      ),
    );
  }

  void _showAboutDialog(BuildContext context) {
    showAboutDialog(
      context: context,
      applicationName: 'GS Template Maker',
      applicationVersion: '1.0.0',
      applicationIcon: const Icon(Icons.web, size: 48),
      children: [
        const Text(
          'A Flutter web-focused library for creating and editing '
          'visual templates with drag-and-drop functionality, '
          'layer management, and property editing.',
        ),
        const SizedBox(height: 16),
        const Text('Features:', style: TextStyle(fontWeight: FontWeight.bold)),
        const Text('• Template Creation & Management'),
        const Text('• Drag & Drop Canvas'),
        const Text('• Text and Shape Layers'),
        const Text('• Real-time Property Editing'),
        const Text('• JSON Export'),
        const Text('• Background Image Support'),
        const Text('• Web Optimized'),
      ],
    );
  }
}

class _FeatureList extends StatelessWidget {
  const _FeatureList();

  @override
  Widget build(BuildContext context) {
    final features = [
      ('🎨', 'Template Creation'),
      ('🖱️', 'Drag & Drop Canvas'),
      ('📝', 'Text Layers'),
      ('🔷', 'Shape Layers'),
      ('🎯', 'Property Panel'),
      ('📤', 'JSON Export'),
      ('🖼️', 'Background Support'),
      ('📱', 'Web Optimized'),
    ];

    return Column(
      children: features.map((feature) {
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 4),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(feature.$1, style: const TextStyle(fontSize: 20)),
              const SizedBox(width: 8),
              Text(feature.$2),
            ],
          ),
        );
      }).toList(),
    );
  }
}