I got error debugging my flutter application on android.
The error is : A RenderFlex overflowed by 33 pixels on the bottom.
Looks like my virtual Android device screen cannot handle Container or Expanded Widget? I am not sure though.
Here's my code:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'dart:math';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() => runApp(
MaterialApp(home: BallPage()),
);
class BallPage extends StatefulWidget {
@override
_BallPageState createState() => _BallPageState();
}
class _BallPageState extends State<BallPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
drawer: new Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Stack(children: <Widget>[
Positioned(
bottom: 12.0,
left: 16.0,
child: Text("My Magic Numbers",
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w500))),
]),
decoration: BoxDecoration(
color: Colors.black,
),
),
ListTile(
leading: Icon(Icons.center_focus_strong),
title: Text('QR Scan'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
},
),
ListTile(
leading: Icon(Icons.map),
title: Text('Winners Map'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => GMapRoute()));
},
)
],
),
),
appBar: AppBar(
title: Text('Magic 6 balls'),
backgroundColor: Colors.black,
actions: <Widget>[
/*new IconButton(
icon: new Icon(MdiIcons.squareInc),
color: Colors.white,
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
},
), */
],
),
body: Number()
);
}
}
class GMapRoute extends StatefulWidget {
@override
State<GMapRoute> createState() => GMapRouteState();
}
class GMapRouteState extends State<GMapRoute> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
leading: new IconButton(
icon: new Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
title: Text('Winners Map'),
backgroundColor: Colors.black,
),
body: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng(40.688841, -74.044015),
zoom: 11,
),
),
),
);
}
}
class SecondRoute extends StatefulWidget {
@override
_SecondRouteState createState() {
return new _SecondRouteState();
}
}
class _SecondRouteState extends State<SecondRoute> {
String result = "Hey there!";
Future _scanQR() async {
try {
String qrResult = await BarcodeScanner.scan();
setState(() {
result = qrResult;
});
} on PlatformException catch (ex) {
if (ex.code == BarcodeScanner.CameraAccessDenied) {
setState(() {
result = "Camera permission was denied";
});
} else {
setState(() {
result = "Unknown Error $ex";
});
}
} on FormatException {
setState(() {
result = "You pressed the black button before scanning anything";
});
} catch (ex) {
setState(() {
result = "Unknown Error $ex";
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: new IconButton(
icon: new Icon(Icons.arrow_back, color: Colors.white),
onPressed: () => Navigator.of(context).pop(),
),
title: Text('QR Code Scan'),
),
body: Center(
child: Text(
result,
style: new TextStyle(fontSize: 20.0),
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _scanQR,
label: Text('Scan'),
icon: Icon(Icons.camera_alt),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
class Number extends StatefulWidget {
@override
_NumberState createState() => _NumberState();
}
class _NumberState extends State<Number> {
List<List<int>> items= [
// [1+ Random().nextInt(49), 1 + Random().nextInt(49), 1, 1, 1, 1]
];
String generateString() {
var items = List.generate(50, (index) => index + 1)..shuffle();
return items.take(6).join(' ');
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: new Column(
children: <Widget>[
Expanded(
flex: 1,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Container(
padding: const EdgeInsets.only(top: 150.0),
child: new Text(
'Winners Number',
style: new TextStyle(
fontSize: 20.0,
),
),
),
],
),
),
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
height: 60,
width: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(height: 10.0),
Container(
height: 60,
width: 60,
child: Center(
child: Text(
'${items[index][0]}',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center(
child: Text(
'${items[index][1]}',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center(
child: Text(
'${items[index][2]}',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center(
child: Text(
'${items[index][3]}',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center(
child: Text(
'${items[index][4]}',
style: TextStyle(
fontSize: 20.0,
),
),
),
decoration: BoxDecoration(
color: Colors.yellow,
shape: BoxShape.circle,
),
),
Container(
height: 60,
width: 60,
child: Center(
child: Text(
'${items[index][5]}',
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
),
decoration: BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
),
),
SizedBox(height: 10.0),
],
),
);
}),
),
),
Expanded(
flex: 1,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.only(bottom: 130.0),
child: RaisedButton.icon(
icon: Icon(Icons.add),
label: Text('Add Rows'),
onPressed: () {
setState(() {
if (items.length < 6) {
items.add([
1 + Random().nextInt(49),
1 + Random().nextInt(49),
1 + Random().nextInt(49),
1 + Random().nextInt(49),
1 + Random().nextInt(49),
1 + Random().nextInt(49)
]);
// print(items[0]);
}
});
},
),
),
SizedBox(width: 10.0),
Container(
padding: EdgeInsets.only(bottom: 130.0),
child: RaisedButton.icon(
icon: Icon(Icons.remove),
label: Text('Remove Rows'),
onPressed: () {
setState(() {
items.removeLast();
});
},
),
),
],
),
),
],
),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
setState(() {
// items.forEach((x) {
// x = [
// 1 + Random().nextInt(49),
// 1 + Random().nextInt(49),
// 1 + Random().nextInt(49),
// 1 + Random().nextInt(49),
// 1 + Random().nextInt(49),
// 1 + Random().nextInt(49)
// ];
// print(x);
// });
//
if (items.length == 1 ) {
items[0] = List.generate(50, (index) => index + 1)..shuffle();
} else if (items.length == 2) {
items[0] = List.generate(50, (index) => index + 1)..shuffle();
items[1] = List.generate(50, (index) => index + 1)..shuffle();
} else if (items.length == 3) {
items[0] = List.generate(50, (index) => index + 1)..shuffle();
items[1] = List.generate(50, (index) => index + 1)..shuffle();
items[2] = List.generate(50, (index) => index + 1)..shuffle();
} else if (items.length == 4) {
items[0] = List.generate(50, (index) => index + 1)..shuffle();
items[1] = List.generate(50, (index) => index + 1)..shuffle();
items[2] = List.generate(50, (index) => index + 1)..shuffle();
items[3] = List.generate(50, (index) => index + 1)..shuffle();
} else if (items.length == 5) {
items[0] = List.generate(50, (index) => index + 1)..shuffle();
items[1] = List.generate(50, (index) => index + 1)..shuffle();
items[2] = List.generate(50, (index) => index + 1)..shuffle();
items[3] = List.generate(50, (index) => index + 1)..shuffle();
items[4] = List.generate(50, (index) => index + 1)..shuffle();
} else {
items[0] = List.generate(50, (index) => index + 1)..shuffle();
items[1] = List.generate(50, (index) => index + 1)..shuffle();
items[2] = List.generate(50, (index) => index + 1)..shuffle();
items[3] = List.generate(50, (index) => index + 1)..shuffle();
items[4] = List.generate(50, (index) => index + 1)..shuffle();
items[5] = List.generate(50, (index) => index + 1)..shuffle();
}
});
},
label: Text('Click Here!'),
icon: Icon(Icons.loop),
backgroundColor: Colors.black,
),
);
}
}
And this is the error from the console:
I/flutter (23120): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (23120): The following assertion was thrown during layout:
I/flutter (23120): A RenderFlex overflowed by 33 pixels on the bottom.
I/flutter (23120):
I/flutter (23120): The relevant error-causing widget was:
I/flutter (23120): Column file:///Users/minkyeong/AndroidStudioProjects/magic-8-ball-flutter/lib/main.dart:198:24
I/flutter (23120):
I/flutter (23120): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (23120): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (23120): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter (23120): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter (23120): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter (23120): This is considered an error condition because it indicates that there is content that cannot be
I/flutter (23120): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter (23120): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter (23120): like a ListView.
I/flutter (23120): The specific RenderFlex in question is: RenderFlex#0f551 relayoutBoundary=up6 OVERFLOWING:
I/flutter (23120): creator: Column ← Expanded ← Column ← Center ← _BodyBuilder ← MediaQuery ←
I/flutter (23120): LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ←
I/flutter (23120): AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#fea7c ink renderer] ← ⋯
I/flutter (23120): parentData: offset=Offset(105.5, 0.0); flex=1; fit=FlexFit.tight (can use size)
I/flutter (23120): constraints: BoxConstraints(0.0<=w<=360.0, h=140.0)
I/flutter (23120): size: Size(149.0, 140.0)
I/flutter (23120): direction: vertical
I/flutter (23120): mainAxisAlignment: start
I/flutter (23120): mainAxisSize: max
I/flutter (23120): crossAxisAlignment: center
I/flutter (23120): verticalDirection: down
I/flutter (23120): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter (23120): ════════════════════════════════════════════════════════════════════════════════════════════════════
Can anyone fix this error? I have no idea why only Android gets the error while IOS device does not.
