Using setState in separate BottomNotifcationBar class back to the main class - dart

Question

If I keep the bottomNotificationBar in the same class as the rest of the page, setState works properly and the buttons work properly.
If I move the bottomNotificationBar to another class, I cannot get the setState to work, because it needs to reference back to the main class. I've tried a few things, but I can't wrap my mind around this yet.
The error is:
The following assertion was thrown while handling a gesture:
setState() called in constructor:
The part that isn't working is marked near the bottom of this:
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: 'My Title',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedPageIndex = 0;
var pages = [ Page1(), Page2(), ];
#override
Widget build(BuildContext context) {
return new Scaffold(
body: pages[selectedPageIndex],
bottomNavigationBar:
MyClass().buildBottomNavigationBar(selectedPageIndex),
);
}
}
class MyClass {
BottomNavigationBar buildBottomNavigationBar(selectedPageIndex) {
return new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text("Page1"),
icon: Icon(Icons.account_circle),
),
BottomNavigationBarItem(
title: Text("Page2"),
icon: Icon(Icons.account_circle),
),
],
onTap: (index) {
/////////////////////////////START OF SECTION///////////////////////////
_MyHomePageState().setState(() {
selectedPageIndex = index;
});
/////////////////////////////END OF SECTION///////////////////////////
},
currentIndex: selectedPageIndex,
);
}
}
--------------EDIT:----------------
Ok, now I have the following code below, and I am getting the following 2 things:
info:
The member 'setState' can only be used within instance members of subclasses of 'package:flutter/src/widgets/framework.dart'.
exception:
The following NoSuchMethodError was thrown while handling a gesture:
The method 'setState' was called on null.
Receiver: null
Tried calling: setState(Closure: () => Null)
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: 'My Title',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
static void setIndex(BuildContext context, int _newIndex) {
_MyHomePageState state = context.ancestorStateOfType(TypeMatcher<_MyHomePageState>());
state.setState(() {
state.selectedPageIndex =_newIndex;
});
}
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedPageIndex = 0;
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(),
bottomNavigationBar:
MyClass().buildBottomNavigationBar(context,selectedPageIndex),
);
}
}
class MyClass {
BottomNavigationBar buildBottomNavigationBar(context,selectedPageIndex) {
return new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text("Page1"),
icon: Icon(Icons.account_circle),
),
BottomNavigationBarItem(
title: Text("Page2"),
icon: Icon(Icons.account_circle),
),
],
onTap: (index) {
MyHomePage.setIndex(context, index);
},
currentIndex: selectedPageIndex,
);
}
}

Answer 1

What you Require is CallBAck Function from the other class. As setState has to be called on object -_MyHomePageState.
With Class Constructors we pass the initial Data & got a Callback on SetState().
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: 'My Title',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var selectedPageIndex = 0;
var pages = [
Page1(),
Page2(),
];
#override
Widget build(BuildContext context) {
return new Scaffold(
body: pages[selectedPageIndex],
bottomNavigationBar: MyClass(
selectedPageIndex: selectedPageIndex,
myFunc: _myFunc,
),
);
}
void _myFunc(int index) {
setState(() {
selectedPageIndex = index;
});
}
}
class MyClass extends StatelessWidget {
MyClass({this.selectedPageIndex, this.myFunc});
final int selectedPageIndex;
final Function myFunc;
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
title: Text("Page1"),
icon: Icon(Icons.account_circle),
),
BottomNavigationBarItem(
title: Text("Page2"),
icon: Icon(Icons.account_circle),
),
],
onTap: (index) {
/////////////////////////////START OF SECTION///////////////////////////
myFunc(index);
/////////////////////////////END OF SECTION///////////////////////////
},
currentIndex: selectedPageIndex,
);
}
}
class Page1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Text('1'),
),
);
}
}
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(child: Container(child: Text('3'),));
}
}

Answer 2

You should modify your MyHomePage by adding a static method into it so its state can be called from anywhere:
class MyHomePage extends StatefulWidget {
static void setIndex(BuildContext context, int _newIndex) {
_MyHomePageState state = context.ancestorStateOfType(TypeMatcher<_MyHomePageState>());
state.setState(() {
state.selectedPageIndex =_newIndex;
});
}
#override
_MyHomePageState createState() => new _MyHomePageState();
}
Then when you want to change the index call:
onTap (index) {
MyHomePage.setIndex(context, index);
}