当前位置：网站首页>[flutter] icons component (fluttericon Download Icon | customize SVG icon to generate TTF font file | use the downloaded TTF icon file)
[flutter] icons component (fluttericon Download Icon | customize SVG icon to generate TTF font file | use the downloaded TTF icon file)
2022-07-03 01:09:00 【Programmer community】
List of articles
- One 、FlutterIcon Download Icon
- Two 、 Customize svg Icon generation ttf The font file
- 3、 ... and 、 Use the downloaded ttf Icon file
- Four 、 Complete code example
- 5、 ... and 、 Related resources
One 、FlutterIcon Download Icon
https://www.fluttericon.com/ You can choose the right one according to your needs icon Icon , Generate ttf file ;
The following figure , Select generate ttf Icon of font file , Here is the front
10
10
10 An icon , Then click... In the upper right corner DOWNLOAD Button , The website will put this in the background
10
10
10 Of icons SVG Package files to ttf In file ,
The downloaded file is flutter-icons-5b92b65c.zip , The next string is randomly generated numbers ;
There are mainly three files in the compressed package ,
① ttf The font file : MyFlutterApp.ttf , svg The format icon is encapsulated in this file ;
② dart file : Flutter Use in ttf Icon reference ,
/// Flutter icons MyFlutterApp/// Copyright (C) 2021 by original authors @ fluttericon.com, fontello.com/// This font was generated by FlutterIcon.com, which is derived from Fontello.////// To use this font, place it in your fonts/ directory and include the/// following in your pubspec.yaml////// flutter:/// fonts:/// - family: MyFlutterApp/// fonts:/// - asset: fonts/MyFlutterApp.ttf////// /// * Material Design Icons, Copyright (C) Google, Inc/// Author: Google/// License: Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0)/// Homepage: https://design.google.com/icons////import 'package:flutter/widgets.dart';class MyFlutterApp {
MyFlutterApp._(); static const _kFontFam = 'MyFlutterApp'; static const String? _kFontPkg = null; static const IconData threedee_rotation = IconData(0xe855, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData ac_unit = IconData(0xe856, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_alarm = IconData(0xe857, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_alarms = IconData(0xe858, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_time = IconData(0xe859, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData accessibility = IconData(0xe85a, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData accessible = IconData(0xe85b, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_balance = IconData(0xe85c, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_box = IconData(0xe85d, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_balance_wallet = IconData(0xf008, fontFamily: _kFontFam, fontPackage: _kFontPkg);}③ json The configuration file : This seems to be for front-end development ;
{
"name": "", "css_prefix_text": "", "css_use_suffix": false, "hinting": true, "units_per_em": 1000, "ascent": 850, "glyphs": [ {
"uid": "2cc10cdba83708a30142016d40519bb9", "css": "threedee_rotation", "code": 59477, "src": "material" }, {
"uid": "6a105ad156427b024b633a799e03af7b", "css": "ac_unit", "code": 59478, "src": "material" }, {
"uid": "9548f8adbc5e7b2dc94633be2821cd1f", "css": "access_alarm", "code": 59479, "src": "material" }, {
"uid": "2b1bcd8b15d35599f6828e4f5eadfa30", "css": "access_alarms", "code": 59480, "src": "material" }, {
"uid": "82f44f1094ffd1d78093e76c33cc08cc", "css": "access_time", "code": 59481, "src": "material" }, {
"uid": "ad65fa7f0f35e80fe1f1a5afadbc561f", "css": "accessibility", "code": 59482, "src": "material" }, {
"uid": "74bc3a2d72aec992ff1e08cfdd986b38", "css": "accessible", "code": 59483, "src": "material" }, {
"uid": "5da59f89dd294fa4475a7cdbe3cd3145", "css": "account_balance", "code": 59484, "src": "material" }, {
"uid": "cdd836ec082da15e51545f2ea1a37015", "css": "account_balance_wallet", "code": 61448, "src": "material" }, {
"uid": "58f376c8c60c911e8cd5a65becb0d932", "css": "account_box", "code": 59485, "src": "material" } ]}Two 、 Customize svg Icon generation ttf The font file
https://www.fluttericon.com/ in , take SVG Drag the icon of the format to the... Of the address page Custom Icons Area ,
Drag process :
When the drag is complete , On the page Custom Icons The area will show this
20
20
20 individual SVG Icon ;
Check these icons , Click on DOWNLOAD Button , You can download the generated ttf File format ;
3、 ... and 、 Use the downloaded ttf Icon file
take MyFlutterApp.ttf Copy the font file to Flutter Under the root directory of the source code fonts Under the table of contents ,
stay pubspec.yaml Configure the font file in the configuration file ,
name: flutter_image_widgetdescription: A new Flutter application.version: 1.0.0+1environment: sdk: ">=2.1.0 <3.0.0"dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 path_provider: ^2.0.1 transparent_image: ^2.0.0 cached_network_image: ^2.5.1dev_dependencies: flutter_test: sdk: flutterflutter: uses-material-design: true assets: - images/sidalin.png - images/sidalin2.png - images/waiting.gif fonts: - family: MyFlutterApp fonts: - asset: fonts/MyFlutterApp.ttf
Refer to the sample code given when downloading , There are corresponding to each icon
16
16
16 It's binary Unicode code ,
3
D
\rm 3D
3D The code corresponding to the icon is
0
x
e
855
\rm 0xe855
0xe855 ;
import 'package:flutter/widgets.dart';class MyFlutterApp {
MyFlutterApp._(); static const _kFontFam = 'MyFlutterApp'; static const String? _kFontPkg = null; static const IconData threedee_rotation = IconData(0xe855, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData ac_unit = IconData(0xe856, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_alarm = IconData(0xe857, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_alarms = IconData(0xe858, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData access_time = IconData(0xe859, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData accessibility = IconData(0xe85a, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData accessible = IconData(0xe85b, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_balance = IconData(0xe85c, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_box = IconData(0xe85d, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData account_balance_wallet = IconData(0xf008, fontFamily: _kFontFam, fontPackage: _kFontPkg);}IconData Constructor parameter description :
- codePoint : The hexadecimal corresponding to the icon in the font Unicode ;
- fontFamily : pubspec.yaml Configured in fontFamily ;
- fontPackage : The package where the font is located , It is not filled in by default ;
- matchTextDirection : Icon drawing direction , Is it in accordance with svg Draw the direction in the file ;
The code uses IconData Load custom icons ,
3
D
\rm 3D
3D The code corresponding to the icon is
0
x
e
855
\rm 0xe855
0xe855 ;
Center( // Load custom icons child: Icon(IconData(0xe855, fontFamily: "MyFlutterApp",), size: 200,),),Running effect : The first icon is the loaded custom icon ;
Four 、 Complete code example
Complete code example :
import 'package:flutter/material.dart';import 'dart:io';import 'package:path_provider/path_provider.dart';import 'package:transparent_image/transparent_image.dart';import 'package:cached_network_image/cached_network_image.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
// This widget is the root of your application. @override Widget build(BuildContext context) {
return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {
int _counter = 0; void _incrementCounter() {
setState(() {
_counter++; }); } /// SD Card path String sdPath; @override void initState() {
// obtain SD Card path getSdPath(); } void getSdPath() async {
String path = (await getExternalStorageDirectory()).path; setState(() {
sdPath = path; }); } @override Widget build(BuildContext context) {
print("sdPath : $sdPath"); return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: ListView( children: [ Center( // Load custom icons child: Icon(IconData(0xe855, fontFamily: "MyFlutterApp",), size: 150,), ), Center( // load Flutter Built in icon child: Icon(Icons.threed_rotation, size: 200,), ), Stack( children: [ Center( // Display the local resource image when the network is loaded child: FadeInImage.assetNetwork( // Placeholder placeholder: "images/waiting.gif", image: "https://img-blog.csdnimg.cn/20210324110914742.png", ), ) ], ), Stack( children: [ // Progress bar Center(child: CircularProgressIndicator(),), Center( // The gradient appears when the network is loaded child: FadeInImage.memoryNetwork( // Placeholder placeholder: kTransparentImage, image: "https://img-blog.csdnimg.cn/2021032321394771.png", ), ) ], ), Center( // Before the picture is loaded, it shows placeholder , Display network pictures after loading child: CachedNetworkImage( // Content displayed during loading network pictures , The progress bar is displayed here placeholder: (context, url)=>CircularProgressIndicator(), // Network picture address imageUrl: "https://img-blog.csdnimg.cn/20210324100419204.png", ), ), // Picture components , Load a picture from the network Image.network( // Picture address "https://img-blog.csdnimg.cn/2021032313493741.png", ), Image( image: AssetImage("images/sidalin.png"), ), //Image.asset('images/sidalin2.png', ), /// from SD Card loading picture if(sdPath != null) Image.file( File('$sdPath/sidalin3.png'), width: 200, ), ], ) ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }}Operation effect display :
5、 ... and 、 Related resources
Reference material :
- Flutter Official website : https://flutter.dev/
- Flutter Plug in download address : https://pub.dev/packages
- Flutter Developing documents : https://flutter.cn/docs ( Strongly recommend )
- official GitHub Address : https://github.com/flutter
- Flutter The Chinese community : https://flutter.cn/
- Flutter Practical tutorial : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart Chinese document : https://dart.cn/
- Dart Developer website : https://api.dart.dev/
- Flutter Chinese net ( unofficial , The translation is very good ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter Related issues : https://flutterchina.club/faq/ ( It is recommended to watch it at the introductory stage )
- GitHub Upper Flutter Open source examples : https://download.csdn.net/download/han1202012/15989510
Blog source download :
GitHub Address : https://github.com/han1202012/flutter_image_widget ( Keep updating with the progress of the blog , There may not be the source code of this blog )
Blog source snapshot : https://download.csdn.net/download/han1202012/16083326 ( The source code snapshot of this blog , You can find the source code of this blog )
边栏推荐
- leetcode-2115：从给定原材料中找到所有可以做出的菜
- Linear programming of mathematical modeling (including Matlab code)
- [applet project development -- JD mall] user defined search component of uni app (middle) -- search suggestions
- Leetcode-871: minimum refueling times
- leetcode-871：最低加油次数
- 18_ The wechat video number of wechat applet scrolls and automatically plays the video effect to achieve 2.0
- [AUTOSAR nine c/s principle Architecture]
- 拥抱平台化交付的安全理念
- leetcode：701. 二叉搜索树中的插入操作【bst的插入】
- Leetcode-1964: find the longest effective obstacle race route to each position
猜你喜欢
How to convert Quanzhi a40i/t3 to can through SPI
Win10 can't be installed in many ways Problems with NET3.5
Matlab Doppler effect produces vibration signal and processing
1696C. Fishingprince Plays With Array【思维题 + 中间状态 + 优化存储】
Telephone network problems
指针初阶（基础）
Find a benchmark comrade in arms | a million level real-time data platform, which can be used for free for life
Liad: the consumer end of micro LED products is first targeted at TVs above 100 inches. At this stage, it is still difficult to enter a smaller size
MySQL
世平信息首席科学家吕喆：构建以数据和人员为中心的安全能力
随机推荐
Leetcode-2115: find all the dishes that can be made from the given raw materials
12_ Implementation of rolling automatic video playback effect of wechat video number of wechat applet
[shutter] image component (cached_network_image network image caching plug-in)
详解RDD基本概念、RDD五大属性
指针初阶（基础）
每日一题之干草堆的移动
leetcode-2115：从给定原材料中找到所有可以做出的菜
Asynchronous, email and scheduled tasks
The difference between relational database and non relational database
Vulkan performance and refinement
测试右移：线上质量监控 ELK 实战
excel IF公式判断两列是否相同
matlab 多普勒效应产生振动信号和处理
[AUTOSAR eight OS]
ROS2之ESP32简单速度消息测试（极限频率）
leetcode：871. Minimum refueling times [Pat has done before + maximum stacking + greed]
Array and collection performance comparison
Foundations of data science is free to download
[case sharing] let the development of education in the new era advance with "number"
拥抱平台化交付的安全理念