Flutter: retrieve dynamic data inside a parent screen

Viewed 110

I made a button generator that can create a specified number of buttons and assign them titles/ determine if they are selected. I am trying to figure out how to pass the data back to the screen/ widget this widget is called on to run if/else statements based on what buttonNames[I] is returned and I am 100% stuck. I have been able to print the statement of selected but unable to pass that back to my initial widgets. Any thoughts?

import 'package:flutter/material.dart';

class MakeButtons extends StatefulWidget {
  MakeButtons(this.buttonNames, this.number, {this.update});

  final List buttonNames;
  final int number;
  String update;

  @override
  _MakeButtonsState createState() => _MakeButtonsState();
}

class _MakeButtonsState extends State<MakeButtons> {
  String selected;
  ValueChanged<String> onChanged;

  // void buttonPressed() {
  //   print(selected);
  // }

  Widget buildButton(
    List buttonNames,
    int num,
    String upd,
  ) {
    final buttonName = buttonNames;
    final buttonNamesMap = buttonName.asMap();

    return Row(
      children: [
        for (int i = 0; i < num; i++)
          GestureDetector(
            onTap: () async {
              setState(() {
                selected = buttonNamesMap[i];
              });
              // buttonPressed();
              return () => onChanged(buttonNamesMap[i]);
            },
            child: Container(
              padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
              decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  border: Border.all(width: 1, color: Colors.white),
                  color: selected == buttonNamesMap[i]
                      ? Colors.green
                      : Colors.yellow),
              child: Text(buttonNamesMap[i]),
            ),
          ),
      ],
    );
  }

  Widget build(BuildContext context) {
    return buildButton(
      widget.buttonNames,
      widget.number,
      widget.update,
    );
  }
}
1 Answers

Declare the onChanged function in contructor.

import 'package:flutter/material.dart';

class MakeButtons extends StatefulWidget {
  MakeButtons(
    this.buttonNames,
    this.number, {
    this.update,
    this.onChanged,
  });

  final List buttonNames;
  final int number;
  String update;
  final ValueChanged<String> onChanged;

  @override
  _MakeButtonsState createState() => _MakeButtonsState();
}

class _MakeButtonsState extends State<MakeButtons> {
  String selected;

  Widget buildButton(
    List buttonNames,
    int num,
    String upd,
  ) {
    final buttonName = buttonNames;
    final buttonNamesMap = buttonName.asMap();

    return Row(
      children: [
        for (int i = 0; i < num; i++)
          GestureDetector(
            onTap: () async {
              setState(() {
                selected = buttonNamesMap[i];
              });
              widget.onChanged(buttonNamesMap[i]);
            },
            child: Container(
              padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
              decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  border: Border.all(width: 1, color: Colors.white),
                  color: selected == buttonNamesMap[i]
                      ? Colors.green
                      : Colors.yellow),
              child: Text(buttonNamesMap[i]),
            ),
          ),
      ],
    );
  }

  Widget build(BuildContext context) {
    return buildButton(widget.buttonNames, widget.number, widget.update);
  }
}
Related