I'm having a problem in my application. When adding a FloatingActionButton, it now gives a error like:
Scaffold.geometryOf() must only be accessed during the paint phase. The ScaffoldGeometry is only available during the paint phase, because its value is computed during the animation and layout phases prior to painting.
This occurs in some navigation events.
I made a minimal code example that reproduces the problem to exemplify the situation.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
bool clicked = false;
void main() {
MyModel model = MyModel();
runApp(MultiProvider(providers: [
ChangeNotifierProvider.value(value: model),
], child: ExampleApp()));
}
class MyModel extends ChangeNotifier {
int count = 0;
void update(){
count ++;
Future.microtask(() => notifyListeners());
}
}
class ExampleApp extends StatelessWidget {
ExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
var model = context.watch<MyModel>();
var scaffold = Scaffold(
appBar: AppBar(
title: Text('Screen'),
),
body: SizedBox(
height: 800,
child: Column(
children: [
GestureDetector(
child:
SizedBox(width: 50, height: 100, child: Text("click here - ${model.count.toString()}")),
onTap: () {
model.update();
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) {
return Home();
},
maintainState: true),
);
},
),
],
),
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 8.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.one_k),
onPressed: () {
Navigator.pop(context, "update");
},
),
],
),
SizedBox(width: 50), //you may need to adjust this value
Column(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.two_k),
onPressed: () {
model.update();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return Home();
},
maintainState: true),
);
},
),
],
),
],
),
),
floatingActionButton: FloatingActionButton(
heroTag: "floatingButton",
child: Icon(Icons.add),
onPressed: () {}),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
return scaffold;
}
}
In the example above, if the user clicks on the 2k button and then clicks on the 1k button, the error will occur.
The expected behavior of the application would be for the user to be able to navigate normally between pages without this causing any error.
Thank you for your help!