simeondermaats
simeondermaats

Reputation: 423

Can't display a Column in combination with a BottomNavigationBar (Flutter 1.9.1)

So I'm building a Flutter app and in it, there are four distinct features. I quite like the look of a BottomNavigationBar and the icons and whatnot, so I decided to go for that option. The way I implemented it is as follows: I declare a static const List<Widget> elements = <Widget>[ ... ], in which I currently just have four Text() widgets. I also declare a variable selectedIndex, so that I can keep track of what element should be displayed. Then, in my Scaffold, I set the bottomNavigationBar as a BottomNavigationBar() in which I have a const list of BottomNavigationBarItems, and the rest of the parameters is obvious, I suppose. When I add const back in but leave the Column as it is, I get this:

Compiler message:
lib/main.dart:39:5: Error: Cannot invoke a non-'const' constructor where a const expression 
is expected.
Try using a constructor or factory that is 'const'.
Column(
^^^^^^

Now here's the problem:

When I try to put a Column in my elements list, I get a few different errors:

Const variables must be initialized with a constant value.
The constructor being called isn't a const constructor

But I really need two Widgets, one above the other, for my app to work properly. Does anyone know how on Earth I can do this?

What I have tried:

I tried putting the Column as a separate variable, that didn't work and gave me the same errors. When I removed const from the elenents list so that the Column could be added, it didn't throw an error, nut it also didn't display both things I put in the column.

My code (at least the relevant bit):

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _geselecteerdeIndex = 0;
  static const TextStyle tekstStijl = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  static const List<Widget> elementen = <Widget>[
    Text(
      "Index 0: Map",
      style: tekstStijl,
    ),
    Text(
      "Index 1: History",
      style: tekstStijl
    ),
    Text(
      "Index 2: Challenges",
      style: tekstStijl,
    ),
    Text(
      "Index 3: Settings",
      style: tekstStijl
    ),

  ];

  void _onItemTapped(int index) {
    setState(() {
      _geselecteerdeIndex = index;
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Intershitty v.0.1.0'),
        backgroundColor: Colors.amber[300],
      ),
      body: Center(
        child: elementen.elementAt(_geselecteerdeIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.map),
            title: Text("Map")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.trending_up),
            title: Text("History")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.casino),
            title: Text("Challenges")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text("Settings")
          )
        ],
        currentIndex: _geselecteerdeIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
        backgroundColor: Colors.grey[300],
        type: BottomNavigationBarType.fixed,
        showUnselectedLabels: false,
      ),
    );
  }
}

My details:

Upvotes: 1

Views: 1092

Answers (1)

janstol
janstol

Reputation: 3157

Column doesn't have a const constructor so you cannot use const with Columns (that's basically what these errors say).

This should work:

final List<Widget> elementen = <Widget>[
  Column(
    children: <Widget>[
      Text(
        "Index 0: Map",
        style: tekstStijl,
      ),
      FlutterLogo(),
    ],
  ),
  Column(
    children: <Widget>[
      Text("Index 1: History", style: tekstStijl),
      FlutterLogo(),
    ],
  ),
  Column(
    children: <Widget>[
      Text(
        "Index 2: Challenges",
        style: tekstStijl,
      ),
      FlutterLogo(),
    ],
  ),
  Column(
    children: <Widget>[
      Text("Index 3: Settings", style: tekstStijl),
      FlutterLogo(),
    ],
  ),
];

Upvotes: 1

Related Questions