In Flutter, how do I use a font from a package in a github repo?

user_15554003 0
Viewed 41

I am creating an Icon library for use internally. Here's the package structure:

company_icons_flutter
  lib
    icon_font
      company_icons.ttf
    widgets
      company_icons.dart
    company_icons_flutter.dart
  example
    pubspec.yaml
    everything else from standard flutter create

I've used the package https://pub.dev/packages/icon_font_generator to generate the font and class files from a folder of svg icons.

The company_icons_flutter.dart is as follows:

library company_icons_flutter;

export 'widgets/company_icons.dart';

In the example project, I've included a gridview which lists all of the icons from the package. The pubspec.yaml for the example project is as follows:

name: example
publish_to: "none"

environment:
  sdk: ">=2.17.6 <3.0.0"

  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

  company_icons_flutter:
    path: ../

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: CompanyIcons
      fonts:
        - asset: packages/company_icons_flutter/icon_font/company_icons.ttf

This is working just fine and I can see all of the icons showing up in the grid.

working example project

Where I am coming unstuck is trying to use this package from a new project. To facilitate this, I've pushed the package to a private repo on GitHub. The pubspec.yaml for the new project is as follows:

name: new_project
publish_to: "none"

environment:
  sdk: ">=2.17.6 <3.0.0"

  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

  company_icons_flutter:
    git:
      url: https://github.com/userName/company_icons_flutter.git
      ref: main

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: CompanyIcons
      fonts:
        - asset: packages/company_icons_flutter/icon_font/company_icons.ttf

The project is building just fine and it can definitely see the classes in the company_icons.dart file in the package but the gridview is displaying a list of rectangles in place of the actual icon symbols.

my problem

Can anyone help me with where I'm going wrong?

flutter-dependencies dart flutter
1 Answers

OK - I've solved my own problem. Everything in the question was correct. What I missed was that in the file company_icons.dart, there was a property I missed from the class I am using to extend IconsData. Here is what I had before:

@immutable
class _CompanyIconsData extends IconData {
  const _CompanyIconsData(int codePoint, this.name)
      : super(codePoint,
            fontFamily: 'CompanyIcons');

  final String name;
}

And here is what made this work:

@immutable
class _CompanyIconsData extends IconData {
  const _CompanyIconsData(int codePoint, this.name)
      : super(codePoint,
            fontFamily: 'CompanyIcons', fontPackage: "company_icons_flutter");

  final String name;
}

The fontPackage was the crucial missing argument!

user_155540030
Related