flutter_remote_icon 0.0.3+6

remote icon loader for flutter

flutter-remote-icon

What if you decided to load icon from server? But want to use local's font icons?

"general remote icon loader for flutter." (this is part of bridged's remote-ui project)

Flutter remote icon enables you to load material icons (Icons.~) or your custom icon (CustomIcons.~) or remotely fetched content (svg) to your icon widget via uri, wich can be dynamically configured, remotely loaded.

Installation

dependencies:
  flutter_remote_icon: latest

dev_dependencies:
  flutter_remote_icon_generator: latest
  build_runner: latest

for more information about flutter_remote_icon_generator, please refer here

Usage

supported usage

• loading native icons (IconData)
• loading remote icon (svg, png) into Icon()
• loading packaged (local) asset as Icon
• loading packaged (local) font as Icon

example

Widget buildRemoteIcon(){
  // var remoteIconData = new XIconData(Icons.add); // -> flutter native material icons
  // var remoteIconData = new XIconData("material://Icons.add"); // -> native material icons remotely (dynamically)
  // var remoteIconData = new XIconData("https://example.com/svg.svg");  // -> loading remote svg
  // var remoteIconData = new XIconData("assets/icons/add.png"); // -> loading local assets
  // var remoteIconData = new XIconData("custom-namespace://CustomIcons.icon_name"); // -> (requires pre-usage definition)
  var remoteIconData = new XIconData();
  return XIcon(icon: remoteIconData, color: Colors.black);
}

supported icons

0. Icons.add (non dynamic usage)
1. "local://assets/image.png"
2. "http://example.com/image.png"
3. "https://example.com/image.png"
4. "material://icons.name"
5. "custom-namespace://CustomIcons.icon_name"

register custom font icon schema

void main() {
  XIcons.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
  XIcons.register("namespace", CustomIcons.mapping);
  runApp(ExampleApp());
}

// and use it!
Widget buildDynamicIcon(){
  return XIcon(icon: RemoteIconData("namespace://CustomIcons.person_awesome"));
}

for using font as a icon please read this blog

What problem does it solve?

• https://github.com/flutter/flutter/issues/16189