I am having a bit of an issue with splitting the screen into 2 sections vertically then wrapping the whole page with a SingleChildScrollView. Without ConstrainedBox the columns won't be displayed, is there any other way of doing this?, Will there be any performace issues with using MediaQuery.of(context).size.height - AppBar().preferredSize.height for wrapping the both sections in a ConstrainedBox to expand to full screen's height?
body: RefreshIndicator(
onRefresh: () async{
print('testing');
},
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height -
AppBar().preferredSize.height), //----------> I want to avoid using BoxConstraints
child: Padding(
padding: const EdgeInsets.only(left: 24.0, right: 24.0, top: 24.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
// flex: 1,
child: Container(
color: Colors.amber,
// height: 20 * SizeConfig.heightMultiplier,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
// height: 100.0,
// width: 100.0,
child: Text('teacher_photo_album_flow.listing_title'.tr(),
style: CustomTextStyle.pageSectionTitle(context),),
),
SizedBox(
height: 2 * SizeConfig.heightMultiplier,
),
GestureDetector(
onTap: (){
},
child: Container(
child: Column(children: [
Container(
height: 25 * SizeConfig.heightMultiplier,
// width: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(this.photoAlbums1[0]['album_cover'],
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
),
),
),
SizedBox(
height: 1.5 * SizeConfig.heightMultiplier,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 4,
child:
Container(
alignment: Alignment.centerLeft,
child: Text(this.photoAlbums1[0]['title'],
style: CustomTextStyle.titleOnelineEllipses(context),),
),
),
Expanded(
// flex: 1,
child:
Container(
alignment: Alignment.centerRight,
child: Text(this.photoAlbums1[0]['newDate'],
style: CustomTextStyle.silentTextDate(context),),
)
,),
],
),
],),
)
),
SizedBox(
height: 3 * SizeConfig.heightMultiplier,
),
],
),
),
),
photoAlbums2.length > 0 ? Expanded(
// flex: 2,
child: Container(
child: Column(
children: [
Expanded(
// flex: 2,
child: GridView.builder(
shrinkWrap: true,
primary: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 1,
mainAxisSpacing: 1,
crossAxisCount: 2),
itemCount: this.photoAlbums2.length,
itemBuilder: (BuildContext ctx, i) {
return
GestureDetector(
onTap: (){
},
child: Container(
child: Column(children: [
Container(
height: 15 * SizeConfig.heightMultiplier,
// width: double.infinity,
width: double.infinity,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(this.photoAlbums2[i]['album_cover'],
fit: BoxFit.cover,
width: MediaQuery.of(context).size.width,
),
),
),
SizedBox(
height: 1.0 * SizeConfig.heightMultiplier,
),
Container(
alignment: Alignment.centerLeft,
child: Text(this.photoAlbums2[i]['title'],
style: CustomTextStyle.titleOnelineEllipses(context),),
),
SizedBox(
height: 0.5 * SizeConfig.heightMultiplier,
),
Container(
alignment: Alignment.centerLeft,
child: Text(this.photoAlbums2[i]['newDate'],
style: CustomTextStyle.silentTextDate(context),),
),
],),
)
);
}
),
),]
),
),
) : SizedBox(height: 0,)
],),
),
),
),
);
CodePudding user response：
I am using LayoutBuilder to get screen size.
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(builder: (context, constraints) {
return RefreshIndicator(
onRefresh: () async {},
child: CustomScrollView(slivers: [
SliverToBoxAdapter(
child: Container(
color: Colors.green,
width: constraints.maxWidth,
height: constraints.maxHeight * .3,// amount of height you want or the widget you like to include with `ConstrainedBox`
),
),
SliverGrid.count(
crossAxisCount: 2,
children: [
...List.generate(
11,
(index) => Container(
color: index % 3 == 0 ? Colors.amber : Colors.cyanAccent,
),
)
],
),
]));
}),
);
}
CodePudding user response：
try this
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
child: Padding(
padding: EdgeInsets.all(20),
child: Text(''),
),
color: Colors.red,
),
SizedBox(
height: 10,
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
color: Colors.yellow,
child : Padding(
padding: EdgeInsets.all(20),),
),
),
SizedBox(width : 10,),
Expanded(
child: Container(
color: Colors.yellow,
child : Padding(
padding: EdgeInsets.all(20),),
),
),
],
),
SizedBox(height : 10),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
color: Colors.yellow,
child : Padding(
padding: EdgeInsets.all(20),),
),
),
SizedBox(width : 10,),
Expanded(
child: Container(
color: Colors.yellow,
child : Padding(
padding: EdgeInsets.all(20),),
),
),
],
),
SizedBox(height : 10),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
color: Colors.yellow,
child : Padding(
padding: EdgeInsets.all(20),),
),
),
SizedBox(width : 10,),
Expanded(
child: Container(
color: Colors.yellow,
child : Padding(
padding: EdgeInsets.all(20),),
),
),
],
),
]),
)