how to separate setState on main class - flutter

Question

How to separate setState in Abc class?
I have lots of this kind of methods in one class. Now, my class is too long. Is there any way to separate this class to subclass or another way?
class _AbcState extends State<Abc> {
String name = 'name';
double number = 15.5;
int value = 10;
//REMOVE FROM ABC class
void changeName() {
setState(() {
name = 'new Name';
});
}
void changeNumber() {
setState(() {
number = 10.0;
});
}
void changeValue() {
setState(() {
value = 5;
});
}
//
#override
Widget build(BuildContext context) {
return Scaffold();
}
}

Answer 1

There are 2 ways to do this:
First:
You can separate the individual input fields into their stateful widgets if necessary and let them handle their individual states internally, only giving you the changed data in respective onChange callbacks.
This is the simplest and quickest solution.
A better approach is to:
Second:
Use a library/dependency/package for the state management in your application:
This is an example of the Provider flutter package with ChangeNotifier:
You can check the official docs here for detailed explanations and examples:
Provider
ChangeNotifier
Simple example:
Create a class extending the ChangeNotifier:
Whenever the some data changes in the ChangeNotifer you can call the notifyListeners() method.
class UserProvider extends ChangeNotifier {
String username;
String password;
void updateUsername(String username) {
this.username = username;
notifyListeners();
}
void updatePassword(String password) {
this.password = password;
notifyListeners();
}
}
Wrap your widget tree in a ChangeNotifierProvider widget:
This widget will let you access the instance of the ChangeNotifier class anywhere in down the widget tree like InheritedWidget.
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<UserProvider>(
lazy: false,
create: (context) => UserProvider(),
child: Home(),
);
}
}
Access the instance of ChangeNotifier from anywhere down the widget tree with and call any methods or data variables:
/// Get an instance of the UserProvider in the ancestors of the current widget tree like this.
UserProvider userProvider = Provider.of<UserProvider>(context);
/// Call any method inside the UserProvider class like this
userProvider.updateUsername("John Doe");
/// access any data variables inside the UserProvider class like this.
User userInfo = userProvider.username;
Changing UI based on data/state changes in ChangeNotifier:
You can use the Consumer and Selector widgets in the provider package, which provide an efficient ways to redraw the UI based on certain parameters of the ChangeNotifier class, when the notifyListeners() method is called from the ChangeNotifier class.
Consumer:
This widget will simply rebuild the entire widget tree wrapped inside it, whenever ANY data changes inside the ChangeNotifier with notifyListeners().
class Home extends StatelessWidget {
const Home({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Consumer<UserProvider>(
builder: (context, userProvider, _) {
return Scaffold(
appBar: AppBar(
title: const Text(userProvider.username),
),
body: Center(
child: Text(
"Your password is: ${userProvider.password}!",
),
),
);
},
);
}
}
Selector:
This widget will allow for more finer control over your widget rebuild. It will rebuild only part of the widget based on specific data variable changes inside the ChangeNotifier.
The below example will only rebuild the Text widget if the password data changes inside our UserProvider ChangeNotifier class.
class Home extends StatelessWidget {
const Home({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Consumer<UserProvider>(
builder: (context, userProvider, _) {
return Scaffold(
appBar: AppBar(
title: const Text(userProvider.username),
),
body: Center(
child: Selector<UserProvider, String>(
selector: (context, userProvider) => userProvider.password,
builder: (context, state, child) {
return Text(
"Your password is: ${userProvider.password}!",
);
},
),
),
);
},
);
}
}