import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Material(
          child: Container(
            color: const Color.fromARGB(255, 200, 206, 182),
            padding: const EdgeInsets.all(8.0),
            child: const Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 10),
                IconsMetrics(),
                SizedBox(height: 4),
                InputDecoratorWithIcons(
                  textDirection: TextDirection.ltr,
                ),
                SizedBox(height: 16),
                FloatingLabelMetrics(),
                SizedBox(height: 4),
                InputDecoratorWithIcons(
                  textDirection: TextDirection.ltr,
                  labelText: 'Label text',
                ),
                SizedBox(height: 30),
                IconsMetrics(),
                SizedBox(height: 4),
                InputDecoratorWithIcons(
                  textDirection: TextDirection.rtl,
                ),
                SizedBox(height: 16),
                FloatingLabelMetrics(),
                SizedBox(height: 4),
                InputDecoratorWithIcons(
                  textDirection: TextDirection.rtl,
                  labelText: 'Label text',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class InputDecoratorWithIcons extends StatelessWidget {
  const InputDecoratorWithIcons({super.key, required this.textDirection, this.labelText});

  final TextDirection textDirection;
  final String? labelText;

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: textDirection,
      child: SizedBox(
        width: 200,
        child: InputDecorator(
          isEmpty: false,
          isFocused: false,
          decoration: InputDecoration(
            labelText: labelText,
            prefixIcon: const Icon(Icons.search),
            suffixIcon: const Icon(Icons.cancel),
            filled: true,
            border: const OutlineInputBorder(),
          ),
          child: Container(
            width: 200, // Too long but will be cut.
            height: 24, // Simulate default font height.
            color: Colors.blueGrey,
            child: Center(
              child: Text(
                textDirection == TextDirection.rtl ? 'RTL' : 'LTR',
                style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 12,
      child: Row(
        children: [
          // Based on https://m3.material.io/components/text-fields/specs#1ad2798c-ab41-4f0c-9a97-295ab9b37f33.
          Container(color: Colors.purple, width: 12),
          Container(color: Colors.white, width: 24),
          Container(color: Colors.purple, width: 16),
          Container(color: Colors.blueGrey, width: 96), // 200 - 52 - 52
          Container(color: Colors.purple, width: 16),
          Container(color: Colors.white, width: 24),
          Container(color: Colors.purple, width: 12),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 12,
      child: Row(
        children: [
          // Based on https://m3.material.io/components/text-fields/specs#1ad2798c-ab41-4f0c-9a97-295ab9b37f33.
          Container(color: Colors.red, width: 12 + 4), // 16
          Container(color: Colors.white, width: 168),  // 200 - 16 - 16
          Container(color: Colors.red, width: 12 + 4), // 16
        ],
      ),
    );
  }
}