How to add a widget recursively to Flutter layout - flutter

Question

I'm trying to call a widget inside the other, recursively, I tried to illustrate what I want to do in the image below.
Does anyone know how I can do this?
Below is an example of what I'm trying to do.
Widget createScreen() {
return SingleChildScrollView(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
setState(() {
_i++;
});
},
child: const Text('Buttom +'),
),
TextButton(
onPressed: () {
setState(() {
_i--;
});
},
child: const Text('Buttom -'),
),
],
),
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: _i,
itemBuilder: (BuildContext ctxt, int index) {
return Container(
margin: EdgeInsets.all(10),
color: Colors.blueGrey[500],
height: 100,
// child: createScreen(), //here I tried to call the function inside itself
);
},
),
],
),
);
}

Answer 1

You can have a Container of a Container of a Container, but at some point, you must not have a further one. Are you considering what your stopping point will be, and under what condition? I don't think so, based on your code.

Answer 2

I've included some logic,but it would be better using model data and having item widget.
class MyTabbedPage extends StatefulWidget {
MyTabbedPage({Key? key}) : super(key: key);
#override
_MyTabbedPageState createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage> {
int _i = 0;
int _i2 = 0;
int _i3 = 0;
late double heightScreen, widthScreen;
#override
Widget build(BuildContext context) {
heightScreen =
MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top;
widthScreen = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(title: Text("Teste view")), body: createScreen());
}
Widget mainScreen() {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
margin: const EdgeInsets.only(
top: (10),
bottom: (10),
),
decoration: BoxDecoration(
color: Colors.grey[350],
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(color: Color(4293454064), spreadRadius: 1.5),
],
),
child: SingleChildScrollView(
child: Column(
children: [
ExpandablePanel(
header: const Text("Only teste"),
collapsed: Column(
children: const [Text("Test Sub title")],
),
expanded: createScreen(),
),
],
),
),
),
);
}
Widget createScreen() {
return SingleChildScrollView(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
setState(() {
_i++;
if (_i > 4) _i = 5;
});
},
child: const Text('Buttom +'),
),
TextButton(
onPressed: () {
setState(() {
_i--;
if (_i < 0) _i = 0;
});
},
child: const Text('Buttom -'),
),
],
),
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: _i,
itemBuilder: (BuildContext ctxt, int index) {
return Expanded(
child: Container(
margin: EdgeInsets.all(10),
color: Colors.blueGrey[500],
// height: 100,
child: createScreen2(),
),
);
},
),
],
),
);
}
Widget createScreen2() {
return SingleChildScrollView(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
setState(() {
_i2++;
if (_i2 > 5) _i2 = 5;
});
},
child: const Text('Buttom +'),
),
TextButton(
onPressed: () {
setState(() {
_i2--;
if (_i2 < 0) _i2 = 0;
});
},
child: const Text('Buttom -'),
),
],
),
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: _i2,
itemBuilder: (BuildContext ctxt, int index) {
return Expanded(
child: Container(
margin: EdgeInsets.all(10),
color: Colors.red[500],
// height: 100,
child: createScreen3(),
),
);
},
),
],
),
);
}
Widget createScreen3() {
return SingleChildScrollView(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: ButtonStyle(
foregroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
setState(() {
_i3++;
if (_i3 > 5) _i3 = 5;
});
},
child: const Text('Buttom +'),
),
TextButton(
onPressed: () {
setState(() {
_i3--;
if (_i3 < 0) _i3 = 0;
});
},
child: const Text('Buttom -'),
),
],
),
ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: _i3,
itemBuilder: (BuildContext ctxt, int index) {
return Container(
margin: EdgeInsets.all(10),
color: Colors.yellow[500],
height: 100,
// child: createScreen(),
);
},
),
],
),
);
}
}