SvgAppi

A widget for displaying SVG images in Flutter applications with customizable sizing and color options.

Features

• SVG Support: Display SVG images from assets
• Flexible Sizing: Customizable width and height
• Color Customization: Apply color filters to SVG images
• Fit Options: Control how SVG content fits within the widget
• Performance Optimized: Uses RepaintBoundary for better performance

Usage

SvgAppi(
  source: 'assets/icons/star.svg',
  height: 24,
  width: 24,
  color: Colors.blue,
  fit: BoxFit.contain,
)

Parameters

Parameter	Type	Description
source	String	Required. Path to the SVG asset file
height	double?	Height of the SVG widget
width	double?	Width of the SVG widget
fit	BoxFit?	How the SVG should fit within the widget (default: BoxFit.contain)
color	Color?	Color to apply to the SVG (default: Colors.grey)
defaultColor	bool?	Whether to use the original SVG colors (default: false)

Examples

Basic SVG Icon

SvgAppi(
  source: 'assets/icons/home.svg',
  height: 32,
  width: 32,
  color: Theme.of(context).primaryColor,
)

SVG with Original Colors

SvgAppi(
  source: 'assets/images/logo.svg',
  height: 100,
  width: 200,
  defaultColor: true, // Preserves original SVG colors
  fit: BoxFit.cover,
)

Responsive SVG

SvgAppi(
  source: 'assets/icons/menu.svg',
  height: MediaQuery.of(context).size.width * 0.08,
  width: MediaQuery.of(context).size.width * 0.08,
  color: Colors.white,
)

Best Practices

• Place SVG files in the assets/ directory and declare them in pubspec.yaml
• Use defaultColor: true when you want to preserve the original SVG colors
• Set appropriate height and width for consistent sizing across devices
• Use BoxFit.contain (default) to maintain aspect ratio