genui_button 0.0.3

genui_button: ^0.0.3 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:genui/genui.dart';
import 'package:genui_button/genui_button.dart';

// 1. Initialize the GenUI Message Processor equipped with our custom button:
final a2uiMessageProcessor = A2uiMessageProcessor(
  catalogs: [
    CoreCatalogItems.asCatalog().copyWith([genUiButton]),
  ],
);

// 2. Set up the AI Content Generator (e.g., Firebase, Gemini, etc.)
// Provide it with the tools/system instructions to tell the AI how to use it.
/*
final contentGenerator = FirebaseAiContentGenerator(
  systemInstruction: 'Use GenUIButton to provide user actions with custom styling.',
  additionalTools: a2uiMessageProcessor.getTools(),
);
*/

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GenUIButton Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GenUIButton Example')),
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Here are some custom UI components from the catalog:',
              ),
              const SizedBox(height: 20),

              // Button 1: Custom Colored Button
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Custom Colored Button',
                        'type': 'filled',
                        'backgroundColor': '#FF5733',
                        'foregroundColor': '#FFFFFF',
                        'borderRadius': 8.0,
                        'elevation': 4.0,
                        'padding': 16.0,
                        'fontSize': 18.0,
                        'tooltip': 'I am a custom colored button',
                      },
                      id: 'mock_btn_1',
                    ),
                  );
                },
              ),
              const SizedBox(height: 20),

              // Button 2: Theme Fallback Button (No custom colors)
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Theme Fallback Button',
                        'type': 'filled',
                        'borderRadius': 8.0,
                        'elevation': 2.0,
                        'padding': 16.0,
                        'fontSize': 16.0,
                        'tooltip': 'I use the app theme primary color',
                      },
                      id: 'mock_btn_2',
                    ),
                  );
                },
              ),
              const SizedBox(height: 20),

              // Button 3: Theme Fallback Outlined Button
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Outlined Theme Button',
                        'type': 'outlined',
                        'borderRadius': 12.0,
                        'padding': 16.0,
                        'fontSize': 16.0,
                        'tooltip': 'I use the app theme outlne color',
                      },
                      id: 'mock_btn_3',
                    ),
                  );
                },
              ),
              const SizedBox(height: 20),

              // Button 4: Full Width Theme Fallback Button
              Builder(
                builder: (ctx) {
                  return genUiButton.widgetBuilder(
                    _MockContext(
                      context: ctx,
                      data: {
                        'label': 'Full Width Button',
                        'type': 'elevated',
                        'borderRadius': 16.0,
                        'elevation': 4.0,
                        'padding': 20.0,
                        'fontSize': 18.0,
                        'fullWidth': true,
                        'tooltip': 'I stretch to fill available width',
                      },
                      id: 'mock_btn_4',
                    ),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _MockContext implements CatalogItemContext {
  @override
  final Object data;

  @override
  final String id;

  final BuildContext context;

  _MockContext({required this.context, required this.data, required this.id});

  @override
  DispatchEventCallback get dispatchEvent => (UiEvent event) {
    if (event is UserActionEvent) {
      debugPrint('Mock Button clicked! Action: ${event.name}');
    }
  };

  @override
  ChildBuilderCallback get buildChild =>
      (String id, [DataContext? dataContext]) => const SizedBox.shrink();

  @override
  BuildContext get buildContext => context;

  @override
  DataContext get dataContext => throw UnimplementedError();

  @override
  GetComponentCallback get getComponent =>
      (String id) => null;

  @override
  String get surfaceId => 'mock_surface';
}