CODEWITHSUNDEEP
flutterdartflutter-layout
StuckInPhDNoMore
StuckInPhDNoMore

Reputation: 2679

Bottom Widget overflow in Column layout?

I'm trying to display an ad using the admob_flutter package: https://pub.dev/packages/admob_flutter, which basically allows me to display the ad just like any other widget.

Following the documentation, I added a widget within a column layout as below (relevant code only):

@override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(fileName),
          backgroundColor: Colors.teal,
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: (){
              },
            ),
          ],
        ),
        body: Container(
          padding: EdgeInsets.all(5.0),
          child: Column(
            children: <Widget>[
              TextField(
                ...
              ),
              AdmobBanner(
                adUnitId: 'ca-app-pub-39402560999XXXXXX/XXXXXXXXX',
                adSize: AdmobBannerSize.BANNER,
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomAppBar(...)

As per documentation, this is all I have to do, but I get an overflow error as seen in screenshot below:

enter image description here

I tried wrapping these in Expanded() and Flexible() but that did not fix my problem?

What am I doing wrong here?

Upvotes: 1

Views: 72

Answers (3)

Anil Kumar
Anil Kumar

Reputation: 1984

You can use ListView , SingleChildScrollView or ListView.builder if you want dynamic contents in place of Column

   body: Container(
      padding: EdgeInsets.all(5.0),
      child: Column(..),),

Upvotes: 1

timilehinjegede
timilehinjegede

Reputation: 14043

You should wrap your Widgets in a Scrollable Widget so they can be scrolled when the contents exceeds the device screen's size. I wrapped your widgets in a SingleChildScrollView, check the demo below:

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(fileName),
          backgroundColor: Colors.teal,
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: (){
              },
            ),
          ],
        ),
        body: SingleChildScrollView( // new line
          child: Container(
          padding: EdgeInsets.all(5.0),
          child: Column(
            children: <Widget>[
              TextField(
                ...
              ),
              AdmobBanner(
                adUnitId: 'ca-app-pub-39402560999XXXXXX/XXXXXXXXX',
                adSize: AdmobBannerSize.BANNER,
              ),
            ],
          ),
        ),
        )
        bottomNavigationBar: BottomAppBar(...)

Upvotes: 1

Habib Mhamadi
Habib Mhamadi

Reputation: 769

Just change Column to Listview

Upvotes: 1

Related Questions