How do I add a container at the end of my grid view in Flutter?
2,753
This is one of the solution ! UPDATED:
List<String> homeList = [];
@override
void initState() {
super.initState();
homeList = List.generate(15, (ind) => 'Item $ind').toList();
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
return true;
},
child: Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [const Color(0xFFFEFEFE), const Color(0xFFFEFEFE)],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
),
child: ListView(
children: <Widget>[
Container(
child: Text(
"Daily Tasks",
style: TextStyle(
fontFamily: "Netflix",
fontWeight: FontWeight.w600,
fontSize: 35,
letterSpacing: 0.27,
color: Color(0xFFFF8C3B),
),
),
padding: EdgeInsets.fromLTRB(10, 10, 0, 10),
),
Stack(children: [
GridView.builder(
shrinkWrap: true,
itemCount: homeList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, mainAxisSpacing: 20),
itemBuilder: (ctx, i) {
return GestureDetector(
onTap: () async {
// if (i == 0) {
// if (await interstitialAd.isLoaded) {
// interstitialAd.show();
// } else {
// dailyRewardAlert(context);
// }
// } else if (i == 1) {
// FlutterPollfish.instance.show();
// } else if (i == 2) {
// sendInvite();
// } else if (i == 3) {
// hideBannerAd();
// Navigator.push(context,
// MaterialPageRoute(builder: (context) => Roulette()));
// } else if (i == 4) {
// hideBannerAd();
// Navigator.push(context,
// MaterialPageRoute(builder: (context) => Scratch()));
// }
},
child: Container(
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(Radius.circular(16.0)),
),
width: 150,
margin: const EdgeInsets.symmetric(horizontal: 11.0),
child: Container(
child: ClipRRect(
borderRadius: BorderRadius.circular(19.0),
child: Stack(
children: <Widget>[
Positioned.fill(
// child: Image.asset(
// homeList[i].imagePath,
// fit: BoxFit.cover,
// ),
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10),
color: Colors.orange))),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 9.0, vertical: 5.0),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
const Color(0xFFFF8C3B),
const Color(0xFFFE524B)
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(15))),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
homeList[i],
style: TextStyle(
fontFamily: "Netflix",
fontWeight: FontWeight.w600,
fontSize: 17,
letterSpacing: 0.27,
color: Colors.white,
),
),
],
),
),
),
],
),
),
),
),
);
},
),
]),
Container(
alignment: Alignment.center,
height: 50,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.blueAccent],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: BorderRadius.circular(15),
),
child: Text('Your widget at the end'))
]),
),
),
);
Author by
Simran Aswani
Updated on December 17, 2022Comments
-
Simran Aswani over 1 year
I have a GridView and I want to add a bannerAd after the gridview scroll ends. The bannerAd is called from the dependency https://github.com/kmcgill88/admob_flutter. The code for the GridView is as follows
Widget build(BuildContext context) { SystemChrome.setEnabledSystemUIOverlays([]); return WillPopScope( onWillPop: () async { return true; }, child: Scaffold( body: Container( decoration: BoxDecoration( gradient: LinearGradient( colors: [const Color(0xFFFEFEFE), const Color(0xFFFEFEFE)], begin: Alignment.centerLeft, end: Alignment.centerRight, ), ), child: Stack(children: <Widget>[ Text( "Daily Tasks", style: TextStyle( fontFamily: "Netflix", fontWeight: FontWeight.w600, fontSize: 35, letterSpacing: 0.27, color: Color(0xFFFF8C3B), ), ), Expanded( flex: 20, child: GridView.builder( itemCount: homeList.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, mainAxisSpacing: 20), itemBuilder: (ctx, i) { return GestureDetector( onTap: () async { if (i == 0) { if (await interstitialAd.isLoaded) { interstitialAd.show(); } else { dailyRewardAlert(context); } } else if (i == 1) { FlutterPollfish.instance.show(); } else if (i == 2) { sendInvite(); } else if (i == 3) { hideBannerAd(); Navigator.push(context, MaterialPageRoute(builder: (context) => Roulette())); } else if (i == 4) { hideBannerAd(); Navigator.push(context, MaterialPageRoute(builder: (context) => Scratch())); } }, child: Container( decoration: BoxDecoration( borderRadius: const BorderRadius.all(Radius.circular(16.0)), ), width: 150, margin: const EdgeInsets.symmetric(horizontal: 11.0), child: Container( child: ClipRRect( borderRadius: BorderRadius.circular(19.0), child: Stack( children: <Widget>[ Positioned.fill( child: Image.asset( homeList[i].imagePath, fit: BoxFit.cover, ), ), Positioned( bottom: 0, left: 0, right: 0, child: Container( padding: EdgeInsets.symmetric( horizontal: 9.0, vertical: 5.0), decoration: BoxDecoration( gradient: LinearGradient( colors: [ const Color(0xFFFF8C3B), const Color(0xFFFE524B) ], begin: Alignment.centerLeft, end: Alignment.centerRight, ), borderRadius: BorderRadius.only( topRight: Radius.circular(15))), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( "${homeList[i].taskTitle}", style: TextStyle( fontFamily: "Netflix", fontWeight: FontWeight.w600, fontSize: 17, letterSpacing: 0.27, color: Colors.white, ), ), ], ), ), ), ], ), ), ), ), ); }, ), ), ]), ), ), ); }
I am new to Flutter and this would help me a lot, thank you so much for your contribution! :) I need help with Grid Views
-
Yudhishthir Singh over 4 yearsCan u please format the code a little better?
-
Simran Aswani over 4 yearsI formatted it could you please have a look
-
Yudhishthir Singh over 4 yearsHow much is the scrollable area in your screen?
-
Yudhishthir Singh over 4 yearsI am not able to understand why are you using the stack widget!
-
Simran Aswani over 4 yearsI have a few components in the home page above the gridVI\iew
-
-
Simran Aswani over 4 yearson using the ListView instead all my components are disappearing.
-
Simran Aswani over 4 yearsOkay so this worked but the gridView isn't Scrolling
-
Naveen Avidi over 4 yearsWell ! I tested in dartpad ! I don't know why it is not working for you !!!
-
Simran Aswani over 4 yearsthe list view and grid view is coming up properly but it just isn't scrolling. Can you suggest something?
-
Naveen Avidi over 4 yearsDid you added/changed any other properties which are not in my answer ???
-
Simran Aswani over 4 yearsyes I uncommented the parts I needed and rest is the same
-
Naveen Avidi over 4 yearsDoes on tap function in gesture detector works fine ??
-
Naveen Avidi over 4 yearsI m asking , the code in the on tap function works or not ??