简体   繁体   English

flutter 图标显示为矩形而不是其实际形状

[英]flutter icons appeared as rectangle instead of its real shape

This is my pubspec.yaml code containing font section, I made every thing correctly the asset path,the coding part, but idk why its appearing like rectangles这是我的包含字体部分的pubspec.yaml代码,我正确地制作了资产路径,编码部分,但我知道为什么它看起来像矩形

name: community
description: A new Flutter project.
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  bloc: ^7.1.0
  fluttertoast: ^8.0.8
  flutter_bloc: ^7.2.0
  firebase_core: ^1.7.0
  firebase_auth: ^3.1.3
  cloud_firestore: ^2.5.4
  connectivity_plus: ^1.1.0
  shared_preferences: ^2.0.7
  conditional_builder_null_safety: ^0.0.6
  flutter_fgbg: ^0.1.0
  hexcolor: ^2.0.5
  flutter:
    sdk: flutter




  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter



flutter:

 
  uses-material-design: true

 
fonts:
      - family: IconBroken
        fonts:
        - asset: assets/fonts/icons.ttf
  
 

and this is the dart file that supposed to convert the.tff file to IconData (alot of icons are included)这是 dart 文件,应该将.tff 文件转换为IconData (包括很多图标)

import 'package:flutter/widgets.dart';

class IconBroken {
  IconBroken._();

  static const String _fontFamily = 'IconBroken';

  static const IconData User = IconData(0xe900, fontFamily: _fontFamily);
  static const IconData User1 = IconData(0xe901, fontFamily: _fontFamily);
  static const IconData Activity = IconData(0xe902, fontFamily: _fontFamily);
  static const IconData Add_User = IconData(0xe903, fontFamily: _fontFamily);
  static const IconData Arrow___Down_2 = IconData(0xe904, fontFamily: _fontFamily);
  static const IconData Arrow___Down_3 = IconData(0xe905, fontFamily: _fontFamily);
  static const IconData Arrow___Down_Circle = IconData(0xe906, fontFamily: _fontFamily);
  static const IconData Arrow___Down_Square = IconData(0xe907, fontFamily: _fontFamily);
  static const IconData Arrow___Down = IconData(0xe908, fontFamily: _fontFamily);
  static const IconData Arrow___Left_2 = IconData(0xe909, fontFamily: _fontFamily);
  static const IconData Arrow___Left_3 = IconData(0xe90a, fontFamily: _fontFamily);
  static const IconData Arrow___Left_Circle = IconData(0xe90b, fontFamily: _fontFamily);
  static const IconData Arrow___Left_Square = IconData(0xe90c, fontFamily: _fontFamily);



}

this is an image link to the icons live:这是实时图标的图像链接:

在此处输入图像描述

This is an example of Flutter doc about how to add a custom font.这是有关如何添加自定义字体的 Flutter 文档的示例。 Compare to your file, the spacing is wrong, please take care of the space.与您的文件相比,间距是错误的,请注意空格。

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: fonts/Raleway-Regular.ttf
        - asset: fonts/Raleway-Italic.ttf
          style: italic
    - family: RobotoMono
      fonts:
        - asset: fonts/RobotoMono-Regular.ttf
        - asset: fonts/RobotoMono-Bold.ttf
          weight: 700

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM