How can I extend My HomePage eState - dart

Question

In my app i've the below pat of the code:
class _MyHomePageState extends State<MyHomePage> {
int _selected = 0;
List<Widget> makeRadios() {
List <Widget> list = new List <Widget>();
list.add(new Row(
children: <Widget>[
new Radio(value: 0, groupValue: _selected,
onChanged: (int value) {
rOnChanged(value);
}),
new Text('Radio 0'),
],
));
list.add(new Row(
children: <Widget>[
new Radio(value: 1, groupValue: _selected,
onChanged: (int value) {
rOnChanged(value);
}),
new Text('Radio 1'),
],
));
return list;
};
void rOnChanged(int value){
this.setState(() {
_selected = value;
});
print("value: $value");
this._bodyHeight = (value == 1) ? 65.0 : 0.0;
}
// and lots more lines
}
I want to split this part and move t to another .dart file in order to reduce the main.dart file, so my two files became like:
library myLib;
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: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.deepOrange,
),
home: new MyHomePage(title: 'Flutter App Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// other lines
}
And the other file as:
part of myLib;
int _selected = 0;
List<Widget> makeRadios() {
List <Widget> list = new List <Widget>();
list.add(new Row(
children: <Widget>[
new Radio(value: 0, groupValue: _selected,
onChanged: (int value) {
rOnChanged(value);
}),
new Text('Radio 0'),
],
));
list.add(new Row(
children: <Widget>[
new Radio(value: 1, groupValue: _selected,
onChanged: (int value) {
rOnChanged(value);
}),
new Text('Radio 1'),
],
));
return list;
};
void rOnChanged(int value){
this.setState(() {
_selected = value;
});
print("value: $value");
this._bodyHeight = (value == 1) ? 65.0 : 0.0;
}
But it did not work, and the second file became full of errors!
What is the best way to split/scale the Flutter

Answer 1

Don't separate State<T> from it's StatefulWidget.
If you want to extract that widget to it's own file, move both parts entirely.
So you can have
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:myapp/src/myapp.dart';
void main() => runApp(new MyApp());
and in lib/src/myapp.dart
// lib/src/myapp.dart
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return new Container();
}
}

Answer 2

After searching and reading the given answers and comments, I think the best way to achieve scalability, is to create separate file for each Widget that include the layout and all related function, then add it for the main file/app, for example I wrote the below code to draw a Switch, read its value and save it in the shared preferences:
file name widget.dart
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
class Switchy extends StatefulWidget{
Switchy({Key key}) : super(key: key);
#override
State<StatefulWidget> createState() => new _SwitchyState();
}
class _SwitchyState extends State<Switchy> {
var _value = true;
void onchange(bool value) {
setState(() {
_value = value;
_savePref(value);
});
}
_savePref(value) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
bool use = prefs.getBool('use');
await prefs.setBool('use', value);
print('value changed from $use to $value');
}
#override
Widget build(BuildContext context) {
return
new Card(
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("Enable/Disable the app in the background"),
new Switch(value: _value, onChanged: (bool value) => onchange(value)),
],
),
),
);
}
}
Then, in the main.dart file I used it as:
import 'widgets.dart';
// ..
children: <Widget>[
new Switchy();
//...
]