0

As I started to learn flutter, I'm using my knowledge to create a basic calculator with this framework. I found a problem in my app... And that is: how to pass params and info from one widget to another? Specially from one Stateless widget to another. I've been looking in different places, but I don't understand how I can do it and how it works.

Thank you in advance to all of you that can explain me about it.

This is the code I'm working with:

class CalcStructure extends StatelessWidget {

  final List<String> rowOne = ['AC', 'Del', '%', '/'];
  final List<String> rowTwo = ['7', '8', '9', '*'];
  final List<String> rowThree = ['4', '5', '6', '-'];
  final List<String> rowFour = ['1', '2', '3', '+'];
  final List<String> rowFive = ['00', '0', '.', '='];

  @override
  Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.44,
            color: Colors.red,
          ),
          RowStructure(),
          RowStructure(),
          RowStructure(),
          RowStructure(),
          RowStructure(),         
        ],
      );
  }
}

And the class of RowStructure

class RowStructure extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Row(
            children: <Widget>[
              Container(
                child: FlatButton(
                  onPressed: () => print('Pressed'), 
                  child: Text('AC'),
                ),
                width: MediaQuery.of(context).size.width * 0.25,
                height: MediaQuery.of(context).size.height * 0.09,
              ),
              Container(
                child: FlatButton(
                  onPressed: () => print('Pressed'), 
                  child: Text('AC'),
                ),
                width: MediaQuery.of(context).size.width * 0.25,
                height: MediaQuery.of(context).size.height * 0.09,
              ),
              Container(
                child: FlatButton(
                  onPressed: () => print('Pressed'), 
                  child: Text('AC'),
                ),
                width: MediaQuery.of(context).size.width * 0.25,
                height: MediaQuery.of(context).size.height * 0.09,
              ),
              Container(
                child: FlatButton(
                  onPressed: () => print('Pressed'), 
                  child: Text('AC'),
                ),
                width: MediaQuery.of(context).size.width * 0.25,
                height: MediaQuery.of(context).size.height * 0.09,
              ),
            ],
          );
  }
}

The idea is to pass each of the lists (rowOne, rowTow...) as parameters to the other class, so I can re-use the code... Can you help me please?

Thank you

  • 1
    Take a look at this: https://flutter.dev/docs/cookbook/navigation/passing-data . Although you can pass data from one widget to another, you will have to use a state management solution once your app gets more complex. You can't just pass data between five widgets around and expect all of your widgets to update when that data changes. I recommend learning provider instead of passing that data around: https://flutter.dev/docs/development/data-and-backend/state-mgmt/options – CoderUni Jan 18 '21 at 04:52
  • 1
    Use constructor. Follow this blog : https://medium.com/flutter/how-to-create-stateless-widgets-6f33931d859 – Mayur Chaudhary Jan 18 '21 at 04:54
  • 1
    "Passing data from one widget to another" always seemed odd to me when you look at it from an MVC perspective. Widgets are View and Controller. Data should end up in Model, so that the various controllers can assemble what their view needs. if you pass stuff directly from one widget to another's constructor, it will make it harder to mock values and classes for testing. – Randal Schwartz Jan 18 '21 at 22:06

1 Answers1

4

You simply pass data/value from one widget class to another through constructor:

class RowStructure extends StatelessWidget {
  
  String text = "";
  VoidCallback onTap;
  
  RowStructure({ this.text, this.onTap });
  
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          child: FlatButton(
            onPressed: onTap,
            child: Text(text),
          ),
shorol
  • 790
  • 5
  • 11