Controlling state of a widget from another widget - flutter

Question

I'm using the example in this link:
https://medium.com/#jb.padamchopra/implementing-a-bottom-app-bar-with-floating-action-button-flutter-463560e1324
Widget from the link
The floating action button animation is controlled by a bool clickedCenterFAB
In my code the Widgets inside the animated container are defined in a class and I want, after the user writes a text and presses the button, the animated container to collapse, so logically I want to call setState and assign clickedCenterFAB = false.
I'm new to flutter and I tried calling setState inside the uploadPage widget and try to change clickedCenterFAB but it didn't work. Any idea how to do it guys? thanks for the help in advance.
My widget
AnimatedContainer(
duration: Duration(milliseconds: 300),
//if clickedCentreFAB == true, the first parameter is used. If it's false, the second.
height: clickedCentreFAB
? MediaQuery.of(context).size.height
: 10.0,
width: clickedCentreFAB
? MediaQuery.of(context).size.height
: 10.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(clickedCentreFAB ? 0.0 : 300.0),
color: Colors.blue,
),
child: clickedCentreFAB ? UploadPage() : null)
EDIT: After following with Michael's solution and keeping up with the comments, this is where I got
class UploadPage extends StatefulWidget {
final Function collapseContainer;
UploadPage(this.collapseContainer);
#override
_UploadPageState createState() =>
_UploadPageState(collapseContainer);
}
class _UploadPageState extends State<UploadPage> {
final Function collapseContainer;
_UploadPageState(this.collapseContainer);
...
...
CustomButton(
() {
if (_controller.text.trim().isNotEmpty) {
DatabaseServices().uploadPost(
FirebaseAuth.instance.currentUser.uid,
_controller.text,
!_isChecked);
collapseContainer;
}
},
'Post',
Colors.white,
),
CustomButton obviously is a widget class that i created to avoid redundency and in the params in a Function which I'm passing here

Answer 1

The reason you can't call setState directly from UploadPage is because setState is a class method, so it's always only associated with the state of the immediately enclosing class instance. If you want to change the state of a Widget that's higher up in the Widget tree, the standard method is to pass a callback to the child component.
In your case, you might add a new property to your UploadPage widget - something like, onButtonPressed:
class UploadPage extends StatelessWidget {
final Function onButtonPressed;
UploadPage({required this.onButtonPressed});
#override
Widget build(BuildContext context) {
return YourWidget(
// ...
child: RaisedButton(onPressed: onButtonPressed),
// ...
);
}
}
Then:
AnimatedContainer(
// ...
child: clickedCentreFAB
? UploadPage(
onButtonPressed: () {
setState(() { return clickedCentreFAB = false; });
},
)
: null,
)
)
As an aside, at a certain point, the state of your app may be complex enough to warrant solutions like bloc, redux, etc - However, for this particular scenario those might be overkill.
If you find yourself having to pass callbacks and properties through several levels of the widget tree, then provider can be immensely helpful.
If the mapping between actions, states, and views becomes very complex, then bloc or redux can help to impose structure onto your project and make it easier to reason about, though you will often need to write more code to get the same tasks done.