Using Expanded Widget to solve render flex overflow errors
// for Flutter Inspector layout tools: visualizing render overflow solutions | |
// This example is adapted from | |
//https://github.com/InMatrix/flutter_error_studies/blob/master/lib/renderflex_overflow_error2.dart | |
import 'package:flutter/material.dart'; | |
class ColumnOverflow extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
home: Scaffold( | |
appBar: AppBar( | |
title: Text('RenderFlex OverFlow 2'), | |
), | |
body: Container( | |
child: new Row( | |
children: [ | |
new Padding( | |
padding: EdgeInsets.all(16.0), | |
child: Icon(Icons.message), | |
), | |
// Resolution: Wrap the Column below in an Expanded widget. | |
Expanded( | |
child: | |
new Column( | |
mainAxisSize: MainAxisSize.min, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: [ | |
Text("Title", style: Theme.of(context).textTheme.headline4), | |
Text ( | |
"This is the overflow issue in the sample app solved with an expanded widget." "Notice how the code and content have changed?" " Can you tell the difference between the two types of flex widgets?" "Expanded and or flexible? what do you choose? why?"), | |
], | |
), | |
), | |
], | |
), | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment