How to extract variable from a custom widget?

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',
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
1
2 replies