自定義底部導航圖片,完成切換效果

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資源

相關文章
相關標籤/搜索