RenderFlex overflowed

2,774 views

Skip to first unread message

Kamran Ali

unread,

Mar 17, 2019, 6:33:02 AM3/17/19

to Flutter Dev

After tapping text field i got the following error:

I/flutter (31901): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════

I/flutter (31901): The following message was thrown during layout:

I/flutter (31901): A RenderFlex overflowed by 278 pixels on the bottom.

I/flutter (31901):

I/flutter (31901): The overflowing RenderFlex has an orientation of Axis.vertical.

I/flutter (31901): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and

I/flutter (31901): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

I/flutter (31901): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the

I/flutter (31901): RenderFlex to fit within the available space instead of being sized to their natural size.

I/flutter (31901): This is considered an error condition because it indicates that there is content that cannot be

I/flutter (31901): seen. If the content is legitimately bigger than the available space, consider clipping it with a

I/flutter (31901): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,

I/flutter (31901): like a ListView.

I/flutter (31901): The specific RenderFlex in question is:

I/flutter (31901): RenderFlex#44beb relayoutBoundary=up2 OVERFLOWING

I/flutter (31901): creator: Column ← Stack ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←

I/flutter (31901): AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#258a6 ink

I/flutter (31901): renderer] ← NotificationListener<LayoutChangedNotification> ← PhysicalModel ←

I/flutter (31901): AnimatedPhysicalModel ← ⋯

I/flutter (31901): parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)

I/flutter (31901): constraints: BoxConstraints(0.0<=w<=360.0, 0.0<=h<=394.5)

I/flutter (31901): size: Size(360.0, 394.5)

I/flutter (31901): direction: vertical

I/flutter (31901): mainAxisAlignment: start

I/flutter (31901): mainAxisSize: max

I/flutter (31901): crossAxisAlignment: center

I/flutter (31901): verticalDirection: down

I/flutter (31901): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤

Following is my main.dart file

import 'package:e_voting_cricket/widgets/gradient_button.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'E-Voting Cricket',
      theme: ThemeData(
          primaryColor: Colors.green, accentColor: Colors.greenAccent),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.height * .50,
                color: Colors.green,
              ),
              Container(
                height: MediaQuery.of(context).size.height * .50,
                color: Colors.white,
              )
            ],
          ),
          SingleChildScrollView(
            child: Container(
              alignment: Alignment.topCenter,
              padding: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height * .35,
                  right: 20.0,
                  left: 20.0),
            //   child: Container(
            //     height: 350.0,
            //     width: MediaQuery.of(context).size.width,
                child: Card(
                  color: Colors.white,
                  elevation: 4.0,
                  child: Padding(
                    padding: EdgeInsets.all(18),
                    child: Form(
                      child: Column(
                        children: <Widget>[
                          SizedBox(
                            height: 10,
                          ),
                          Text(
                            "Login",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                fontSize: 25, fontWeight: FontWeight.bold),
                          ),
                          TextField(
                            style: TextStyle(fontSize: 15, color: Colors.black),
                            decoration: InputDecoration(
                                labelText: "Phone No.",
                                filled: true,
                                fillColor: Colors.white),
                          ),
                          TextField(
                            style: TextStyle(fontSize: 15, color: Colors.black),
                            decoration: InputDecoration(
                                labelText: "User Name",
                                filled: true,
                                fillColor: Colors.white),
                          ),
                          SizedBox(
                            height: 20,
                          ),
                          GradientButton(
                            text: "Login",
                            onPressed: () {},
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            //),
          )
        ],
      ),
    );
  }
}

Steven McDowall

unread,

Mar 17, 2019, 6:52:52 AM3/17/19

to Kamran Ali, Flutter Dev

Very common beginner problem .. hard to figure out exactly how to solve because it's based on your layout .. which is bigger than the screen ..

However, many times using a SingleChildScrollView as a high level "parent" does the trick ..

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply all

Reply to author

Forward

0 new messages