Skip to content

Instantly share code, notes, and snippets.

@raison00
Last active April 22, 2020 01:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raison00/27f6302019514b0c5f8150f9fdfa6a88 to your computer and use it in GitHub Desktop.
Save raison00/27f6302019514b0c5f8150f9fdfa6a88 to your computer and use it in GitHub Desktop.
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