how to configure pubspec.yaml to add my custom Icons generated from fluttericon?

Question

I followed the steps in this Medium Article to be able to use my custom Icons in my Flutter application but i found it tricky to configure the pubspec.yaml file to add the .dart file and the .ttf to the dependencies and i get the following error :

 Error on line 45, column 4 of pubspec.yaml: A dependency specification must be a string or a mapping.
       ╷
    45 │ ┌    - family:  RechargeExpress
    46 │ │      fonts:
    47 │ │        - asset: fonts/RechargeExpress.ttf
    48 │ │ 
    49 │ │   # The following line ensures that the Material Icons font is
    50 │ │   # included with your application, so that you can use the icons in
    51 │ │   # the material Icons class.
    52 │ │   uses-material-design: true
       │ └──^
       ╵
    pub
 upgrade failed (65;    ╵)

My pubspec.yaml :

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  flutter_localizations:
    sdk: flutter
  http:
 
  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter
  curved_navigation_bar:

  fonts:
   - family:  RechargeExpress
     fonts:
       - asset: fonts/RechargeExpress.ttf

  uses-material-design: true

Answer 1

you seem to be adding the font as a dependency. check this and see if it helps.

if it didn't please update the question to include your pubspec.yaml file

Edit: for fonts, you place them under

flutter:
  fonts:

---

Edit 2:

ok so as you can see you have the fonts: under dev_dependencies: where it should be under flutter. here's how it should look

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  flutter_localizations:
    sdk: flutter
  http:

  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter
  curved_navigation_bar:

flutter:
  fonts:
   - family:  RechargeExpress
     fonts:
       - asset: fonts/RechargeExpress.ttf
   
  uses-material-design: true