A RenderFlex overflowed by 103 pixels on the bottom

Question

════════ Exception caught by rendering library ═════════════════════════════════ A RenderFlex overflowed by 103 pixels on the bottom. The relevant error-causing widget was Column lib\…\words\add.dart:61

what should I change in my code? Is there any way to do it? In case you want to see the code please let me know I will update more

import 'package:flutter/material.dart';
import 'package:quiz2/const/const.dart';
import 'package:quiz2/database/firebase.dart';
import 'package:quiz2/widgets/widgets.dart';

class AddQuestion extends StatefulWidget {

  final String quizId;
  AddQuestion(this.quizId);

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

class _AddQuestionState extends State<AddQuestion> {

  final _formKey = GlobalKey<FormState>();
  String question, option1, option2, option3, option4;
  bool _isLoading = false;
  DatabaseService databaseService = new DatabaseService();

  uploadQuestionData() {
    if(_formKey.currentState.validate()) {

      setState(() {
        _isLoading = true;
      });
      Map<String, String> questionMap = {
        "question" : question,
        "option1" : option1,
        "option2" : option2,
        "option3" : option3,
        "option4" : option4,
      };
         databaseService.addQuestionData(questionMap, widget.quizId).then((value) {
            setState(() {
              _isLoading = false;
            });
         });
      }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
         title: Text("Додати запитання")
      ),
      body: _isLoading ? Container(
        child: Center(child: CircularProgressIndicator(),),
      ) : Form(
        key: _formKey,
        child: Container(
          decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/images/word.jpg'),
                      fit: BoxFit.cover,
                    ),
                  ),
          padding: EdgeInsets.symmetric(horizontal: 24),
          child: Column(
            children: [
              SizedBox(
                height: 20,
              ),
              TextFormField(
                validator: (val) =>
                val.isEmpty ? "Введіть запитання" : null,
                decoration: kTextFieldDecoration.copyWith(
                  hintText: "Запитання",
                  prefixIcon: Icon(Icons.question_answer,
                                      color: Colors.white, size: 30)
                ),
                onChanged: (val) {
                  question = val;
                },
              ),
              SizedBox(
                height: 6,
              ),
              TextFormField(
                validator: (val) =>
                val.isEmpty ? "Option1" : null,
                decoration: kTextFieldDecoration.copyWith(
                  hintText: "Варіант 1 (правильна відповідь)",
                  prefixIcon: Icon(Icons.done,
                                      color: Colors.white, size: 30)
                ),
                onChanged: (val) {
                  option1 = val;
                },
              ),
              SizedBox(
                height: 6,
              ),
              TextFormField(
                validator: (val) =>
                val.isEmpty ? "Option2" : null,
                decoration: kTextFieldDecoration.copyWith(
                  hintText: "Варіант 2",
                  prefixIcon: Icon(Icons.backspace_sharp,
                                      color: Colors.white, size: 30)
                ),
                onChanged: (val) {
                  option2 = val;
                },
              ),
              SizedBox(
                height: 6,
              ),
              TextFormField(
                validator: (val) =>
                val.isEmpty ? "Option3" : null,
                decoration: kTextFieldDecoration.copyWith(
                  hintText: "Варіант 3",
                  prefixIcon: Icon(Icons.backspace_sharp,
                                      color: Colors.white, size: 30)
                ),
                onChanged: (val) {
                  option3 = val;
                },
              ),
              SizedBox(
                height: 6,
              ),
              TextFormField(
                validator: (val) =>
                val.isEmpty ? "Option4" : null,
                decoration: kTextFieldDecoration.copyWith(
                  hintText: "Варіант 4",
                  prefixIcon: Icon(Icons.backspace_sharp,
                                      color: Colors.white, size: 30)
                ),
                onChanged: (val) {
                  option4 = val;
                },
              ),
              Spacer(),
              Row(
                children: [
                  GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                      child: blueButton(context: context, label: "Готово", buttonWidth: MediaQuery.of(context).size.width/2 - 36)),
                  SizedBox(width: 24,),
                  GestureDetector(
                      onTap: () {
                        uploadQuestionData();
                      },
                      child: blueButton(context: context, label: "Додати ще", buttonWidth: MediaQuery.of(context).size.width/2 - 36)),
                ],
              ),
              SizedBox(height: 60,),
            ],
          ),
        ),
      )
    );
  }
}

what should I change in my code? Is there any way to do it? In case you want to see the code please let me know I will update more

Answer 1

Wrap the Form widget with a SingleChildScrollView

This error happens when the content of a Widget is larger than its parent's size.