How to use image icon (from assets) instead of IconData and pagination bottomNavigationBar in Flutter

Question

I am using bottomNavigationBar in my flutter project I'm new in flutter and have I no idea about pagination and use assets image icons instead of iconData. I searched about it for the last 2 days but not got satisfaction. Please help me......

I used bottomNavigationBar with a fab button from here https://medium.com/coding-with-flutter/flutter-bottomappbar-navigation-with-fab-8b962bb55013 https://github.com/bizz84/bottom_bar_fab_flutter

I also tried to use custom icons from here https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977

but not got success

I just want to change icons and want to know how to use pagination. What I can do changes in the last example code for pagination.

Bresnahan

tried ImageIcon ? api.flutter.dev/flutter/widgets/ImageIcon-class.html – Haitian

Answer 1

Here's how you can use an icon from assets

ImageIcon(
     AssetImage("images/icon_more.png"),
     color: Color(0xFF3A5A98),
),

Try this example for BottomNavBar click

So there what you want to replace is BottomNavigationBarItem

 new BottomNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),

to

 new BottomNavigationBarItem(
           icon: ImageIcon(
               AssetImage("images/icon_more.png"),
                    color: Color(0xFF3A5A98),
               ),
           title: Text('Home'),
         ),

You can learn about the navigation from the article I shared

UPDATE Here's an example as you requested.

So here the _children variable holds the list of pages that you want to navigate based on the selection of BottomNavBarItem.

How we navigate is when we press a tab item we set it's index using onTabTapped function.. When the index change the view is changed accordingly as we have instructed the body show the current index of the children

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.green,
    )
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped, // new
        currentIndex: _currentIndex, // new
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text('Messages'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('Profile'))
        ],
      ),
    );
  }
}

Cribbs

@stackoverflow.com/users/7865296/praneeth-dhanushka-fernando Thanks, it is very helpful for me and I solved my problem using it, can you explain about pagination . How I can open different pages from tabs in my used GitHub code. Thanks once again.... – Bresnahan

How to Color set as default like Image's Color – Cathe

You also need to list the image files in the assets section of the pubspec.yaml file, or AssetImage won't be able to find them. – Tamtama

Answer 2

For me, above mentioned ImageIcon option did not work. It worked by using Image.asset

BottomNavigationBarItem(
              title:Text(AppLocalizations.of(context).converter), icon: Image.asset(
            "images/convertericon.png",
          )),

Reeher