flutter icons appeared as rectangle instead of its real shape-CodePudding

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

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)

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:

enter image description here

CodePudding user response：

This is an example of Flutter doc about how to add a custom font. 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