flutter-svglisted
Install: claude install-skill noory-code/noory-ai
# Flutter SVG
SVG vector image rendering. Ideal for resolution-independent icons and logos.
---
## Installation
```bash
flutter pub add flutter_svg
```
---
## Quick Reference
### Basic Usage
```dart
import 'package:flutter_svg/flutter_svg.dart';
// load from assets
SvgPicture.asset(
'assets/icons/logo.svg',
width: 100,
height: 100,
)
// load from network
SvgPicture.network(
'https://example.com/icon.svg',
placeholderBuilder: (context) => CircularProgressIndicator(),
)
// load from string
SvgPicture.string(
'<svg viewBox="0 0 100 100">...</svg>',
)
```
### Change Color
```dart
SvgPicture.asset(
'assets/icons/heart.svg',
colorFilter: ColorFilter.mode(
Colors.red,
BlendMode.srcIn,
),
)
// use theme color
SvgPicture.asset(
'assets/icons/menu.svg',
colorFilter: ColorFilter.mode(
Theme.of(context).iconTheme.color!,
BlendMode.srcIn,
),
)
```
### Resize
```dart
// fixed size
SvgPicture.asset(
'assets/logo.svg',
width: 200,
height: 100,
)
// fit to parent
SvgPicture.asset(
'assets/logo.svg',
fit: BoxFit.contain, // contain, cover, fill, fitWidth, fitHeight
)
// maintain aspect ratio
SizedBox(
width: 100,
child: SvgPicture.asset(
'assets/logo.svg',
fit: BoxFit.fitWidth,
),
)
```
### Register Assets (pubspec.yaml)
```yaml
flutter:
assets:
- assets/icons/
- assets/images/
```
### Caching (precache)
```dart
// preload at app startup
Future<void> precacheSvgs(BuildContext context) async {
awa