using WaterfallFlow with expanded and False shrinkWrap
Closed this issue · 3 comments
pishguy commented
in this code i get visible error and how can i have WaterfallFlow into ListView?
The getter 'visible' was called on null.
Receiver: null
Tried calling: visible
class SampleCode extends StatelessWidget {
List<Color> colors = <Color>[];
@override
Widget build(BuildContext context) {
final double screenWidthSize = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: const Text('RandomSized'),
),
body: ListView(
children: <Widget>[
Container(
height: 100.0,
child: Text('TEST'),
),
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints){
int _crossAxisCount = 0;
if (screenWidthSize > 720) {
_crossAxisCount = 3;
} else if (screenWidthSize > 520) {
_crossAxisCount = 2;
} else {
_crossAxisCount = 1;
}
return Expanded(
child: WaterfallFlow.builder(
padding: const EdgeInsets.all(5.0),
shrinkWrap: false,
gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
crossAxisCount: _crossAxisCount,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemBuilder: (BuildContext c, int index) {
final Color color = getRandomColor(index);
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
color: getRandomColor(index)),
alignment: Alignment.center,
child: Text(
'$index ' + 'TestString' * 10 * (index % 3 + 1),
style: TextStyle(
color: color.computeLuminance() < 0.5
? Colors.white
: Colors.black),
),
//height: ((index % 3) + 1) * 100.0,
);
},
itemCount: 22,
),
);
}
)
],
),
);
}
Color getRandomColor(int index) {
if (index >= colors.length) {
colors.add(Color.fromARGB(255, Random.secure().nextInt(255),
Random.secure().nextInt(255), Random.secure().nextInt(255)));
}
return colors[index];
}
}
lifelikejuly commented
in this code i get
visibleerror and how can i haveWaterfallFlowintoListView?The getter 'visible' was called on null.
Receiver: null
Tried calling: visibleclass SampleCode extends StatelessWidget { List<Color> colors = <Color>[]; @override Widget build(BuildContext context) { final double screenWidthSize = MediaQuery.of(context).size.width; return Scaffold( appBar: AppBar( title: const Text('RandomSized'), ), body: ListView( children: <Widget>[ Container( height: 100.0, child: Text('TEST'), ), LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints){ int _crossAxisCount = 0; if (screenWidthSize > 720) { _crossAxisCount = 3; } else if (screenWidthSize > 520) { _crossAxisCount = 2; } else { _crossAxisCount = 1; } return Expanded( child: WaterfallFlow.builder( padding: const EdgeInsets.all(5.0), shrinkWrap: false, gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount( crossAxisCount: _crossAxisCount, crossAxisSpacing: 4, mainAxisSpacing: 4, ), itemBuilder: (BuildContext c, int index) { final Color color = getRandomColor(index); return Container( decoration: BoxDecoration( border: Border.all(color: Colors.black), color: getRandomColor(index)), alignment: Alignment.center, child: Text( '$index ' + 'TestString' * 10 * (index % 3 + 1), style: TextStyle( color: color.computeLuminance() < 0.5 ? Colors.white : Colors.black), ), //height: ((index % 3) + 1) * 100.0, ); }, itemCount: 22, ), ); } ) ], ), ); } Color getRandomColor(int index) { if (index >= colors.length) { colors.add(Color.fromARGB(255, Random.secure().nextInt(255), Random.secure().nextInt(255), Random.secure().nextInt(255))); } return colors[index]; } }
Maybe use screenHeightSize can calculation WaterfallFlow height, it not very well to solve the problem.
final double screenWidthSize = MediaQuery.of(context).size.width;
final double screenHeightSize = MediaQuery.of(context).size.height;
int _crossAxisCount = 0;
if (screenWidthSize > 720) {
_crossAxisCount = 3;
} else if (screenWidthSize > 520) {
_crossAxisCount = 2;
} else {
_crossAxisCount = 1;
}
return ListView(
children: [
Container(
height: 100.0,
child: Text('TEST'),
),
Container(
height: screenHeightSize - 100.0,
child: WaterfallFlow.builder(
shrinkWrap: false,
padding: EdgeInsets.all(5.0),
gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
crossAxisCount: _crossAxisCount,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
itemBuilder: (BuildContext c, int index) {
final Color color = getRandomColor(index);
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
color: getRandomColor(index)),
alignment: Alignment.center,
child: Text(
'$index ' + 'TestString' * 10 * (index % 3 + 1),
style: TextStyle(
color: color.computeLuminance() < 0.5
? Colors.white
: Colors.black),
),
//height: ((index % 3) + 1) * 100.0,
);
},
itemCount: 22,
),
),
],
);Or you can try this Layout.It's no widget error.
final double screenWidthSize = MediaQuery.of(context).size.width;
final double screenHeightSize = MediaQuery.of(context).size.height;
int _crossAxisCount = 0;
if (screenWidthSize > 720) {
_crossAxisCount = 3;
} else if (screenWidthSize > 520) {
_crossAxisCount = 2;
} else {
_crossAxisCount = 1;
}
return CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: 100.0,
child: Text('TEST'),
),
),
SliverPadding(
padding: EdgeInsets.all(5.0),
sliver: SliverWaterfallFlow(
gridDelegate: SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
crossAxisCount: _crossAxisCount,
crossAxisSpacing: 4,
mainAxisSpacing: 4,
),
delegate: SliverChildBuilderDelegate(
(BuildContext c, int index) {
final Color color = getRandomColor(index);
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
color: getRandomColor(index)),
alignment: Alignment.center,
child: Text(
'$index ' + 'TestString' * 10 * (index % 3 + 1),
style: TextStyle(
color: color.computeLuminance() < 0.5
? Colors.white
: Colors.black),
),
//height: ((index % 3) + 1) * 100.0,
);
},
childCount: 22,
),
),
),
],
);zmtzawqlp commented
shrinkWrap : true is not good solution. what i alway want to know is that what do you want? maybe you have a wrong way to implement the layout. I can't provide any suggestion before i know your purpose.
pishguy commented
@zmtzawqlp thanks