Meggy
Meggy

Reputation: 1671

Flutter/Dart: Pass Parameters to a Stateful Widget?

I need to call pass my title and oldtitle parameters to my EditPage Stateful widget. But if I do this;

 class EditPage extends StatefulWidget {
   String title;  
   String oldtitle;
   EditPage({this.title, this.oldtitle})

The strings are not available to the build unless I call it them as widget.title and widget.oldtitle.

But I'm using a textfield within a form that doesn't seem to work right if I use these widgets.

Here's the form code:

      Container(                   
                child: TextField(
                    decoration: new InputDecoration(
                    hintText: widget.oldtitle,
                    contentPadding: new EdgeInsets.all(1.0),
                    border: InputBorder.none,
                    filled: true,
                    fillColor: Colors.grey[300],
                  ),
                  keyboardType: TextInputType.text,
                  autocorrect: false,
                  onChanged: (titleText) {
                    setState(() {
                       widget.title= titleText;
                    });
                  },
                ),
              ),

But then if I do this;

class _EditPageState extends State<EditPage> {
   String title;  
   String oldtitle;  
   EditPage({this.title, this.oldtitle})

I can't pass the title parameter to it from another screen. IE:

`EditPage(title:mytitle, oldtitle:myoldtitle);`

So What's the correct way to pass a parameter to a Stateful widget?

Upvotes: 5

Views: 13420

Answers (2)

Meggy
Meggy

Reputation: 1671

Looks like the solution was to separate the title from the oldtitle;

  class EditPage extends StatefulWidget {
     String oldtitle;
     EditPage({this.oldtitle})

and then;

 class _EditPageState extends State<EditPage> {
  String title;     

So now for the form;

Container(                   
            child: TextField(
                decoration: new InputDecoration(
                hintText: widget.oldtitle,
                contentPadding: new EdgeInsets.all(1.0),
                border: InputBorder.none,
                filled: true,
                fillColor: Colors.grey[300],
              ),
              keyboardType: TextInputType.text,
              autocorrect: false,
              onChanged: (titleText) {
                setState(() {
                   title= titleText;
                });
              },
            ),
          ),

Upvotes: 1

Alex Usmanov
Alex Usmanov

Reputation: 158

You should never pass the variables to the state directly, since it does not guarantee that widget will get rebuilt when state will be updated. You should accept parameters via your stateful widget and access them from the state itself via widget.variable.

Example:

class TestWidget extends StatefulWidget {
  final String variable;

  TestWidget({Key key, @required this.variable}) : super(key: key);

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

class _TestWidgetState extends State<TestWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        // Accessing the variables passed into the StatefulWidget.
        child: Text(widget.variable),
      ),
    );
  }
}

Upvotes: 11

Related Questions