How to make scrollable box in flutter?

Admin 1
Viewed 502

I have a Card widget, which looks like:

enter image description here

But when the number in it gets bigger, it overflows the Card like so:

enter image description here

I tried to wrap the text-box in a SizedBox and gave it a height. Then, wrapped it in a SingleChildScrollView but it didn't help. How should I solve this?

The following is the code:

Card(
 child: Container(
  padding: const EdgeInsets.all(8.0),
  width: 300,
  height: 250,
  child: Column(
    children: <Widget>[
      const Text('Output', style: TextStyle(fontSize: 25)),
      const SizedBox(height: 10),
      getOutputRow('Answer'),
    ],
  ),
),

The helper methods:

  Text styledText(String data) {
    return Text(data, style: TextStyle(fontSize: 20));
  }

  Widget getOutputBox() {
    final themeData = Theme.of(context);
    final output = result == null ? '' : result.toString();

    return Container(
      width: 150,
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(border: Border.all(width: 1, color: themeData.primaryColor)),
      child: Text(output, style: TextStyle(fontSize: 16), textAlign: TextAlign.center),
    );
  }

  Row getOutputRow(String data) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        styledText(data),
        styledText('='),
        getOutputBox(),
      ],
    );
  }
flutter
3 Answers
SizedBox(
height : 400,
width : 400,
child : SingleChildScrollView(
   child : getOutputRow('Answer')
)
)
user_67989950

This will help

Expanded(
  child:SingleChildScrollView(
     child : getOutputRow('Answer')
  )
)
user_89666370

You have to change the Container() in your getOutputBox()

  • Put a SingleChildScrollView around your Text()
  • Algo give the Container a fixed height like: height: 150

Try this version

  Widget getOutputBox() {
    final themeData = Theme.of(context);
    final output = result == null ? '' : result.toString();

    return Container(
      width: 150,
      height: 150,
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
          border: Border.all(width: 1, 
          color: themeData.primaryColor)),
      child: SingleChildScrollView(
          child: Text(output,
              style: TextStyle(fontSize: 16), 
              textAlign: TextAlign.center)),
    );
  }
user_132222740
Related