Add more counter rows in flutter-CodePudding

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]:

The example that I need

CodePudding user response：

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),
                  )
                ],
              ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

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,
                      )
                    ],
    
                  ),
                ],
              ),
    
            ),
        );
      }
    }

CodePudding user response：

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);
 
}

CodePudding user response：

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,
              ),
            ],
          ),
        ),
      ],
    ),
  );