Custom Flutter Icon position

Question

I'm trying to add custom icon (Font Awesome Light). I already tried the package who did it but only for free icons.

I followed this tutorial : https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977

The icon is here but are not centered in my BottomNavigationBar, screen bellow.

It works with default icon, I don't know what to try now. I will be thankfull for any help or ideas.

main.dart

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Center(
    child: _widgetOptions.elementAt(_selectedIndex),
  ),
  bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    ...
    BottomNavigationBarItem(
      icon: Icon(WuliIcons.dumbbell),
      title: Text('School'),
      backgroundColor: Colors.red
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.school),
      title: Text('School'),
      backgroundColor: Colors.red
    ),
  ],
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
),
);
}

where i define my icon class :

import 'package:flutter/widgets.dart';

class WuliIcons {
  WuliIcons._();

  static const _kFontFam = 'FontAwesomeLight';

  static const IconData dumbbell = const IconData(0xf44b, fontFamily: _kFontFam);
}

pubspec.yml

flutter:
  fonts:
    - family:  FontAwesomeLight
      fonts:
       - asset: fonts/fa-light-300.ttf

Solution

After many research without the bar navigation, it seems that the custom icon take more size than he say to his parent (as you can see on the picture, it's only an icon in a container).

Then I tried something weird in the bar navigation, make a container with a big width, and it works ...

BottomNavigationBarItem(
  icon: Container(width: 1000, child: Icon(FontAwesomeLight.utensils_alt)),
  title: Text('Food'),
  backgroundColor: Colors.purple
),

Comments

[ABHIMANGAL MS]

stackoverflow.com/a/56001817/7418129 This link may help someone if they are trying to align Icon or IconButton.