How do I add a container at the end of my grid view in Flutter?

问题

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

回答1:

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'))
          ]),
        ),
      ),
    );

来源：https://stackoverflow.com/questions/59810942/how-do-i-add-a-container-at-the-end-of-my-grid-view-in-flutter