自定义颤振图标位置

Posted 2023-02-23

【中文标题】自定义颤振图标位置

【英文标题】：Custom Flutter Icon position

【发布时间】：2019-11-07 08:35:39

【问题描述】：

我正在尝试添加自定义图标（Font Awesome Light）。我已经尝试过执行此操作的软件包，但仅适用于免费图标。

我遵循了这个教程：https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977

图标在此处，但不在我的底部导航栏中居中，屏幕下方。

它适用于默认图标，我不知道现在该尝试什么。如有任何帮助或想法，我将不胜感激。

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

我在哪里定义我的图标类：

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

【问题讨论】：

如果在BottomNavigationBar 中设置iconSize 会怎样？你试过吗？ api.flutter.dev/flutter/material/BottomNavigationBar/…

@Loolooii 它只是改变图标的​​大小，而不是他的位置

【参考方案1】：

在没有条形导航的情况下进行了多次研究后，自定义图标的大小似乎比他对他的父母说的要大（正如您在图片上看到的，它只是容器中的一个图标）。

然后我在栏导航中尝试了一些奇怪的东西，制作了一个宽大的容器，它可以工作......

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

【讨论】：

***.com/a/56001817/7418129 如果有人尝试对齐 Icon 或 IconButton，此链接可能会有所帮助。