New to dart/flutter/Flutterflow - apologies if this is obvious...
I have a GridView of selectable boxes (see below for my custom widget for a single selectable box). I want to pass which boxes were selected to my next screen, but I can't figure out how to extract the isSelected variables.
Should I be using an AppState variable for each box? But then how do I adjust that AppState variable in the code for this custom widget?
// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:figma_squircle/figma_squircle.dart';
import 'package:selectable_box/selectable_box.dart';
// Set your widget name, define your parameter, and then add the
// boilerplate code using the button on the right!
class SelectableInterest extends StatefulWidget {
const SelectableInterest({
Key? key,
this.width,
this.height,
required this.interestIcon,
required this.interestText,
required this.boxColor,
required this.selectColor,
required this.textSize,
required this.textColor,
required this.iconPadding,
required this.textPadding,
required this.boxOpacity,
required this.boxBorderColor,
required this.selectBorderColor,
}) : super(key: key);
final double? width;
final double? height;
final Widget interestIcon;
final String interestText;
final Color boxColor;
final Color selectColor;
final double textSize;
final Color textColor;
final double iconPadding;
final double textPadding;
final double boxOpacity;
final Color boxBorderColor;
final Color selectBorderColor;
@override
State<SelectableInterest> createState() => _SelectableInterestState();
}
class _SelectableInterestState extends State<SelectableInterest> {
bool isSelected = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
SelectableBox(
height: widget.height!,
width: widget.width!,
onTap: () {
setState(() {
isSelected = !isSelected;
});
},
color: widget.boxColor,
selectedColor: widget.selectColor,
borderColor: widget.boxBorderColor,
isSelected: isSelected,
showCheckbox: false,
padding: const EdgeInsets.all(0),
opacity: widget.boxOpacity,
selectedBorderColor: widget.selectBorderColor,
child: Align(
alignment: Alignment.center,
child: Column(
children: [
Padding(
padding: EdgeInsets.only(top: widget.iconPadding),
child: widget.interestIcon,
),
Padding(
padding: EdgeInsets.only(top: widget.textPadding),
child: Text(
widget.interestText,
textAlign: TextAlign.center,
style: TextStyle(
color: widget.textColor,
fontSize: widget.textSize,
fontWeight: FontWeight.bold,
fontFamily: 'Karla',
),
),
),
],
),
),
),
],
);
}
}