A RenderFlex overflowed by 45 pixels on the bottom?

Question

I have a problem with Flutter (Dart) RenderFlex overflowed pixels. An exception of rendering library.

When keyboard opens it shows thar message below here:

A RenderFlex overflowed by 45 enter image description here pixels on the bottom.

if you by any chance need the full log to help me is here:

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      child: Container(
        margin: EdgeInsets.all(10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            TextField(
              decoration: InputDecoration(labelText: 'Title'),
              controller: _titleController,
              onSubmitted: (_) => _submitData,
              // onChanged: (val) {
              //   titleInput = val;
              // },
            ),
            TextField(
              decoration: InputDecoration(labelText: 'Amount'),
              controller: _amountController,
              keyboardType: TextInputType.number,
              onSubmitted: (_) => _submitData,
              // onChanged: (val) => amountInput = val,
            ),
            Container(
              height: 70,
              child: Row(
                children: [
                  Expanded(
                    child: Text(_selectedDate == null
                        ? "No Date Choosen!"
                        : 'Picked Date: ${DateFormat.yMd().format(_selectedDate)}'),
                  ),
                  TextButton(
                      onPressed: _presentDatePicker,
                      child: Text(
                        'Choose the Date!',
                        style: TextStyle(
                            color: Theme.of(context).primaryColor,
                            fontWeight: FontWeight.bold),
                      ))
                ],
              ),
            ),
            ElevatedButton(
              onPressed: _submitData,
              // () {
              // print(titleInput);
              // print(amountInput);
              // print(titleController.text);
              // print(amountController.text);
              //   addTx(
              //       titleController.text, double.parse(amountController.text));
              // },
              child: Text(
                'Add Transaction',
                style: TextStyle(color: Colors.white),
              ),
              style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all(Colors.purple)),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

You can add SingleChildScrollView to Card widget. It will help to scroll your page and pixel error will be gone.

Answer 2

you can wrap card widget by SinglechildScrollView which will make it scrollable so give adequate size for keyboard and also in Scaffold you can make it

resizeToAvoidBottomInset: true,