I've been trying to transplant some code from this flutter project into into this boilerplate sample and am running into some pixel overflow issues that I can't seem to fix.
This is the error thrown in the VSCode debug console;
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performLayout():
flutter: 'package:flutter/src/rendering/object.dart': Failed assertion: line 1514 pos 12:
flutter: '!_debugDoingThisLayout': is not true.
And this is the code I'm using the stimulate the error;
home_page.dart
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:cryptick_nice_ui/data/crypto_data.dart';
import 'package:cryptick_nice_ui/modules/crypto_presenter.dart';
import 'background.dart';
import 'package:cryptick_nice_ui/dependency_injection.dart';
void main() async {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
theme: new ThemeData(
primarySwatch: Colors.pink,
primaryColor: defaultTargetPlatform == TargetPlatform.iOS
? Colors.grey[100]
: null),
debugShowCheckedModeBanner: false,
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> implements CryptoListViewContract {
CryptoListPresenter _presenter;
List<Crypto> _currencies;
bool _isLoading;
final List<MaterialColor> _colors = [Colors.blue, Colors.indigo, Colors.red];
_HomePageState() {
_presenter = new CryptoListPresenter(this);
}
@override
void initState() {
super.initState();
_isLoading = true;
_presenter.loadCurrencies();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(".",
style: new TextStyle(
fontFamily: 'PlayfairDisplay',
letterSpacing: 0.8,
color: const Color(0xFF273A48),
)
),
backgroundColor: const Color(0xFF273A48),
elevation: 0.0,
),
body: _isLoading
? new Center(
child: new CircularProgressIndicator(),
)
: _cryptoWidget()
);
}
Widget _cryptoWidget() {
final _width1 = MediaQuery.of(context).size.width;
final _height1 = MediaQuery.of(context).size.height;
return new Container(
decoration: new BoxDecoration(
color: const Color(0xFF273A48),
),
child: new Column(
children: <Widget>[
new CustomPaint(
size: new Size(_width1, _height1),
painter: new Background(),
),
new Flexible(
child: new ListView.builder(
itemCount: _currencies.length,
itemBuilder: (BuildContext context, int index) {
final int i = index ~/ 2;
final Crypto currency = _currencies[i];
final MaterialColor color = _colors[i % _colors.length];
if (index.isOdd) {
return new Divider();
}
return _getListItemUi(context, currency, color);
},
),
)
],
)
);
}
Widget _getListItemUi(BuildContext context, Crypto currency, MaterialColor color) {
final _width2 = MediaQuery.of(context).size.width;
final _height2 = MediaQuery.of(context).size.height;
_presenter.loadCurrencies();
final headerList = new ListView.builder(
itemBuilder: (context, index) {
EdgeInsets padding = index == 0?const EdgeInsets.only(
left: 20.0, right: 10.0, top: 4.0, bottom: 30.0):const EdgeInsets.only(
left: 10.0, right: 10.0, top: 4.0, bottom: 30.0);
return new Padding(
padding: padding,
child: new InkWell(
onTap: () {
print('Card selected');
},
child: new Container(
decoration: new BoxDecoration(
borderRadius: new BorderRadius.circular(10.0),
color: Colors.lightGreen,
boxShadow: [
new BoxShadow(
color: Colors.black.withAlpha(70),
offset: const Offset(3.0, 10.0),
blurRadius: 15.0)
],
image: new DecorationImage(
image: new ExactAssetImage(
''),
fit: BoxFit.fitHeight,
),
),
// height: 200.0,
width: 200.0,
child: new Stack(
children: <Widget>[
new Align(
alignment: Alignment.bottomCenter,
child: new Container(
decoration: new BoxDecoration(
color: const Color(0xFF273A48),
borderRadius: new BorderRadius.only(
bottomLeft: new Radius.circular(10.0),
bottomRight: new Radius.circular(10.0))),
height: 30.0,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'hi',
style: new TextStyle(color: Colors.white),
)
],
)),
)
],
),
),
),
);
},
scrollDirection: Axis.horizontal,
itemCount: _currencies.length,
);
final body = new Scaffold(
appBar: new AppBar(
title: new Text('cryp'),
elevation: 0.0,
backgroundColor: Colors.transparent,
actions: <Widget>[
new IconButton(icon: new Icon(Icons.shopping_cart, color: Colors.white,), onPressed: (){})
],
),
backgroundColor: Colors.transparent,
body: new Container(
child: new Stack(
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: 10.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Align(
alignment: Alignment.centerLeft,
child: new Padding(
padding: new EdgeInsets.only(left: 8.0),
child: new Text(
'Trending News',
style: new TextStyle(
color: Colors.white70,
fontSize: 15.0,
),
)),
),
new Container(
height: 300.0, width: _width2, child: headerList),
new Expanded(child:
ListView.builder(itemBuilder: (context, index) {
return new ListTile(
title: new Column(
children: <Widget>[
new Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
height: 72.0,
width: 72.0,
decoration: new BoxDecoration(
color: Colors.lightGreen,
boxShadow: [
new BoxShadow(
color:
Colors.black.withAlpha(70),
offset: const Offset(2.0, 2.0),
blurRadius: 2.0)
],
borderRadius: new BorderRadius.all(
new Radius.circular(12.0)),
image: new DecorationImage(
image: new ExactAssetImage(
"cryptoiconsBlack/"+currency.symbol.toLowerCase()+"@2x.png",
),
fit: BoxFit.cover,
)),
),
new SizedBox(
width: 8.0,
),
new Expanded(
child: new Column(
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
new Text(
'My item header',
style: new TextStyle(
fontSize: 14.0,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
new Text(
'Item Subheader goes here\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry',
style: new TextStyle(
fontSize: 12.0,
color: Colors.black54,
fontWeight: FontWeight.normal),
)
],
)),
new Icon(
Icons.shopping_cart,
color: const Color(0xFF273A48),
)
],
),
new Divider(),
],
),
);
}))
],
),
),
],
),
),
);
return new Container(
decoration: new BoxDecoration(
color: const Color(0xFF273A48),
),
child: new Stack(
children: <Widget>[
new CustomPaint(
size: new Size(_width2, _height2),
painter: new Background(),
),
body,
],
),
);
}
Widget _getSubtitleText(String priceUSD, String percentageChange) {
TextSpan priceTextWidget = new TextSpan(
text: "\$$priceUSD\n", style: new TextStyle(color: Colors.black));
String percentageChangeText = "1 hour: $percentageChange%";
TextSpan percentageChangeTextWidget;
if (double.parse(percentageChange) > 0) {
percentageChangeTextWidget = new TextSpan(
text: percentageChangeText,
style: new TextStyle(color: Colors.green));
} else {
percentageChangeTextWidget = new TextSpan(
text: percentageChangeText, style: new TextStyle(color: Colors.red));
}
return new RichText(
text: new TextSpan(
children: [priceTextWidget, percentageChangeTextWidget]));
}
@override
void onLoadCryptoComplete(List<Crypto> items) {
// TODO: implement onLoadCryptoComplete
setState(() {
_currencies = items;
_isLoading = false;
});
}
@override
void onLoadCryptoError() {
// TODO: implement onLoadCryptoError
}
}
And this is the background.dart
file I'm using to create a grey/white pallet.
import 'package:flutter/material.dart';
class Background extends CustomPainter{
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
_drawPentagone(canvas, size);
}
_drawPentagone(Canvas canvas, Size size){
var path = new Path();
path.addPolygon([
new Offset(size.width, size.height/5),
new Offset(size.width, size.height),
new Offset(0.0, size.height),
new Offset(0.0, size.height/2.5),
], true);
path.close();
canvas.drawPath(path, new Paint()..color = Colors.white);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
This is what I get in simulator, at the bottom it says BOTTOM OVERFLOWED BY 100 PIXELS
The problem is that you are making your background widget as large as the screen:
final _width1 = MediaQuery.of(context).size.width;
final _height1 = MediaQuery.of(context).size.height;
// ...
new CustomPaint(
size: new Size(_width1, _height1),
painter: new Background(),
),
The AppBar
at the top probably takes 100 pixels of space, and _cryptoWidget()
is only uses the space below the AppBar
-
You don't need MediaQuery
to create a screen-filling widget, just use a Container
without any dimensions.
it's also strange that your background widget is wrapped in a Column
with another Flexible
below. If the background is screen-filling, how would the Flexible
fit below?
Are you trying to create a scrollable view? Or do you want to draw the background widget behind the content?
Use this code and inside Scaffold whatever you want can add
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return new Container(
child: new Stack(
children: <Widget>[
new CustomPaint(
painter: new Background(),
size: new Size(width, height),
),
new Scaffold(
appBar: new AppBar(
title: new Text("Custom Background"),
backgroundColor: Colors.transparent,
),
backgroundColor: Colors.transparent,
body: new Center(
child: new Text("Hello how are You? :)"),
))
],
),
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.