自定义底部导航图片，完成切换效果

时间 2019-12-23

标签自定义底部导航图片完成切换效果繁體版

原文原文链接

1、准备资源函数

2、在pubspec.yaml中添加配置code

flutter:
  assets:
    - assets/images/home.png
    - assets/images/home_selected.png
    - assets/images/service.png
    - assets/images/service_selected.png
    - assets/images/activity.png
    - assets/images/activity_selected.png
    - assets/images/me.png
    - assets/images/me_selected.png

3、Image.asset()构造函数加载本地图片blog

final List<BottomNavigationBarItem> bottomTabs = [//底部导航选项
    BottomNavigationBarItem(
       icon: Image.asset('assets/images/home.png',width: 16,height: 16,),
       activeIcon: Image.asset('assets/images/home_selected.png',width: 16,height: 16,),
       title: Text('首页')
    ),
    BottomNavigationBarItem(
      icon: Image.asset('assets/images/service.png',width: 16,height: 16,),
      activeIcon: Image.asset('assets/images/service_selected.png',width: 16,height: 16,),
      title: Text('服务')
    ),
    BottomNavigationBarItem(
      icon: Image.asset('assets/images/activity.png',width: 16,height: 16,),
      activeIcon: Image.asset('assets/images/activity_selected.png',width: 16,height: 16,),
      title: Text('活动')
    ),
    BottomNavigationBarItem(
      icon: Image.asset('assets/images/me.png',width: 16,height: 16,),
      activeIcon: Image.asset('iassets/mages/me_selected.png',width: 16,height: 16,),
      title: Text('个人')
    ),
  ];

4、问题：FlutterError: Unable to load asset图片

解决：flutter clean而后再flutter run资源