Movie player software written with Flutter: github.com/Mockingbird…

Open source is not easy, interested partners give a star bar.

Multicolor logo

There are many custom ICONS for Flutter. I usually look for flutter ICONS on this website: www.fluttericon.com/

This icon only supports solid colors. If you don’t know how to design and need multi-color ICONS, you can use Alibaba’s icon library: www.iconfont.cn/

Use iconFONT in Flutter

Here is my project using iconFONT multicolor icon to explain, mainly using githut an open source project: github.com/iconfont-cl… , you can read the readme file of this open source project to build step by step.

1. Add flutter plugin flutter_svg to the project file pubspec.yml

{... dependencies:# version number please refer to our official library: https://github.com/dnfield/flutter_svg/tagsFlutter_svg: ^ 0.14.1... }Copy the code

Note: It is best to use version 0.17.3 of Flutter_SVG here, this version will not cause problems when tested, other versions may have errors.

Then perform the Flutter plug-in installation operation

flutter packages get
Copy the code

Then install the global plug-in (based on nodeJs)

npm install flutter-iconfont-cli -g
Copy the code

2. Generate a configuration file

npx iconfont-init
Copy the code

The project root directory will generate an iconfont. Json file with the following contents:

{
    "symbol_url": "Please refer to readme. md and copy the JS link provided by the official website."."save_dir": "./lib/iconfont"."trim_icon_prefix": "icon"."default_icon_size": 18."summary_component_name": "IconFont"
}
Copy the code

Parameter description:

Symbol_url: Please directly copy the project link provided on iconfont’s website. Make sure it’s a.js suffix and not a.css suffix. If you haven’t create iconfont warehouse, then you can fill in this link to test: http://at.alicdn.com/t/font_1373348_ghk94ooopqr.js

Save_dir: Store the component generated according to iconfont icon. This folder is cleared each time a component is generated.

Trim_icon_prefix: If your icon has a common prefix that you don’t want to repeat, you can use this option to remove the prefix altogether.

Default_icon_size: We’re going to add a default font size for each generated icon component. Of course, you can change the size by passing props.

Summary_component_name: The name of the summary_Component_name. The default name is IconFont, but you can change it to Icon or whatever you prefer. Remember, it is a class name, and you must follow the syntax rules in Dart for class names, starting with a capital letter.

3. The React standard component is generated

npx iconfont-flutter
Copy the code

After generating, check whether all ICONS are in the save directory you set

Use 4.

The icon size

Depending on the configuration of default_icon_size, each icon will have a default size that you can override at any time.

class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        returnIconFont(IconNames.alipay, size: 100); }}Copy the code

ICONS monochrome

Monochrome icon. If no color value is specified, the icon will render the original color. If you want to set it to a different color, just set it to the color you want.

Note: If you pass color in props as a string instead of an array, even a multicolor icon will become monochrome.

IconFont(IconNames.alipay, color: 'red');
Copy the code

Icon multicolor

Multicolor icon. If no color value is specified, the icon will render the original multicolor. If you want to set it to a different color, just set a set of colors that you want

IconFont(IconNames.alipay, colors: ['green'.'orange']);
Copy the code

The number and order of color groups are determined according to the information of the current icon. You need to go into the icon component to look and draw conclusions.

Update icon

When your icon in iconfont.cn changes, simply configure symbol_url and repeat Step 3 to generate the latest icon component

Change the symbol_URL configuration and execute:
npx iconfont-flutter
Copy the code

The above content is from github.com/iconfont-cl…

Results show

More effects welcome to github.com/Mockingbird… Download the realEase version of the software to view.