一、准备资源

自定义底部导航图片,完成切换效果-LMLPHP

二、在pubspec.yaml中添加配置

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

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

  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('我的')
    ),
  ];

四、问题:FlutterError: Unable to load asset

自定义底部导航图片,完成切换效果-LMLPHP

解决:flutter clean然后再flutter run

11-27 07:20