SarSymbol Library (Flutter)

SarSymbol is a custom Flutter widget designed to replace currency symbols like "SAR" or "ر.س" with an image (Drawable). The library automatically scales the image based on the text size and allows for customizable currency symbols.

✨ Features

• Replace Currency Symbols: Replace currency symbols (e.g., "SAR", "ر.س") with an image (Drawable).
• Customizable Symbols: Customize left and right currency symbols.
• Automatic Scaling: Automatically scales the drawable to match the text size.
• Easy Integration: Simple integration into your Flutter project.

📦 Installation

Add the sar_symbol package to your pubspec.yaml file:

dependencies:
  sar_symbol: ^1.2.2 # Replace with the latest version

Run the following command to install the package:

flutter pub get

🚀 Usage

1️⃣ Add SarSymbol to Your Widget Tree

To use SarSymbol, add it to your widget tree:

import 'package:sar_symbol/sar_symbol.dart';

SarSymbol(
  text: "100 SAR",
  currentCurrency: "SAR",
  leftSymbol: "ر.س",
  rightSymbol: "SAR",
  textStyle: TextStyle(fontSize: 16, color: Colors.black),
)

2️⃣ Customize Currency Symbols

By default, SarSymbol uses "ر.س" for the left symbol and "SAR" for the right symbol. You can customize these symbols:

SarSymbol(
  text: "100 USD",
  currentCurrency: "USD", // Set the currency
  leftSymbol: "\$",       // Custom left symbol
  rightSymbol: "USD",     // Custom right symbol
  textStyle: TextStyle(fontSize: 16, color: Colors.black),
)

3️⃣ Customize Text Styles

You can customize the appearance of the text using the textStyle parameter. For example:

SarSymbol(
  text: "100 SAR",
  currentCurrency: "SAR",
  leftSymbol: "ر.س",
  rightSymbol: "SAR",
  textStyle: TextStyle(
    fontSize: 24,           // Set font size
    color: Colors.black,    // Set text color
    fontWeight: FontWeight.bold, // Set font weight
    fontFamily: 'Roboto',  // Set font family
    letterSpacing: 1.5,     // Set letter spacing
  ),
)

⚙️ How It Works

• The SarSymbol widget automatically detects currency symbols within the provided text.
• It replaces these symbols with a drawable image (sar.png).
• The drawable scales to match the text size, ensuring a clean and visually appealing result.

🔧 Customization Options

Parameter	Description	Default Value
text	The text to display.	Required
currentCurrency	The currency code (e.g., "USD", "SAR").	"SAR"
leftSymbol	The symbol to display on the left (e.g., "$", "ر.س").	"ر.س"
rightSymbol	The symbol to display on the right (e.g., "USD", "SAR").	"SAR"
textStyle	The text style to apply (e.g., font size, color).	Default text style

📌 Example Output

Before Replacement:

100 SAR

After Replacement:

100 [Image of SAR]

The "SAR" symbol is replaced with an image, scaled based on the text size.

📜 License

This library is open-source and licensed under the MIT License. Feel free to contribute and improve it!

🛠️ Example Project

Here’s a complete example of how to use SarSymbol in a Flutter app:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Sultani SarSymbol')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SarSymbol(
                text: "100 ر.س شامل للضريبة",
                currentCurrency: "SAR",
                leftSymbol: "ر.س",
                rightSymbol: "SAR",
                textStyle: const TextStyle(
                  fontSize: 24,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
                imagePadding: 8.0,
              ),
              const SizedBox(height: 16),
              SarSymbol(
                text: "100 ريال",
                currentCurrency: "SAR",
                leftSymbol: "ريال",
                rightSymbol: "SAR",
                textStyle: const TextStyle(
                  fontSize: 24,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
                imagePadding: 8.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

🖼️ Customizing the Image

The sar.png image is automatically scaled to match the font size specified in textStyle. If you want to use a different image:

1. Replace sar.png in the assets folder with your desired image.
2. Update the pubspec.yaml file to include the new asset:

flutter:
  assets:
    - assets/your_image.png

3. Update the SarSymbol widget to reference the new image:

WidgetSpan(
  child: Image.asset(
    'packages/sar_symbol/assets/your_image.png', // Reference the new image
    width: textStyle?.fontSize ?? 14,
    height: textStyle?.fontSize ?? 14,
    color: textStyle?.color,
  ),
)

🖼️ صورة الشعار

📸 مثال واجهة التطبيق

📝 Notes

• Asset Image: Ensure you have added the sar.png image to your assets folder and referenced it in the pubspec.yaml file.
• Customization: You can customize the leftSymbol, rightSymbol, and currentCurrency to fit your needs.
• Scaling: The image automatically scales to match the text size provided in textStyle.

Changes made:

alsultani8886@gmail.com: "If you have any questions, feel free to reach out at: alsultani8886@gmail.com" This documentation is tailored for the Flutter version of the SarSymbol library. Let me know if you need further assistance! 🚀