flutter_remote_icon 0.0.2 flutter_remote_icon: ^0.0.2 copied to clipboard
remote icon loader for flutter
flutter-remote-icon #
general remote icon loader for flutter. (this is part of bridged's remote-ui project)
Installation #
dependencies:
flutter_remote_icon: latest
dev_dependencies:
flutter_remote_icon_generator: latest
build_runner: latest
- loading native icons (IconData)
- loading remote icon (svg, png) into
Icon()
- loading packaged (local) asset as Icon
- loading packaged (local) font as Icon
Widget buildRemoteIcon(){
// var remoteIconData = new RemoteIconData(Icons.add); // -> flutter native material icons
// var remoteIconData = new RemoteIconData("material://Icons.add"); // -> native material icons remotely (dynamically)
// var remoteIconData = new RemoteIconData("https://example.com/svg.svg"); // -> loading remote svg
// var remoteIconData = new RemoteIconData("assets/icons/add.png"); // -> loading local assets
// var remoteIconData = new RemoteIconData("custom-namespace://CustomIcons.icon_name"); // -> (requires pre-usage definition)
var remoteIconData = new RemoteIconData();
return RemoteIcon(icon: remoteIconData, color: Colors.black);
}
supported icons
0. Icons.add
(non dynamic usage)
- "local://assets/image.png"
- "http://example.com/image.png"
- "https://example.com/image.png"
- "material://icons.name"
- "custom-namespace://CustomIcons.icon_name"
register custom font icon schema #
void main() {
IconProvider.register("namespace", {
"namespace://CustomIcons.icon_name": CustomIcons.icon_name
});
runApp(ExampleApp());
}
generate icons mapping for your own custom font IconData #
in your custom_icons.dart
// your font based IconData class
part 'custom_icons.g.dart';
@IconMapper("namespace")
class CustomIcons{
// ...
static const IconData add_awesome; // ~
static const IconData person_awesome; // ~
// ...
Map<String, IconData> get mapping{
return _CustomIconsMapping;
}
static IconData fromUri(String uri) => _$CustomIconsFromUri(uri);
}
and run flutter pub build_runner build
will generate custom_icons.g.dart
part of 'custom_icons.dart';
const _CustomIconsMapping = {
"namespace://CustomIcons.add_awesome": CustomIcons.add_awesome,
"namespace://CustomIcons.person_awesome": CustomIcons.person_awesome,
};
IconData _$CustomIconsFromUri(String uri){
return _CustomIconsMapping;[uri];
}
next, you can register the namespace and mappings easily
void main() {
// register mapping
IconProvider.register("namespace", CustomIcons.mapping);
runApp(ExampleApp());
}
// and use it!
Widget buildDynamicIcon(){
return RemoteIcon(icon: RemoteIconData("namespace://CustomIcons.person_awesome"));
}
for using font as a icon please read this blog