Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Overflow Solution: Using CustomMultiChild Layout to Resolve RenderOverflow Errors
// for Flutter Inspector layout tools: visualizing render overflow solutions
// This example is adapted from SO "How to use CustomMultiChildLayout & CustomSingleChildLayout in Flutter"
import 'package:flutter/material.dart';
void main() {
class ColumnOverflow extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
home: MultiChildDemo(title: 'CustomMultiChild Layout'),
// CustomMultiChildLayout Solution for Text Render Overflow Issues
class MultiChildDemo extends StatefulWidget {
MultiChildDemo({Key key, this.title}) : super(key: key);
final String title;
_MultiChildDemoState createState() => _MultiChildDemoState();
class _MultiChildDemoState extends State<MultiChildDemo> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
body: Container(
child: CustomMultiChildLayout(
delegate: YourLayoutDelegate(),
children: <Widget>[
// Left Layout Side.
// (child 1) The id can be any Object or any enum value.
id: 'icon_channel',
child: Card(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Icon(Icons.message),
// Right Layout Side.
// (child2) This is the area where the text is overflowing in the sample app.
//To deal with overflow issues, use this id for laying out your children.
id: 'overflow_area',
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Title", style: Theme.of(context).textTheme.headline4),
"This is the primary widget with the layout issue."
"The goal here is to make the widget have the text block have multilines cascading down the page , not just a single line. This shows how to deal with a large chunk of text."
" this is Widget Two. widget two. Widget Two. This is the primary widget."
"The goal here is to make the widget the prominent widget, not widget one, and no text running off the screen. "
"Widget Two. This is for showing proof of overflow text rendering the primary widget",
maxLines: 10,
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.grey[800],
fontWeight: FontWeight.bold,
fontSize: 14.0),
class YourLayoutDelegate extends MultiChildLayoutDelegate {
// You can pass parameters to this class because you will instantiate your delegate
// in the build function where you place your CustomMultiChildLayout.
// Note: using an Offset for this example.
final Offset position;
// `size` is the size of the `CustomMultiChildLayout` itself.
void performLayout(Size size) {
// If there is no widget with id `icon_channel`, the size will remain at zero.
Size leadingSize =;
if (hasChild('icon_channel')) {
leadingSize = layoutChild(
'icon_channel', // child 1.
// Tight means the child cannot be bigger than the whole layout.
BoxConstraints.tightFor(height: size.height),
// No need to position this to have it at Offset(0, 0).
//This resolves the render overflow error using the box constraints and again, using tight for the flex factor.
if (hasChild('overflow_area')) {
final secondSize = layoutChild(
BoxConstraints.tightFor(width: size.width / 2),
'overflow_area', // child 2.
// This will place 'overflow_area' (child 2) to the right of 'icon_channel' (child 1).
// Centers the 'overflow_area' (child 2) vertically.
size.height / 2 - secondSize.height / 2,
bool shouldRelayout(YourLayoutDelegate oldDelegate) {
return oldDelegate.position != position;

This comment has been minimized.

Copy link
Owner Author

@raison00 raison00 commented Apr 22, 2020

Updated to maintain content consistency of the example solution options for dealing with an overflow error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment