Flutter - how to add rows with a click on a button - flutter

Question

I want the 6 ball row(plz refer to this image) to be added when I click the '+Add Rows' button, but I've got 1 problem which is that I'm not sure that it has a Listview like I coded.
Please help me to complete 'void addRow()' to add a row with a click on a button.
And could you give me some tips on how to get a new row with completely different random numbers from other rows?
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'dart:math';
import 'package:barcode_scan/barcode_scan.dart';
void main() => runApp(
MaterialApp(
home: BallPage()
),
);
class BallPage extends StatefulWidget {
#override
_BallPageState createState() => _BallPageState();
}
class _BallPageState extends State<BallPage>{
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
drawer: new Drawer(),
appBar: AppBar(
title: Text(
'Magic 6 balls'),
backgroundColor: Colors.black,
actions: <Widget>[
new IconButton(
icon: new Icon(MdiIcons.squareInc),
color: Colors.white,
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute())
);
},
),
],
),
body: Number(),
);
}
}
class SecondRoute extends StatefulWidget {
#override
_SecondRouteState createState() {
return new _SecondRouteState();
}
}
class _SecondRouteState extends State<SecondRoute>{
String result ="Hey there!";
Future _scanQR() async {
try{
String qrResult = await BarcodeScanner.scan();
setState(() {
result = qrResult;
});
} on PlatformException catch (ex) {
if (ex.code == BarcodeScanner.CameraAccessDenied){
setState(() {
result = "Camera permission was denied";
});
} else {
setState(() {
result = "Unknown Error $ex";
});
}
} on FormatException {
setState(() {
result = "You pressed the black button before scanning anything";
});
}catch (ex) {
setState(() {
result = "Unknown Error $ex";
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('QR Code Scan'),
),
body: Center(
child: Text(
result,
style: new TextStyle(fontSize: 20.0),
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _scanQR,
label: Text('Scan'),
icon: Icon(Icons.camera_alt),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
class Number extends StatefulWidget {
#override
_NumberState createState() => _NumberState();
}
class _NumberState extends State<Number> {
int ball1 = 1;
int ball2 = 1;
int ball3 = 1;
int ball4 = 1;
int ball5 = 1;
int ball6 = 1;
void randomNumbers() {
setState(() {
ball1 = Random().nextInt(49) + 1;
ball2 = Random().nextInt(49) + 1;
ball3 = Random().nextInt(49) + 1;
ball4 = Random().nextInt(49) + 1;
ball5 = Random().nextInt(49) + 1;
ball6 = Random().nextInt(49) + 1;
});
}
void addRows(){
setState(() {
});
}
void removeRows(){
setState(() {
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
SizedBox(height: 100.0),
Center(
child: Text('Winners Number')
),
SizedBox(height: 16.0),
buildForm(),
SizedBox(height: 16.0),
RaisedButton.icon(
icon: Icon(Icons.add),
label: Text('Add Rows'),
onPressed: () {
addRows();
},
),
],
),
),
],
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
randomNumbers();
},
label: Text(
'Click Here!'),
icon: Icon(
Icons.loop),
backgroundColor: Colors.black,
),
);
}
Widget buildForm() {
List<Widget> list = new List();
for (var index = 0; index < 1; index++) {
list.add(Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 60,
width: 60,
child: Center
(
child: Text(
'$ball1',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center
(
child: Text(
'$ball2',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center
(
child: Text(
'$ball3',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center
(
child: Text(
'$ball4',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center
(
child: Text(
'$ball5',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center
(
child: Text(
'$ball6',
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
),
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
),
],
));
list.add(
SizedBox(
height: 12.0,
));
}
return Column(
children: list);
}
}

Answer 1

What I would recommend to do is, have the rows always there but just hide them with Visibility widget.
Add an int counter variable and increment it on each click on addRow.
Then wrap your ball widgets around with visibility and do something like that:
Pseudo-code
Visibilty(
visible: counter == 1,
child: BallWidget(),
)
... and so on for all the other ball widgets.
Hope it helps.