Add widgets on click with parameters

Question

I followed this stack post to create widgets on click. However, since I'm creating a form, I require to send to the new widget a parameter so that questions are labeled 1, 2, 3 and so on. Here is the code and an execution clip:

import 'package:flutter/material.dart';

class CreateForms extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => _CreateForms();

}

class _CreateForms extends State<CreateForms>{
  //final myController = TextEditingController();
  int _numQuestions = 1;

  @override
  Widget build(BuildContext context) {
    print("numQuestions first: $_numQuestions");
    List<Widget> _questions = new List.generate(_numQuestions, (int i) => new Question(_numQuestions));
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        padding: new EdgeInsets.all(30.0),
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: 20),
            _displayTitle(),
            new Container(
              height: 200.0,
              child: new ListView(
                children: _questions,
                scrollDirection: Axis.vertical,
              ),
            ),
            new FlatButton(
              onPressed: (){
                setState(() {
                  _numQuestions++;
                });
              },
              child: new Icon(Icons.add),
            ),
            SizedBox(height: 20),
            const Divider(
              color: Colors.black,
              height: 20,
              thickness: 1,
              indent: 20,
              endIndent: 0,
            ),
            Row(
              children: <Widget>[
                new Expanded(child: FlatButton(
                  onPressed: () {
                    //return to prev window
                    Navigator.pop(context);
                  },
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: Text('Cancel', style: TextStyle(fontSize: 20.0)),
                ), flex: 2),
                new Expanded(child: RaisedButton(
                  child: Text('Create form', style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
                  onPressed: () {
                    //return to prev window with task text
                    Navigator.pop(context/*, myController.text*/);
                  },
                ), flex: 3)
              ],
            )
          ],
        ),
      ),
    );
  }

  _displayTitle(){
    return TextField(
      maxLines: null,
      autofocus: true,
      decoration: InputDecoration(
          border: InputBorder.none,
          hintText: 'Form title'
      ),
      style: TextStyle(
          color: Colors.black,
          fontSize: 20,
          fontWeight: FontWeight.bold
      ),
    );
  }
}

class Question extends StatefulWidget {
  int _numQuestions;
  Question(int numQuestions){
    print("numQuestions: $_numQuestions");
    this._numQuestions = _numQuestions;
  }

  @override
  State<StatefulWidget> createState() => new _Question(_numQuestions);
}

class _Question extends State<Question> {
  int _numQuestions;
  _Question(int numQuestions){
    this._numQuestions = _numQuestions;
  }

  @override
  Widget build(BuildContext context) {
    return new TextFormField(
      maxLines: null,
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: 'Question title',
        isDense: true,
        prefixIcon:Text(_CreateForms()._numQuestions.toString() + ". "),
        prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
      ),
    );
  }
}

Question:

How do I correctly label each new question with it's corresponding number? I tried removing the _CreateForms() in prefixIcon:Text(_CreateForms()._numQuestions.toString() + ". "),, but then the numbers displayed are "null"

Bonus question: Why does everything disapear if I remove the height: 200.0,?

EDIT: To fix this, constructors for Question and _Question class should be:

_Question(int numQuestions){
    this._numQuestions = numQuestions;
  }

and not

_Question(int numQuestions){
    this._numQuestions = _numQuestions;
  }

Adrian-Paul Florea · Accepted Answer · 2020-11-21 18:24:27Z

1

You should have done List<Widget> _questions = new List.generate(_numQuestions, (int i) => new Question(i)); insead of Question(_numQuestions)); The listview disapears because it needs a fixed height, maybe wraping the listview with Expanded instead of Container whould help. Also, you can add resizeToAvoidBottomPadding: false inside the Scaffold to avoid getting the yellow strips when keyboard is opened.

answered Nov 21, 2020 at 18:24

Adrian-Paul Florea

1312 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

afarre Over a year ago

Changing from Question(_numQuestions)); to Question(i)); I realised the constructors in Question and _Question class were wrong. All had this._numQuestions = _numQuestions; instead of this._numQuestions = numQuestions;. In any case, you allowed me to see that plus solving the Expanded and yellow strips, so I'll take it as a valid answer :)

Collectives™ on Stack Overflow

Add widgets on click with parameters

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related