本文介绍了如何在Flutter的网格视图末尾添加容器?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个GridView，并且我想在gridview滚动结束后添加一个bannerAd.从依赖项
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
解决方案
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'))
]),
),
),
);
这篇关于如何在Flutter的网格视图末尾添加容器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！