Переполнение нижнего виджета в макете столбца?

Question

Я пытаюсь отобразить рекламу с помощью пакета admob_flutter: https://pub.dev/packages/admob_flutter, который в основном позволяет мне отображать рекламу так же, как и любой другой виджет.

Следуя документации, Я добавил виджет в макет столбца, как показано ниже (только соответствующий код):

@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(...)

Согласно документации, это все, что мне нужно сделать, но я получаю ошибку переполнения, как показано на снимке экрана ниже:

введите описание изображения здесь

Я пытался обернуть их в Expanded() и Flexible(), но это не устранило мою проблему?

Что я здесь делаю не так?

Answer 1

Вы должны заключить Widgets в Scrollable Widget, чтобы их можно было прокручивать, когда содержимое превышает размер экрана устройства. Я обернул ваши виджеты в SingleChildScrollView, посмотрите демо ниже:

  @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(...)

Answer 2

Вы можете использовать ListView, SingleChildScrollView или ListView.builder, если хотите, чтобы содержимое динамического c вместо столбца

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

Answer 3

Просто замените Column на Listview