How to make setState() work with BottomNavigationBar?-CodePudding

I'm starting to work with flutter in Android and I can't seem to make the setState function work with the bottomNavigationBar. I want to put a button in the List so that it shows up on the page you navigate to using bottomNavigationBar but I can't get the button to call setState() and so that means I can't get the button to actually do anything.

I basically took the boiler plate code for the bottomNavigationBar and added the code for an IconButton. I got the code from:

https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html and https://api.flutter.dev/flutter/material/IconButton-class.html

When you integrate the code together you get a bit of an error with onPressed so to deal with that I made List static and final but that still makes setState() throw the following errors:

When I hover over it:

'''

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

'''

and when I run it:


Error: Method not found: 'setState'.
                onPressed: () {setState((){_timer -= 1.0;});
                               ^^^^^^^^


FAILURE: Build failed with an exception.

* Where:
Script 'C:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 1159

* What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.
> Process 'command 'C:\flutter\bin\flutter.bat'' finished with non-zero exit value 1

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 2s
Exception: Gradle task assembleDebug failed with exit code 1

The code is here:


import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static final List<Widget> _widgetOptions = <Widget>[
    IconButton(
      icon: const Icon(Icons.volume_up),
      tooltip: 'Increase volume by 10',
      onPressed: (){
        setState(() {
        });
      },
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      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,
      ),
    );
  }
}

I think maybe that List is being constructed before everything else, and that's why it doesn't recognize the setState function, or something like that.

Other things I have tried is having the setState function outside of the List and it works fine there, or if you put it in the return Scaffold() it also works fine. So I don't know.

I also tried to make a function in Widget build(), put setState in there and have the List call that function so that the function can call setState but I ran across the same error.

This post seems like it is trying to answer the same question but I am not sure how to implement its suggestion: How use setState() inside BottomNavigationBar item in Flutter?

CodePudding user response：

You can use late or late with initState.

 late final List<Widget> _widgetOptions = <Widget>[
    IconButton(
      icon: const Icon(Icons.volume_up),
      tooltip: 'Increase volume by 10',
      onPressed: (){
       setState(() {
         
       });
      },
    ),

more about late keyword with declaration