setState() or markNeedsBuild() called during build. (TextInputSettingsTile) - flutter

Question

I'm new and I'm writing the settings section of my app in Flutter (I'm using this package: https://pub.dev/packages/flutter_settings_screens).
I get this error "setState() or markNeedsBuild() called during build." when the value of my TextInputSettingsTile changes.
I read a lot of information on the net but I still don't understand what is the problem.
This is my main.dart:
import 'package:flutter/material.dart';
import 'pages/home.dart';
import 'pages/settings_page.dart';
import 'package:flutter_settings_screens/flutter_settings_screens.dart';
Future main() async {
await Settings.init(cacheProvider: SharePreferenceCache());
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const LoginPage(title: 'TEST'),
);
}
}
class LoginPage extends StatefulWidget {
const LoginPage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<LoginPage> createState() => LoginPageState();
}
class LoginPageState extends State<LoginPage> {
final _username = TextEditingController();
final _password = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('TEST'),
actions: <Widget>[
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SettingsPage()),
);
},
icon: const Icon(Icons.settings))
],
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(
20, 0, 20, 10),
child: TextField(
controller: _username,
decoration: InputDecoration(
icon: const Icon(Icons.email),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
),
labelText: 'username'),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(
20, 5, 20, 10),
child: TextField(
controller: _password,
obscureText: true,
enableSuggestions: false,
autocorrect: false,
decoration: InputDecoration(
icon: const Icon(Icons.password_rounded),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
),
labelText: 'password'),
)),
ElevatedButton(
onPressed: () => {},
child: const Text('LOGIN'))
],
),
),
);
}
}
This is my settings general page:
import 'package:flutter/material.dart';
import 'package:flutter_settings_screens/flutter_settings_screens.dart';
import 'settings/connection_page.dart';
class SettingsPage extends StatefulWidget {
#override
SettingsPageState createState() => SettingsPageState();
}
class SettingsPageState extends State<SettingsPage> {
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: const Text('Settings')
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.all(12),
children: [
const SizedBox(height: 5,),
SettingsGroup(
title: 'GENERAL', children: const <Widget>[
ConnectionPage()
]
),
],
),
),
);
}
This is my settings specific page (where I'm getting the error):
import 'package:flutter/material.dart';
import 'package:flutter_settings_screens/flutter_settings_screens.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class ConnectionPage extends StatelessWidget {
const ConnectionPage({Key? key}) : super(key: key);
static const keyServer = 'key-server';
#override
Widget build(BuildContext context) => SimpleSettingsTile(
title: 'Connection',
subtitle: 'Parameters',
leading: const FaIcon(FontAwesomeIcons.clipboardList),
child: SettingsScreen(
title: 'Connection',
children: <Widget>[
buildServer(),
],
),
);
Widget buildServer() => TextInputSettingsTile(
settingKey: keyServer,
title: 'Server',
initialValue: ''
);
}
What can I do in order to fix this error?
Thank you all.

Answer 1

Some method underneath it is calling a setState during a build. Identify it and use the addPostFrameCallback method.
Example:
import 'package:flutter/material.dart';
import 'package:flutter_settings_screens/flutter_settings_screens.dart';
import 'settings/connection_page.dart';
class SettingsPage extends StatefulWidget {
#override
SettingsPageState createState() => SettingsPageState();
}
class SettingsPageState extends State<SettingsPage> {
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: const Text('Settings')
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.all(12),
children: [
const SizedBox(height: 5,),
WidgetsBinding.instance.addPostFrameCallback((_){
SettingsGroup(
title: 'GENERAL', children: const <Widget>[
ConnectionPage()
]),
});
],
),
),
);
}
Try verify as ths example. Try wrapping it into WidgetsBinding.instance.addPostFrameCallback((_)