How use setState() inside BottomNavigationBar item in Flutter?

Question

I want to use DropdownButton in BottomNavigationBar items. But unable to use setState(). I see this error :- The instance member 'setState' can't be accessed in an initializer. Try replacing the reference to the instance member with a different expressiondart(implicit_this_reference_in_initializer)

And also this error :- The instance member 'numDropdownVal' can't be accessed in an initializer. Try replacing the reference to the instance member with a different expressiondart(implicit_this_reference_in_initializer)

Here is the full code :

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  String numDropdownVal = 'One';

  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static List<Widget> _widgetOptions() {
    return<Widget>[
    Container(
      child: DropdownButton<String>(
                                isExpanded: true,
                                value: numDropdownVal,
                                items: <String>[
                                  'One',
                                  'Two',
                                  'Three',
                                  'Four',
                                  'Five',
                                  'Six'
                                ].map((name) {
                                  return DropdownMenuItem<String>(
                                    value: name,
                                    // Your row here:
                                    child: Text(
                                          name,
                                          style: TextStyle(fontSize: 18),
                                        ),
                                  );
                                }).toList(),
                                onChanged: (selectedName) {
                                  setState(() {
                                    numDropdownVal = selectedName;
                                  });
                                },
                              ),
    ),
    Text(
      'Other page',
      style: optionStyle,
    ),
    Text(
      'Another page',
      style: optionStyle,
    ),
  ];
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Answer 1

The following errors:

The instance member 'setState' can't be accessed in an initializer. Try replacing the reference to the instance member with a different expressiondart(implicit_this_reference_in_initializer)

And also this error :- The instance member 'numDropdownVal' can't be accessed in an initializer. Try replacing the reference to the instance member with a different expressiondart(implicit_this_reference_in_initializer)

happened because, as the errors says, you're trying to accessing instance member (which is not yet instantiated) when initializing the variable.

The following code is incorrect:

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  String numDropdownVal = 'One';

  static List<Widget>  _widgetOptions = <Widget>[
    Container(
      child: DropdownButton<String>(
        isExpanded: true,
        value: numDropdownVal, // You can't access the 'numDropdownVal' variable yet
                               // because it's not yet instantiated.

    ...
  ];

  ...
}

To fix it, you either change the variable as implicit getter:

List<Widget> get _widgetOptions => <Widget>[...];

or change it as method returning a list of widget:

List<Widget> _widgetOptions () {
  return <Widget>[...];
}