I'm new to Flutter and trying to get some basics done. I would like to access data from an object on several places within my code.

I'm most likely mixing up scope or variable types within oo code. So far I only used basic coding using javascript or php and never played to much with objects and stuff.

Please see my sample code below:

class _APPS extends State<APP>
    with SingleTickerProviderStateMixin {

  final pages = {
    "events": {
      "title": "Events",
      "icon": Icon(Icons.event),
      "page": EventsSite(),
    },
    "news": {
      "title": "News",
      "icon": Icon(Icons.message),
      "page": NewsSite(),
    },
    "favorites": {
      "title": "Favorites",
      "icon": Icon(Icons.favorite),
      "page": EventsSite(),
    },
    "profile": {
      "title": "Profile",
      "icon": Icon(Icons.account_circle),
      "page": EventsSite(),
    },
  };

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) => Scaffold(
          body: PageView(
            controller: _pageController,
            //physics: NeverScrollableScrollPhysics(),
            onPageChanged: _onPageChanged,
            children: [
              pages[0]['page'], <=== Here is what i'm trying to do
              NewsSite(),
              Icon(Icons.directions_bike),
            ],
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            showUnselectedLabels: false,
            backgroundColor: _colorBackgroundBright,
            unselectedItemColor: Colors.white,
            selectedItemColor: _colorHighlight,
            selectedLabelStyle: TextStyle(fontSize: 10.0),
            iconSize: 20,
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(pages['Events']['icon']), <=== Here is what i'm trying to do
                title: Text(pages[0]['title']), <=== Here is what i'm trying to do
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.message),
                title: Text('News'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.favorite),
                title: Text('Favorites'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Screenshot with my intent and the error


Solution 1: creativecreatorormaybenot

You need to access your Map properly.

Instead of pages[0] or pages['Events'], you want to specify the correct key:

pages['events']

Map keys are case-sensitive because they use the equals operator.


You cannot access a Map when creating a const. So remove const at const <BottomNavigationBarItem>[:

<BottomNavigationBarItem>[
  ...
]

Additionally, for the icon you need to use pages['events']['icon'].