Search code examples
flutterrendering

Flutter Renderflexproblem


i have a couple of textfields and buttons on my screen, but at the end a lot of unused space. When i enter a textfield to enter the text, there is a renderflexproblem...maybe because the keyboard comes up from the bottom. I try to use "Expand" for the last button, but this will expand the button to the bottom of the screen and the renderflexproblem still occur. I want to use the full size of the screen, even if the keyboard comes up from the bottom

Here my code:

      body: Container(
    margin: EdgeInsets.all(15.0),
    alignment: Alignment.centerLeft,
    child: Column(
      children: <Widget>[
        TextField(
          controller: _todoNameController,
          decoration: InputDecoration(labelText: 'Todoname'),
        ),
        Padding(padding: new EdgeInsets.all(5.0)),
        TextField(
          controller: _jobController,
          decoration: InputDecoration(labelText: 'Job'),
        ),
        Padding(padding: new EdgeInsets.all(5.0)),
        TextField(
          controller: _priorityController,
          decoration: InputDecoration(labelText: 'Priority'),
        ),
        Padding(padding: new EdgeInsets.all(5.0)),
        DropdownButton<String>(
          items: teamList.map((String value) {
            return new DropdownMenuItem<String>(
              value: value,
                child: Row(
                  children: <Widget>[
                    SizedBox(width: 10,),
                    Text(value),

                  ]
                )
            );
          }).toList(),

          hint: Text("Choose team"),
          value: selectedTeam,
          onChanged: (value) {
            setState(() {
              _teamController.text = value;
              selectedTeam = value;
            });
          },
        ),
        Padding(padding: new EdgeInsets.all(5.0)),
        TextField(
          controller: _noteController,
          decoration: InputDecoration(labelText: 'Note'),
        ),
        Padding(padding: new EdgeInsets.all(5.0)),
        Row(
          children: <Widget>[
            Expanded(
              // child: Text(
              //     db.formatMsIntoString(int.parse(_startingDateController.text)).substring(0, 10)),
              child: TextField(
                controller: _startingDateController,
                decoration: InputDecoration(labelText: 'Starting date'),
                enabled: false,
              ),
            ),
            Expanded(
              child: RaisedButton(
                onPressed: () => _selectStartingDate(context),
                child: Text(
                  'Select starting date',
                  style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                ),
                color: Colors.teal,
              ),
            ),
          ],
        ),

        Padding(padding: new EdgeInsets.all(5.0)),
        Row(
          children: <Widget>[
            Expanded(
              // child: Text(
              //     db.formatMsIntoString(int.parse(_startingDateController.text)).substring(0, 10)),
              child: TextField(
                controller: _endingDateController,
                decoration: InputDecoration(labelText: 'Ending date'),
                enabled: false,
              ),
            ),
            Expanded(
              child: RaisedButton(
                onPressed: () => _selectEndingDate(context),
                child: Text(
                  'Select ending date',
                  style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                ),
                color: Colors.teal,
              ),
            ),
          ],
        ),

        Padding(padding: new EdgeInsets.all(5.0)),
        RaisedButton(
            child: (widget.todo.id != null) ? Text('Update') : Text('Add'),
            onPressed: () {
              if (widget.todo.id != null) {
                db.updateTodo(Todo.fromMap({
                  'id': widget.todo.id,
                  'todoName': _todoNameController.text,
                  'job': _jobController.text,
                  'priority': _priorityController.text,
                  'team': _teamController.text,
                  'note': _noteController.text,
                  'startingDate': db.formatStringIntoMs(selectedStartingDate.toString()),
                  'endingDate': db.formatStringIntoMs(selectedEndingDate.toString()),

                })).then((_) {
                  Navigator.pop(context, 'update');
                });
              }else {
                db.saveTodo(Todo(_todoNameController.text,
                    _jobController.text,
                    _priorityController.text,
                    _teamController.text,
                    _noteController.text,
                    db.formatStringIntoMs(selectedStartingDate.toString()),
                    db.formatStringIntoMs(selectedEndingDate.toString()))).then((_) {
                  Navigator.pop(context, 'save');
                });
              }
            },
          ),
      ],
    ),
    ),

Solution

  • You have to scroll because it doesn't fit on the page. If you scroll the entire page, it should fix. With expanded, you don't have to wrap it around. Using expanded on scroll pages in the already regular code writing logic is a shout to the design. It may cause errors. exemplary:

       SingleChildScrollView(
             child:Column(
                  children:[
                       ....
                       ...