Home > other >  How to make a list of stateful widgets without passing inputs inside of the list?
How to make a list of stateful widgets without passing inputs inside of the list?

Time:02-01

I want to be able to randomly select certain widgets and use them as cards and then input values into their parameters. For example, if Ralph wanted three different fish and knew that he wanted to name them Jack, Piggy, and Simon, but his parents were buying and choosing the types of fish for him, how could we make a list of different fish at the store without names?

class Fish extends StatefulWidget {
  const Fish ({
    super.key,
    this.color,
    this.child,
    this.name,
  });

  final Color color;
  final Widget? child;
  final String name;

  @override
  State<Fish> createState() => _FishState();
}

class _FishState extends State<Fish> {
  String name = widget.name;
  double _size = 1.0;

  void grow() {
    setState(() { _size  = 0.1; });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: widget.color,
      transform: Matrix4.diagonal3Values(_size, _size, 1.0),
      child: widget.child,
    );
  }
}

If I try to make a list of fish without naming them, it won't work since it needs me to input a name parameter. How can I avoid this or change the names afterward?

I would love to do something like this:

List<Widget> fishAtTheStore = [
Fish(color: Colors.red, child: Text("This is a fish")), 
Fish(color: Colors.blue, child: Text("This is a fish")), 
Fish(color: Colors.yellow, child: Text("This is a fish")), 
Fish(color: Colors.green, child: Text("This is a fish")), 
Fish(color: Colors.orange, child: Text("This is a fish")),
]

class RalphsAquarium extends StatefulWidget {
  const RalphsAquarium({super.key});

  @override
  State<RalphsAquarium> createState() => _RalphsAquariumState();
}

class _RalphsAquariumState extends State<RalphsAquarium> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
      fishAtTheStore[0](name: "Jack"),
      fishAtTheStore[3](name: "Piggy"),
      fishAtTheStore[1](name: "Simon"),
      ],
      );
  }
}

The actual functionality outside of the aforementioned issues and the required parameters does not matter to me.

CodePudding user response:

Looks like you need some State Management here.

You've got a lot of libraries available to achieve this : Provider (which I recommend), Riverpod, Bloc are the most common ones (please avoid GetX)

Once you pick your State Management library, the logic to implement is the following :

  • Create a class Fish (not a widget, a model) which will hold all the params of your Fish.
class Fish {
  Fish(this.name);

  final String name;
}
  • Use this class in your Widget allowing to pick fishes
  • Create a "controller" which job will be to keep in memory the fish which will be picked
    In this controller, you can add all your logic (like creating methods allowing you to update the name of the fish)

I strongly advise you to read this article of the flutter documentation first, to fully understand how to implement what you need

  • Related