How to fit showModalBottomSheet?

Question

I have an application, I added showModalBottomSheet to this application. It looks like this:

But there is one question. When I open the TextFormField with "Ürün fiyatı:" at the bottom, the screen looks like this:

As you can see the TextFormField is blocked and I can't see what I'm typing.

How can I solve this problem?

Since the codes are very long, I will only give the necessary parts. Codes:

showModalBottomSheet(
  isScrollControlled:true,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
      topRight: Radius.circular(10),
    ),
  ),
  context: context,
  builder: (context) {
    return FractionallySizedBox(
      heightFactor: 0.93,
      child: Container(
        padding: EdgeInsets.all(25),
        height: MediaQuery.of(context).size.height * 0.5,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            // ..photo..
            // ..other TextFormFields..
            SizedBox(height: 10,),
            Text("Ürün Fiyatı:", style: TextStyle(fontSize: 20)),
            SizedBox(height: 10),
            TextFormField(
              style: TextStyle(fontSize: 19),
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              initialValue: snapshot.data!.docs[index].data()["urunFiyati"].toString(),
              inputFormatters: <TextInputFormatter>[
                CurrencyTextInputFormatter(
                  locale: 'tr_TR',
                  decimalDigits: 2,
                  symbol: '₺',
                ),
              ],
              keyboardType: TextInputType.number,
              onChanged: (value) {
                setState(() {
                  fiyat = value;
                  print(fiyat);
                });
              },
            ),
            SizedBox(height: 10,),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width * 0.4,
                  child: ElevatedButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text("İptal", style: TextStyle(color: Colors.grey[100], fontSize: 19),),
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.grey),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18.0),
                          side: BorderSide(color: Colors.grey)
                        ),
                      ),
                    ),
                  ),
                ),
                Container(
                  width: MediaQuery.of(context).size.width * 0.4,
                  child: ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.green),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(18.0),
                          side: BorderSide(color: Colors.green)
                        ),
                      ),
                    ),
                    child: Text("Kaydet", style: TextStyle(color: Colors.white, fontSize: 19),),
                    onPressed: () {
                      FirebaseFirestore.instance.collection('bolatAktar').doc(snapshot.data!.docs[index].data()["urunAdi"]).update({
                        "urunAciklamasi": _urunAciklamasi.text,
                        "urunFiyati": _urunFiyati.format(fiyat.toString()),
                      });
                      Navigator.pop(context);
                    },
                  ),
                ),
              ],
            ),
          ]
        )
      ),
    );
  }
);

---

The error I got after doing what @Karunjith M said:

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPointerListener#7de63 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1982 pos 12: 'hasSize'

The relevant error-causing widget was
PersistentTabView
lib\bolatAktar_body.dart:67
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#0589f relayoutBoundary=up2

Answer 1

Wrap the fractionalySizedBox inside a SingleChildScrollView and give padding as shown below.

SingleChildScrollView(
              padding: EdgeInsets.only(
                  bottom: MediaQuery.of(context).viewInsets.bottom),
              child: FractionallySizedBox(//your code....