Add more counter rows in flutter - flutter

Question

I wrote this code that represents a row counter and I need to know how to add more rows for more actions/activities like the below picture.
If possible don't change the code too much since I need to show and explain this to my classmate.
class CounterApplication extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: '¡Contador de Propósitos!',
home: CounterScreenState(),
);
}
}
class CounterScreenState extends StatefulWidget {
#override
CounterScreen createState() => CounterScreen();
}
class CounterScreen extends State<CounterScreenState>{
// Contador_1
int _count1 = 0;
void _incrementCount1() {
setState(() {
_count1++;
});
}
void _decrementCount1() {
if(_count1 < 1) {
return;
}
setState(() {
_count1--;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('¡Contador de Propósitos!'),
),
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child: Icon(Icons.remove),
onPressed: _decrementCount1,
),
Text("Caminatas:"),
Text("${_count1}"),
FloatingActionButton(
child:Icon(Icons.add),
onPressed: _incrementCount1,
)
],
),
),
);
}
}
The example that I need]:

Answer 1

check out this one
class CounterApplication extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: '¡Contador de Propósitos!',
home: CounterScreenState(),
);
}
}
class CounterScreenState extends StatefulWidget {
#override
CounterScreen createState() => CounterScreen();
}
class CounterScreen extends State<CounterScreenState> {
final int counterCount = 5;
final List<int> _counters = [];
void _incrementCount(int index) {
setState(() {
_counters[index]++;
});
}
void _decrementCount(int index) {
if (_counters[index] < 1) {
return;
}
setState(() {
_counters[index]--;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('¡Contador de Propósitos!'),
),
body: Center(
child: Column(
children: [
const SizedBox(height: 10),
for (int i = 0; i < counterCount; i++)
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child: const Icon(Icons.remove),
onPressed: () => _decrementCount(i),
),
Text("Caminatas: ${_counters[i]}"),
FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => _incrementCount(i),
)
],
),
],
),
),
);
}
}

Answer 2

Wrap the Row with Column widget and add more Rows to display other elements
class CounterApplication extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: '¡Contador de Propósitos!',
home: CounterScreenState(),
);
}
}
class CounterScreenState extends StatefulWidget {
#override
CounterScreen createState() => CounterScreen();
}
class CounterScreen extends State<CounterScreenState>{
// Contador_1
int _count1 = 0;
// Libros_1
int _count2 = 0;
void _incrementCount1() {
setState(() {
_count1++;
});
}
void _decrementCount1() {
if(_count1 < 1) {
return;
}
setState(() {
_count1--;
});
}
void _incrementCount2() {
setState(() {
_count2++;
});
}
void _decrementCount2() {
if(_count2 < 1) {
return;
}
setState(() {
_count2--;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('¡Contador de Propósitos!'),
),
body: Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child: Icon(Icons.remove),
onPressed: _decrementCount1,
),
Text("Caminatas:"),
Text("${_count1}"),
FloatingActionButton(
child:Icon(Icons.add),
onPressed: _incrementCount1,
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child: Icon(Icons.remove),
onPressed: _decrementCount2,
),
Text("Libros:"),
Text("${_count1}"),
FloatingActionButton(
child:Icon(Icons.add),
onPressed: _incrementCount2,
)
],
),
],
),
),
);
}
}

Answer 3

import 'package:flutter/material.dart';
void main() {
runApp(CounterApplication());
}
class CounterApplication extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: '¡Contador de Propósitos!',
home: CounterScreenState(),
);
}
}
class CounterScreenState extends StatefulWidget {
#override
CounterScreen createState() => CounterScreen();
}
class CounterScreen extends State<CounterScreenState>{
/// change data as per requirment
List<Counter> counterData= [
Counter('Data 1',0),
Counter('Data 2',0),
Counter('Data 3',0),
Counter('Data 4',0),
Counter('Data 5',0),
Counter('Data 6',0),
];
/// for increment and decrement
/// first get current counter using index then change as per need
void _incrementCount1(int index) {
setState(() {
Counter currentCounter = counterData[index];
currentCounter.count++;
});
}
void _decrementCount1(int index) {
Counter currentCounter = counterData[index];
if(currentCounter.count < 1) {
return;
}
setState(() {
currentCounter.count--;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('¡Contador de Propósitos!'),
),
body: Center(
/// here we use listview.builder()
// to make widgets as per data in list
child: ListView.builder(
itemCount: counterData.length,
itemBuilder: (_,index) => Padding(
// gave padding to give space
padding:const EdgeInsets.symmetric(vertical: 10.0),
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child:const Icon(Icons.remove),
/// made change as index is needed
onPressed:(){ _decrementCount1(index);},
),
Text(counterData[index].name),
Text("${counterData[index].count}"),
FloatingActionButton(
child:const Icon(Icons.add),
onPressed: (){ _incrementCount1(index);},
)
],
),
),
)
),
);
}
}
class Counter{
String name;
int count;
Counter(this.name,this.count);
}

Answer 4

return Scaffold(
appBar: AppBar(
title: const Text('¡Contador de Propósitos!'),
),
body: Container (
child: ListView(
padding: EdgeInsets.all(20),
children: <Widget> [
mainAxisAlignment: MainAxisAlignment.spaceAround,
Center (
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child: Icon(Icons.remove),
onPressed: _decrementCount1,
),
Text("Caminatas:"),
Text("${_count1}"),
FloatingActionButton(
child:Icon(Icons.add),
onPressed: _incrementCount1,
),
],
),
Center (
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child: Icon(Icons.remove),
onPressed: _decrementCount1,
),
Text("Caminatas:"),
Text("${_count1}"),
FloatingActionButton(
child:Icon(Icons.add),
onPressed: _incrementCount1,
),
],
),
Center (
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FloatingActionButton(
child: Icon(Icons.remove),
onPressed: _decrementCount1,
),
Text("Caminatas:"),
Text("${_count1}"),
FloatingActionButton(
child:Icon(Icons.add),
onPressed: _incrementCount1,
),
],
),
),
],
),
);