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

What if you set `iconSize` in `BottomNavigationBar`? Did you try that? https://api.flutter.dev/flutter/material/BottomNavigationBar/iconSize.html — Loolooii, Jun 26 '19 at 09:29
@Loolooii it just change the size of the icon, not his position — Guilhem Prev, Jun 26 '19 at 09:31

score 4 · Accepted Answer · answered Jun 26 '19 at 08:12

4

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
),

answered Jun 26 '19 at 08:12

Guilhem Prev

979
5
17

2

https://stackoverflow.com/a/56001817/7418129 This link may help someone if they are trying to align Icon or IconButton. – user7418129 Jan 30 '20 at 06:18

Custom Flutter Icon position

1 Answers1