Hiding and Displaying a Form Widget in Flutter-CodePudding

I am aiming for my flutter page to have an 'edit' information button when the page is first loaded, whereby when this button is clicked, a Form widget appears for the user to update or 'edit' their information via this form. When they click this edit button, the edit button should disappear when the form is displayed, and when the form is submitted, it re-appears

The form running by its self is perfect without the 'edit' button that changes its visibility, however when I wrapped the form inside a ListView() to allow it to contain both an Elevated Button and the Form as children, it threw countless errors. Some of these errors included 'Vertical viewport was given unbounded height' and 'RenderBox was not laid out: RenderViewport#262ac NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1979 pos 12: 'hasSize'' etc...

Here is the code, i've left out known unnecessary lines however, I have kept some potential unnecessary code in this, that may be interfering.

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isVisible = false;

  @override
  Widget build(BuildContext context) { 
    return ListView(
         padding: const EdgeInsets.all(10),
         children: [
           Container(
               height: 50,
               padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
               child: ElevatedButton(
                 child: const Text('Edit Information'),
                 onPressed: () => setState(() => isVisible = !isVisible),
               )
           ),
           if(isVisible)
           Form(
              key: _formKey,
              child: ListView(
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.all(20),
                    child: TextFormField(// left out unnecessary info)
                  )
                  Container(
                      height: 50,
                      padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                      child: ElevatedButton(
                        child: const Text('Update'),
                        onPressed: () {
                          }
                        },
                      )
                  ),
               ])
           )]);
   }
}

I am new to flutter and would love some help.

CodePudding user response：

The ListView needs a defined space to expand and its parent is another ListView that doesn't have a defined space height, in this case you have two options, change it to a column or add shrinkWrap property: true, so that the ListView's size is determined by the size of the content itself, I would particularly choose the Column, the simplest widget.

Options 1:

ListView(
    padding: const EdgeInsets.all(10),
    children: [
      Container(
          height: 50,
          padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
          child: ElevatedButton(
            child: const Text('Edit Information'),
            onPressed: () => setState(() => isVisible = !isVisible),
          )),
      if (isVisible)
        Form(
          key: _formKey,
          child: Column(
            children: [
              Container(
                  padding: const EdgeInsets.all(20), child: TextFormField()),
              Container(
                  height: 50,
                  padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                  child: ElevatedButton(
                      child: const Text('Update'), onPressed: () {})),
            ],
          ),
        )
    ],
);

Options 2:

ListView(
    padding: const EdgeInsets.all(10),
    children: [
      Container(
          height: 50,
          padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
          child: ElevatedButton(
            child: const Text('Edit Information'),
            onPressed: () => setState(() => isVisible = !isVisible),
          )),
      if (isVisible)
        Form(
          key: _formKey,
          child: ListView(
            shrinkWrap: true,
            children: [
              Container(
                  padding: const EdgeInsets.all(20), child: TextFormField()),
              Container(
                  height: 50,
                  padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
                  child: ElevatedButton(
                      child: const Text('Update'), onPressed: () {})),
            ],
          ),
        )
    ],
);