CODEWITHSUNDEEP
flutterdartflutter-layout
Pramod Yadav
Pramod Yadav

Reputation: 454

Blank space occupied when ads are not showing in flutter

I am using admob_flutter plugin to display ads in my app. Everything is working fine but when ads are not ready to display or someone is offline then I am getting blank space on the place of ads Banner. like image below enter image description here

I tried boolean method too but I can'nt figure out the problems.

ListView.builder(
          itemCount: _storyListByCategory.length,
            itemBuilder: (context, index) {
              if (index % 7 == 0 && index != 0)
              return Column(
                children: [
                  AdmobBanner(
                    adUnitId: AdManager.bannerAdUnitId,
                    adSize: AdmobBannerSize.BANNER,
                  ),
                  StoryByCategory(
                    this._storyListByCategory[index],
                  ),
                ],
              );
              else return StoryByCategory(
                this._storyListByCategory[index],
              );
            },
        ),

Please suggest me how can I get rid of this problem?

Upvotes: 0

Views: 684

Answers (3)

Lovnish Jain
Lovnish Jain

Reputation: 367

In that type of cases you can always use ternary operator. here is simple example :-

  • create a function which check internet connectivity continuously then call this function before building widget tree..
  • then use SizeBox.shrink() to shrink.

*description :-

  • checkNet():for checking internet connection.

  • _wiget():Simple widget

  • set ? _wiget() : SizedBox.shrink(), _wiget() : ternary operation

  • set :bool variable

  • the most import thing is to call checkNet() Continuously so for that call checkNet() every time before building widget.*

     class EnrollCourse extends StatefulWidget {
 @override
 _EnrollCourseState createState() => _EnrollCourseState();
}

class _EnrollCourseState extends State<EnrollCourse> {
bool set;
@override
void initState() {
 // TODO: implement initState
 super.initState();
 checkNet();
}

@override
Widget build(BuildContext context) {
 checkNet();
 return Scaffold(
   body: Center(
     child: new Column(
       crossAxisAlignment: CrossAxisAlignment.center,
       mainAxisAlignment: MainAxisAlignment.center,
       children: [_wiget(), set ? _wiget() : SizedBox.shrink(), _wiget()],
     ),
   ),
 );
}

void checkNet() async {
 try {
   final result = await InternetAddress.lookup('google.com');
   if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
     setState(() {
       print("yes internet");
       set = true;
     });
   }
 } on SocketException catch (_) {
   setState(() {
     print("No internet");
     set = false;
   });
 }
}

Widget _wiget() {
 return Padding(
   padding: const EdgeInsets.all(8.0),
   child: new Container(
     color: Colors.red,
     height: 200,
     width: 200,
     child: new Text("child 1"),
   ),
  );
}
}

Upvotes: 1

Deepak Lohmod
Deepak Lohmod

Reputation: 2282

bool _adShown=true;
ListView.builder(
      itemCount: _storyListByCategory.length,
      itemBuilder: (context, index) {
        if (index % 7 == 0 && index != 0)
          return Column(
            children: [
              _adShown?AdmobBanner(
                  adUnitId: AdManager.bannerAdUnitId,
                  adSize: AdmobBannerSize.BANNER,
                  listener: (AdmobAdEvent event,m){
                    if (event == AdmobAdEvent.loaded) {
                      setState(() {
                        _adShown=true;
                      });
                    } else if (event == AdmobAdEvent.failedToLoad) {
                      setState(() {
                        _adShown = false;
                      });
                    }
                  }
              ):Container(),
              StoryByCategory(
                this._storyListByCategory[index],
              ),
            ],
          );
        else return StoryByCategory(
          this._storyListByCategory[index],
        );
      },
    ),

You shall use listener in admob to check whether ad has loaded or not.

Upvotes: 2

Ulric Denis
Ulric Denis

Reputation: 51

import 'dart:io';

before your return Widget

  bool isonline = false;
  final result = await InternetAddress.lookup('google.com');
  if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
    isonline = true
  }

then in your list :

ListView.builder(
          itemCount: _storyListByCategory.length + isonline ? 1:0,
            itemBuilder: (context, index) {
              if (index % 7 == 0 && index != 0)
              return Column(
                children: [
                  isonline ? AdmobBanner(
                    adUnitId: AdManager.bannerAdUnitId,
                    adSize: AdmobBannerSize.BANNER,
                  ), : 
                  AdsMakemeliveWidget() ,
                  StoryByCategory(
                    this._storyListByCategory[index],
                  ),
                ],
              );
              else return StoryByCategory(
                this._storyListByCategory[index],
              );
            },
        ),

Upvotes: 1

Related Questions