How to add a widget when a button is pressed flutter - dart

Question

For my flutter app I need a container that can be added when I press the add button. So I then looked at other Stack Overflow questions such as: Flutter - Render new Widgets on click and Flutter - Add new Widget on click. After, this is what I came up with.
class Body extends StatelessWidget {
#override
Widget build(BuildContext context) {
var tPadding= MediaQuery.of(context).size.width * 0.08;
var bPadding= MediaQuery.of(context).size.width * 0.15;
var vPadding = MediaQuery.of(context).size.height * 0.015;
return Expanded (
child: Container (
child: NotificationListener<OverscrollIndicatorNotification> (
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
},
child: PageView.builder(
pageSnapping: false,
controller: PageController(viewportFraction: 0.85),
itemCount: container.length,
itemBuilder: (context, i) {
return Padding (
padding: EdgeInsets.only(
left: vPadding,
right: vPadding,
top: tPadding,
bottom: bPadding
),
child: container[i]
);
},
)
)
)
);
}
}
int _count = 1;
List container = [
List.generate(_count, (int i) => ContainerCard),
AddContainer()
];
class ContainerCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Material (
borderRadius: BorderRadius.circular(50.0),
color: Colors.white,
elevation: 8.0,
);
}
}
class AddContainer extends StatefulWidget {
#override
AddContainerState createState() => AddContainerState();
}
class AddContainerState extends State<AddContainer> {
#override
Widget build(BuildContext context) {
return Material(
borderRadius: BorderRadius.circular(50.0),
color: Colors.white,
elevation: 8.0,
child: InkWell (
onTap: _addContainer,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon (
Icons.add,
size: 50.0,
)
]
),
)
);
}
void _addContainer() {
setState(() {
_count = _count + 1;
});
}
}
But for some reason this is not working. What is wrong and how can I fix this?
Full Code:
import 'package:flutter/material.dart';
class MainPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp (
debugShowCheckedModeBanner: false,
home: Scaffold (
backgroundColor: Colors.white,
body: Column (
children: <Widget> [
AppBar(),
Body(),
]
)
)
);
}
}
class AppBar extends StatelessWidget {
#override
Widget build(BuildContext context) {
var abHeight = MediaQuery.of(context).size.height * 0.2;
var vPadding = MediaQuery.of(context).size.height * 0.07;
return Container (
height: abHeight,
child: Column (
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget> [
Row (
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: vPadding),
child: PoppinsText (
text: "App",
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
]
)
]
)
);
}
}
class Body extends StatelessWidget {
#override
Widget build(BuildContext context) {
var tPadding= MediaQuery.of(context).size.width * 0.08;
var bPadding= MediaQuery.of(context).size.width * 0.15;
var vPadding = MediaQuery.of(context).size.height * 0.015;
return Expanded (
child: Container (
child: NotificationListener<OverscrollIndicatorNotification> (
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
},
child: PageView.builder(
pageSnapping: false,
controller: PageController(viewportFraction: 0.85),
itemCount: container.length,
itemBuilder: (context, i) {
return Padding (
padding: EdgeInsets.only(
left: vPadding,
right: vPadding,
top: tPadding,
bottom: bPadding
),
child: container[i]
);
},
)
)
)
);
}
}
int _count = 1;
List container = [
List.generate(_count, (int i) => ContainerCard),
AddContainer()
];
class ContainerCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Material (
borderRadius: BorderRadius.circular(50.0),
color: Colors.white,
elevation: 8.0,
);
}
}
class AddContainer extends StatefulWidget {
#override
AddContainerState createState() => AddContainerState();
}
class AddContainerState extends State<AddContainer> {
#override
Widget build(BuildContext context) {
return Material(
borderRadius: BorderRadius.circular(50.0),
color: Colors.white,
elevation: 8.0,
child: InkWell (
onTap: _addContainer,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Column (
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon (
Icons.add,
size: 50.0,
)
]
),
)
);
}
void _addContainer() {
setState(() {
_count = _count + 1;
});
}
}
class PoppinsText extends StatelessWidget {
PoppinsText ({Key key,
this.text,
this.fontSize,
this.fontWeight,
this.color}) : super(key: key);
final String text;
final double fontSize;
final FontWeight fontWeight;
final Color color;
#override
Widget build(BuildContext context) {
return Text (
text,
style: TextStyle (
fontFamily: 'Poppins',
fontWeight: fontWeight,
fontSize: fontSize,
color: color
),
);
}
}

Answer 1

You are using a Stateless widget. Switch to Stateful widget
Edit
Updated as per requirement.
The trick here is to use reverse property of pageview.
class Body extends StatefulWidget {
#override
_BodyState createState() => _BodyState();
}
class _BodyState extends State<Body> {
int count = 1;
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
child: NotificationListener<OverscrollIndicatorNotification>(
onNotification: (OverscrollIndicatorNotification overscroll) {
overscroll.disallowGlow();
},
child: PageView.builder(
reverse: true,
pageSnapping: false,
controller: PageController(viewportFraction: 0.85),
itemCount: count,
itemBuilder: (context, i) {
print(i);
if (i == 0) {
return Padding(
padding: EdgeInsets.only(
left:
MediaQuery.of(context).size.height * 0.015,
right:
MediaQuery.of(context).size.height * 0.015,
top: MediaQuery.of(context).size.width * 0.08,
bottom:
MediaQuery.of(context).size.width * 0.15),
child: Material(
borderRadius: BorderRadius.circular(50.0),
color: Colors.white,
elevation: 8.0,
child: InkWell(
onTap: () {
setState(() {
count++;
});
},
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.add,
size: 50.0,
)
]),
)));
} else {
return Padding(
padding: EdgeInsets.only(
left:
MediaQuery.of(context).size.height * 0.015,
right:
MediaQuery.of(context).size.height * 0.015,
top: MediaQuery.of(context).size.width * 0.08,
bottom:
MediaQuery.of(context).size.width * 0.15),
child: Material(
borderRadius: BorderRadius.circular(50.0),
color: Colors.white,
elevation: 8.0,
));
}
}))));
}

Answer 2

I don't know If you found your solution yet. This is my code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
const double paddingInset = 5;
Color tileColor = Colors.grey[350];
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Test App',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
List<Widget> bodyElements = [];
int num = 0;
void addBodyElement() {
bodyElements.add(
Padding(
padding: const EdgeInsets.all(paddingInset),
child: Container(
height: 500,
width: double.infinity,
child: Center(child: Text('This is section $num')),
decoration: BoxDecoration(
color: tileColor,
borderRadius: BorderRadius.circular(10),
),
),
),
);
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Center(child: Text('Home')),
brightness: Brightness.dark,
leading: IconButton(
icon: Icon(Icons.refresh),
onPressed: () {
setState(() {
bodyElements.clear();
num = 0;
});
},
),
),
body: ListView(
children: <Widget>[
Column(
children: bodyElements,
),
],
),
floatingActionButton: FloatingActionButton.extended(
icon: Icon(Icons.add),
label: Text('Add'),
onPressed: () {
num++;
setState(() {
addBodyElement();
});
},
),
);
}
}