How can I repurpose boost button widgets in flutter? - flutter

Question

I have a question here, I created an increase button widget in a separate file (component)...
increase_button_widget.dart
import 'package:flutter/material.dart';
class IncreaseButtonWidget extends StatefulWidget {
const IncreaseButtonWidget({super.key});
#override
State<IncreaseButtonWidget> createState() => _IncreaseButtonWidgetState();
}
class _IncreaseButtonWidgetState extends State<IncreaseButtonWidget> {
int _counterValue = 0;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return CounterButton(
loading: false,
onChange: (int val) {
setState(() {
_counterValue = val;
});
},
count: _counterValue,
countColor: Colors.blue,
buttonColor: Colors.blue,
progressColor: Colors.blue,
);
}
}
Here I will reuse it more than once in my application...
increase.dart
import 'package:increase/widgets/increase_button_widget.dart';
import 'package:flutter/material.dart';
class MyPassagerClassPage extends StatefulWidget {
const MyPassagerClassPage({super.key});
#override
State<MyPassagerClassPage> createState() => _MyPassagerClassPageState();
}
enum SingingCharacter { economy, business, first }
class _MyPassagerClassPageState extends State<MyPassagerClassPage> {
SingingCharacter? _character = SingingCharacter.economy;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Passager & Class"),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.check_outlined),
tooltip: 'Go to the next page',
onPressed: () {
Navigator.pop(context);
},
),
],
),
body: Column(
children: [
const SizedBox(height: 20),
const Text(
'Passengers',
style: TextStyle(fontSize: 30),
),
const ListTile(
leading: Icon(Icons.accessibility_outlined),
title: Text('Adults'),
subtitle: Text('12+ years'),
trailing: IncreaseButtonWidget(),
),
const ListTile(
leading: Icon(Icons.boy_outlined),
title: Text('Children'),
subtitle: Text('2-11 years'),
trailing: IncreaseButtonWidget(),
),
const ListTile(
leading: Icon(Icons.child_care_outlined),
title: Text('Infants'),
subtitle: Text('Under 2 years'),
trailing: IncreaseButtonWidget(),
),
const DividerWidget(),
const SizedBox(height: 25),
const Text(
'Class',
style: TextStyle(fontSize: 30),
),
ListTile(
title: const Text('Economy'),
leading: Radio<SingingCharacter>(
value: SingingCharacter.economy,
groupValue: _character,
onChanged: (SingingCharacter? value) {
setState(() {
_character = value;
});
},
),
),
ListTile(
title: const Text('Business'),
leading: Radio<SingingCharacter>(
value: SingingCharacter.business,
groupValue: _character,
onChanged: (SingingCharacter? value) {
setState(() {
_character = value;
});
},
),
),
ListTile(
title: const Text('First'),
leading: Radio<SingingCharacter>(
value: SingingCharacter.first,
groupValue: _character,
onChanged: (SingingCharacter? value) {
setState(() {
_character = value;
});
},
),
),
const DividerWidget(),
],
),
);
}
}
In this case i used this widget 3 times...
My question is how to get the value of each of these increase buttons separately to be able to get them in a different variable...
Hence, in this case, each of these widgets has input data that I will need later to do another calculation.