Ufdjrw

I want to pass dynamic data through different pages, when using a BottomAppBar. I currently switch between pages/widgets my storing them like this:

 @override
 void initState() 
 super.initState();
 final _pageOptions = [
 SwipeScreen(currentUserId: currentUserId),
 Requests(currentUserId: currentUserId),
 Messages(currentUserId: currentUserId),
 Settings(),
 ];

I then use _pageOptions in my Scaffold:

 body: _pageOptions[_selectedPage],
 bottomNavigationBar: BottomNavigationBar(
 currentIndex: _selectedPage,
 onTap: (int index) 
 setState(() 
 _selectedPage = index;
 );
 ,

As you may have guessed, I can't use _pageOptions as my body in my Scaffold, as it is a local variable when wrapped in an initState(). I have to use this initState though, as without it, I can only pass static members in my initializers.

I don't know how to fix this, as removing one just gives me a different error. I have looked for ways to make a variable global, for example having _pageOptions in a different file, but then it was still local, and therefore not defined when used in my Scaffold.

I hope my problem is clear.

Thanks in advance.

This isn't trying to be mean, just honest so please don't take offence, but from the sounds of things you need to start over with some of the basic tutorials on how flutter works and how to develop things in flutter. I'd recommend working through a couple of the tutorials & codelabs on the flutter website from start to finish (without looking at the final code until you're) and then seeing what you've done differently from them. And maybe even the getting started with Dart documentation...

The simplest answer to your problem is to simply make _pageOptions a member variable of your class as that will allow you to access it from wherever else you need. But since you're running into the issue of only being able to "pass static members in my initializers", that probably means that you aren't initializing things in the right place.

Here's a few things to keep in mind when developing with flutter:

1. You shouldn't be creating widgets anywhere except the build function (unless you make a helper function called from the build function - but if you're doing that, it's probably because the widget is getting big and you should split it out into its own Stateful or Stateless widget)


2. You shouldn't inherit widgets unless you know what you're doing. Most of the time you'll only inherit StatelessWidget and StatefulWidget, and everything else is done through encapsulation (i.e. using them in the build function)


3. Simply switching pages by changing what you build using an array isn't a great way of doing it - you don't get things like animations when navigating, you potentially build things sooner than needed, and lose out on things like the state of the page unless you're careful about how you do it.


4. Building widgets is cheap in flutter and you should generally be building most of them for each and every page. There are situations where this isn't true but for a basic app, build the navigation bar for each screen (but with the actual logic that builds it split out into a Stateless or Stateful widget!)

The solution for #3 is to use a flutter's navigation and either define your pages in MaterialApp(routes: ...) or MaterialApp(onGenerateRoute: ...). So you'd be setting up routes for SwipeScreen, Requests, Messages, and Settings. You'd use Navigator.push or Navigator.pushNamed, or Navigator.pop to move between them.

And so that you're not copying and pasting the bottom navigation bar everywhere, split it out into its own widget i.e. MyBottomNavigationBar extends StatelessWidget. And then in each of the pages you'd have a Scaffold(body: ..., bottomNavigationBar: MyBottomNavigationBar()). If your scaffold gets really complicated you could even move it to its own widget too.

Oh and I've just read what might be an important part of your question: I want to pass dynamic data through different pages. Using the navigator as I described changes this slightly as you don't want to be passing it down through each layer of build.

There's various ways of getting around this - the most basic is using an InheritedWidget, but as it needs a lot of boilerplate to make it work I recommend using a ScopedModel. That way, you simply have to make a class inherited from Model (i.e. UserModel), and then change the information within the model and notify listeners (i.e. the userId) when the user is chosen/logged in. Something like this:

class UserModel extends Model 
 String _userId;

 String get userId => _userId;

 void setUser(String userId) 
 _userId = userId;
 notifyListeners();
 

 static CounterModel of(BuildContext context, bool rebuildOnChange = false) =>
 ScopedModel.of<CounterModel>(context, rebuildOnChange = rebuildOnChange);

You'd need to put that somewhere high in your widget tree (probably above the MaterialApp or in the MaterialApp(builder: ...)). And you could then add name, profile, color, etc to that model, and use all of that from wherever you need in your app.

Do you want to use _pageOptions in the same class ? if it is this should solve your problem.

 var _pageOptions;
 // declare a variable inside your class/outside of your initState to reach it from anywhere inside in your class
 @override
 void initState() 
 super.initState();
 _pageOptions = [
 SwipeScreen(currentUserId: currentUserId),
 Requests(currentUserId: currentUserId),
 Messages(currentUserId: currentUserId),
 Settings(),
 ];