CODEWITHSUNDEEP
flutterflutter-layout
Carter
Carter

Reputation: 179

Why am I getting an error when using flex on widgets inside of a SingleChildScrollView

I'm attempting to make some text in my app more responsive to size changes when using different phones. So I started with wrapping some Text Widgets in A flexible widget. This causes this error.

enter image description here

Obviously it's a sizing issue, I just can't seem to find a solution. Do I need to switch around how I build this?

This is the relevant code

return SingleChildScrollView(
        child: Flex(direction: Axis.vertical, children: [
      Column(children: [
        Padding(
          padding: EdgeInsets.only(top: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Funds',
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Flexible(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Text(
                  '\$${DATA}',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              ),
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Text(
                  '\$${DATA}',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              ),
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Text(
                  '\$${DATA}',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              ),
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Text(
                  '\$${DATA}',
                  style: TextStyle(
                      color: Colors.black, fontWeight: FontWeight.bold),
                ),
              )
            ],
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text(
                truncator('${DATA}', 2,
                    CutStrategy()),
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
            ),
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text(
                truncator('${DATA}', 2,
                    CutStrategy()),
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
            ),
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text(
                truncator('${DATA}', 2,
                    CutStrategy()),
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
              ),
            ),
            Flexible(
              flex: 1,
              fit: FlexFit.loose,
              child: Text(
                truncator('${DATA}', 2,
                    CutStrategy()),
                style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                    fontSize: 13),
              ),
            )
          ],
        ),
      ])
    ]));

Upvotes: 0

Views: 639

Answers (2)

Nuqo
Nuqo

Reputation: 4081

SingleChildScrollView & Column are both widgets that don't have any size constraints, and your children (Flexible) are widgets that give a child the flexibility to expand to fill the available space in the main axis (vertical in your case).

To avoid this error you have to give your SingleChildScrollView a height constraint. For example with a simple Container (I think in your case the Column is the culprit), try:

Container(
  height: MediaQuery.of(context).size.height, //for full screen height
  child: Column(
    //your code...
  )
)

Upvotes: 1

intraector
intraector

Reputation: 1446

You don't need to use Flex, Flexible or Expanded inside scrollable widget.

Upvotes: 1

Related Questions