I'm pretty new to Flutter and I can't seem to solve this issue.
I want to display a ListView of my custom card-like Ink containers and have pretty much achieved it. However, the ListView extends behind my Text widget (the previous item in the column) when I scroll down:
Expanded widget behind text widget
Look behind the "Gallery" text when scrolling: Animated GIF showing undesired behavior
I would like my ListView widget to scroll without the containers displaying behind the "Gallery" text.
I have tried without an Expanded widget (ListView.builder() directly under the Column children) but I get this error message in the Debug console:
════════ Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderRepaintBoundary#8dc77 relayoutBoundary=up8 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1702 pos 12: 'hasSize' The relevant error-causing widget was Column
And the list does not display at all.
Here's my code:
class Gallery extends StatelessWidget {
final List<_ChallengeCard> challengestest = [
_ChallengeCard(title: 'Challenge #1', subtitle: 'Completed on 13/11/1978'),
_ChallengeCard(title: 'Challenge #2', subtitle: 'Completed on 12/18/2043'),
_ChallengeCard(title: 'Challenge #3', subtitle: 'Current challenge'),
_ChallengeCard(title: 'Challenge #4', subtitle: 'Locked'),
_ChallengeCard(title: 'Challenge #5', subtitle: 'Locked'),
_ChallengeCard(title: 'Challenge #6', subtitle: 'Locked'),
_ChallengeCard(title: 'Challenge #7', subtitle: 'Locked'),
];
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Text(
'Gallery',
style: GoogleFonts.alexBrush(fontSize: 55),
textAlign: TextAlign.center,
),
Expanded(
child: ListView.builder(
itemCount: challengestest.length,
itemBuilder: (context, index){
return Container(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: InkWell(
onTap: (){},
child: challengestest[index]
),
);
},
),
),
],
),
);
}
}
And some additionnal classes so that you can see the specific content of the ListView item (but I doubt they have anything to do with the issue):
class _ChallengeCard extends StatelessWidget {
_ChallengeCard({
Key key,
this.title,
this.subtitle,
}) : super(key: key);
final String title;
final String subtitle;
@override
Widget build(BuildContext context) {
return Ink(
padding: EdgeInsets.all(11.0),
decoration: BoxDecoration(
color: Color(0xFF11001A),
borderRadius: BorderRadius.all(Radius.circular(10.0))),
child: Container(
alignment: Alignment.topLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Icon(Icons.star,color: Colors.white, size: 40.0,),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:<Widget>[
Text(
'$title',
style: GoogleFonts.lora(fontSize: 25),
),
Text(
'$subtitle',
style: GoogleFonts.lora(fontSize: 15),
),
],
),
],
),
),
);
}
}
The class "gallery" is called from the main.dart file (which is why there is a bottom navigation bar in the whole app), but I haven't included it since it is not relevant to the issue.
Thanks in advance!
You can make your text scroll also by wrapping your widget in a single child scroll view
...
SingleChildScrollView(// add a scrollview
child:
Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Text(
'Gallery',
style: GoogleFonts.alexBrush(fontSize: 55),
textAlign: TextAlign.center,
),
//remove the expanded widget
ListView.builder(
shrinkWrap: true, // make shrikwrap true
physics: NeverScrollableScrollPhysics(), // add this physics so it won't scroll
itemCount: challengestest.length,
itemBuilder: (context, index){
return Container(
... // rest of your code here
);}
),
]))
I finally got it to work by using the AppBar widget instead of a Text widget for the "Gallery" title.
The Scaffold does not contain a Column widget anymore, only a ListView.Builder:
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
shrinkWrap: true,
itemCount: challengestest.length,
itemBuilder: (context, index){
return Container(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: InkWell(
onTap: (){},
child: challengestest[index]
),
);
},
),
);
}
The text "Gallery" has been moved as a heavily modified AppBar with a Stack widget to retain its appearance:
Stack(
children: <Widget>[
Image.asset(
"assets/images/bgpurple.jpeg",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(85.0),
child: AppBar(
automaticallyImplyLeading: false,
elevation: 0.0,
backgroundColor: Colors.transparent,
centerTitle: true,
flexibleSpace: Padding(
padding: const EdgeInsets.only(top: 60.0),
child: Center(
child: Text(
_myPageTitles[_selectedIndex],
style: GoogleFonts.alexBrush(
fontSize: 45,
color: Colors.white,
)
),
),
),
),
),
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.