如何调用或找到一种方法让底部导航栏与 Flutter 中的无状态小部件一起使用？

Question

  static List<Widget> _pages = <Widget>[
    inputPage(),
    leaderboardsPage(),
    userInfo(),
  ];

I have the above widget list and the one of the stateless widget class is initialised as follows:

class userInfo extends StatelessWidget {

and they are called in a bottom nav bar as follows

child: _pages.elementAt(_selectedIndex),

However, I need to change userInfo to

class userInfo extends State<ProfilePage> {

because I need to use setState() and I cannot use setState if userInfo() is a Stateless Widget.

Any workaround that you can think of. I am fairly new to Flutter and Dart so I don't know all about Widgets and States. Here's the needed code:

class ProfilePage extends StatefulWidget {
  final User user;

  ProfilePage({required this.user});

  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  static List<Widget> _pages = <Widget>[
    inputPage(),
    leaderboardsPage(),
    userInfo(),
  ];

class userInfo extends State<ProfilePage> {
  userInfo();

  bool _isSendingVerification = false;
  bool _isSigningOut = false;

  late User _currentUser;

  @override
  void initState() {
    _currentUser = widget.user;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text('Sakirt Meter'),
    ),
    body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Padding(
                padding: const EdgeInsets.only(bottom: 50.0),
                child: Image.asset('assets/icon.png', fit: BoxFit.contain, height: 100),
                //child: Text('Login', style: Theme.of(context).textTheme.headline1,),
              ),
              Text(
                'NAME: ${_currentUser.displayName}',
.
.
.

Answer 1

I don't completely understand what you are doing but I will let you know you should absolutely not declare your own State class for another stateful widget, you should make a new stateful widget:

class UserInfo extends StatefulWidget {
  
  @override
  _UserInfoState createState() => _UserInfoState();
}

class _UserInfoState extends State<UserInfo> {
  ...
}

If you need to access ProfilePage 's values from UserInfo , you should do by passing said values as arguments:

class UserInfo extends StatefulWidget {
  const UserInfo({required this.user});

  final User user;

  @override
  _UserInfoState createState() => _UserInfoState();
}

class _UserInfoState extends State<UserInfo> {
  @override
  void initState() {
    _currentUser = widget.user;
    super.initState();
  }
}

then on ProfilePage , you need to make some changes aswell:

List<Widget> get _pages => <Widget>[
    inputPage(),
    leaderboardsPage(),
    userInfo(user: widget.user),
  ];

_pages can't be static because it uses user , which is not static, I also made it into a getter so it works properly even if user changes.

If what you want is to rebuild or call setstate on ProfilePage from UserInfo , you can use a callback.

Let's say I want ProfilePage to rebuild on the press of a button on UserInfo :

lass UserInfo extends StatefulWidget {
  const UserInfo({required this.user, required this.onChanged});

  final User user;
  final VoidCallback? onChanged

  @override
  _UserInfoState createState() => _UserInfoState();
}

class _UserInfoState extends State<UserInfo> {
  @override
  void initState() {
    _currentUser = widget.user;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text('press me!'),
      onPressed: widget.onChanged,
    );
  }
}

Then on the pages getter:

  List<Widget> get _pages = <Widget>[
    inputPage(),
    leaderboardsPage(),
    userInfo(
      user: widget.user, 
      onPressed: () => setState(() {
        // some code or something :)
      }),
    ),
  ];