From Figma to Flutter Seamlessly.

import 'package:flutter/material.dart';

class ProductScreen extends StatelessWidget {
  final Product product;

  const ProductScreen({required this.product, super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(product.name),
        actions: [
          IconButton(
            icon: const Icon(Icons.favorite_border),
            onPressed: () => print("Added to favorites"),
          ),
          // Further actions...
        ],
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.network(product.imageUrl),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  product.name,
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
                Text(
                  "\$${product.price.toStringAsFixed(2)}",
                  style: const TextStyle(
                    color: Colors.green,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(product.description),
                // More product details...
              ],
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:morphr/morphr.dart';

class ProductScreen extends StatelessWidget {
  final Product product;

  const ProductScreen({
    required this.product,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return FigmaComponent.widget(
      "product_screen",
      transformers: [
        TextTransformer.byName(
          "product_name",
          text: product.name,
        ),
        TextTransformer.byName(
          "product_price",
          text: "\$${product.price.toStringAsFixed(2)}",
        ),
        TextTransformer.byName(
          "product_description",
          text: product.description,
        ),
        WidgetTransformer.byName(
          "product_image",
          builder: (_) => Image.network(product.imageUrl),
        ),
      ],
    );
  }
}