简体   繁体   English

自定义Flutter图标位置

[英]Custom Flutter Icon position

I'm trying to add custom icon (Font Awesome Light). 我正在尝试添加自定义图标(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 我遵循了本教程: 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. 图标在这里,但不在屏幕下方的BottomNavigationBar中居中。

It works with default icon, I don't know what to try now. 它可以使用默认图标,我不知道该怎么办。 I will be thankfull for any help or ideas. 感谢您的帮助或想法。

main.dart 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 pubspec.yml

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM