x_icon 0.0.5

part of flutter remote-ui project. dynamic and remote icon loader for flutter

flutter XIcon

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)

why not to use other lib such as flutter_icons?

1. they do not support custom icons
2. you cannot remotely load icons.
3. not compatitable with bridged's dynamic

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:
  x_icon: latest

dev_dependencies:
  x_icon_generator: latest
  build_runner: latest

for more information about x_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)
  return XIcon(icon: XIconData("material://Icons.add"), color: Colors.black);

  // or...
  return Icon(icon: XIconData("material://Icons.add"), color: Colors.black);
}

remote url icon

XIcon(XIconData.fromUri(
              "https://raw.githubusercontent.com/bridgedxyz/dynamic/master/flutter/packages/x_icon/doc/remote-icon-example/twotone_brightness_auto_black_18dp.png"));

Full example available here

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