Not able to use items property of BottomNavigationBar in flutter

Question

I am trying to use BottomNavigationBar in my flutter project and I want to supply items to it. And for that, I have to use items property. But I am not able to find the items property in the BottomNavigationBar. Please see the attached picture.

And here is complete code:

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance
    // as done by the _incrementCounter method above.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that
        // was created by the App.build method, and use it to set
        // our appbar title.
        title: new Text(config.title),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: 0,
        onTap: (value){

        },
      ),
      // a style that looks nicer for build methods.
    );
  }
}

Answer 1

Are you sure you have the latest version of flutter. As far a i can tell, destination labels were switched to items in a commit in dec 2016: https://github.com/flutter/flutter/commit/1b9939af9547513061d2e30716f182b490f5362b#diff-f907c739b721784b11a7fec0459d384f

Answer 2

Seems like things have changed as with the newer version of the Dart plugin. I have achieved the same thing via the following code (Note that now we have to use Map with labels property):

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'App Name',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'App Name'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var bottomBarLabels = [
    new DestinationLabel(
        icon: new Icon(Icons.live_tv), title: new Text("Live")),
    new DestinationLabel(
        icon: new Icon(Icons.date_range), title: new Text("Matches")),
  ];

  @override
  Widget build(BuildContext context) {
    void _handleBottomNavigationBarTap(int newValue) {
      switch (newValue) {
        case 0:
          print("Live Clicked");
//          Scaffold.of(context).showSnackBar(new SnackBar(
//                content: new Text("Live Clicked"),
//              ));
          break;
        case 1:
          print("Matches Clicked");
//          Scaffold.of(context).showSnackBar(new SnackBar(
//                content: new Text("Matches Clicked"),
//              ));
          break;
      }
    }

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(config.title),
      ),
      bottomNavigationBar: new BottomNavigationBar(
          labels: bottomBarLabels, onTap: _handleBottomNavigationBarTap),
    );
  }
}

Answer 3

I was able to use the items with BottomNavigationBar without facing any problems.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Bottom Navigation"),
      ),
      bottomNavigationBar: new BottomNavigationBar(
        items: [new BottomNavigationBarItem(
            icon: new Icon(Icons.account_box), title: new Text("Account")),
        new BottomNavigationBarItem(
            icon: new Icon(Icons.add), title: new Text("Add")),
        new BottomNavigationBarItem(
            icon: new Icon(Icons.close), title: new Text("Close")),
        ],

      ),

    );
  }
}