I want to have a GridView.builder inside another TabBar Widget of SingleChildScrollView and I got this error.
======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I tried to put the GridView in a Container and give a specific height, it doesn't make an error but the Grid was cut off.
This is my SingleChildScrollView Widget code
import ...
class CommunityPage extends StatefulWidget {...}
class _CommunityPageState extends State<CommunityPage> {
ScrollController? sc;
bool check = false;
Future<void> _copyToClipboard() async {...}
@override
void initState() {...}
@override
void dispose() {...}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
),
drawer: const SideBar(),
floatingActionButton: check
? FloatingActionButton.small(...)
: null,
floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
body: SafeArea(
child: ((this.sc == null) && !this.sc!.hasClients)
? const Center(...)
: SingleChildScrollView(
controller: this.sc!,
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Container(...),
const SizedBox(height: largeSpace * 0.8),
Row(...),
const SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 65.0),
child: Container(
height: 43,
decoration: BoxDecoration(...),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: TabBar(
indicator: BoxDecoration(),
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabs: const [
Tab(
child: Text(
'EVENTS',
style: TextStyle(
fontSize: 15,
fontFamily: 'assets/fonts/LeferiBase',
),
),
),
Tab(
child: Text(
'MEMBERS',
style: TextStyle(
fontSize: 15,
fontFamily: 'assets/fonts/LeferiBase',
),
),
),
],
),
),
),
),
const SizedBox(height: 20),
const Expanded(
child: TabBarView(children: [
EventsScreen(),
MembersScreen(),
]),
),
],
),
),
),
),
),
);
}
}
And this is my GridView code
import ...
class EventsScreen extends StatefulWidget {
const EventsScreen({super.key});
@override
_EventsScreenState createState() {
return _EventsScreenState();
}
}
class _EventsScreenState extends State<EventsScreen> {
List<Nfts> nfts = [];
bool isLoading = true;
NftsProviders nftsProvider = NftsProviders();
Future initNfts() async {
nfts = await nftsProvider.getNfts();
}
@override
void initState() {
super.initState();
initNfts().then((_) {
setState(() {
isLoading = false;
});
});
}
@override
Widget build(BuildContext context) {
return isLoading
? const Center(
child: CircularProgressIndicator(),
)
: Padding(
padding: const EdgeInsets.symmetric(horizontal: 40),
child: GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: nfts.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(5.0),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const NFTDetailPage()),
);
},
child: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(nfts[index].meta_image),
),
),
);
},
),
);
}
}
