Flutter AnimatedList last item of ListTile is overlapped by CupertinoTabBar

Question

I have started learning flutter and I have problem adjusting the UI. I have three BottomNavigationBarItem and in the first tab, I created AnimatedList and populate data from word generator once the plus button is clicked. The list can scroll all the items in android emulator but in IOS simulator, the last item is cut off by navigation bar.

I have tried to set margin/padding but I have to set very big number to see the gap between navigation bar and last item. I also tried to wrap with container and set padding to it but I feel like I'm doing the wrong way.

this is my home_page.dart file

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:english_words/english_words.dart';
import 'package:hello_world/screens/favourite_word_page.dart';
import 'dart:developer';

import 'package:hello_world/screens/popular_page.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _RandomWordsState();
}

enum PAGE_INDEX { HOME, POPULAR, ACCOUNT }

class _RandomWordsState extends State<HomePage> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey();
  final _suggestion = new List<WordPair>();
  final _savedWords = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Getting Started Testing"),
        actions: <Widget>[
          new IconButton(
            icon: const Icon(Icons.list),
            onPressed: _goToFavourite,
          ),
          new IconButton(
            icon: const Icon(Icons.add),
            onPressed: _addWords,
          ),
        ],
      ),
      body: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("Home"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.whatshot),
              title: Text("Popular"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_circle),
              title: Text("Account"),
            ),
          ],

          currentIndex: _selectedIndex,
        ),
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                defaultTitle: "Home",
                builder: (context) => _buildSuggestion(),
              );
              break;
            case 1:
              return CupertinoTabView(
                defaultTitle: "Popular",
                builder: (context) => PopularPage(),
              );
              break;
            default:
          }
        },
      ),
    );
  }

  Widget _buildSuggestion() {
    //_suggestion.addAll(generateWordPairs().take(10));
    print("suggestion list count : " + _suggestion.length.toString());
    return Container(
      margin: const EdgeInsets.only(bottom: 45),
      child: AnimatedList(
        key: _listKey,
        padding: EdgeInsets.all(8.0),
        initialItemCount: _suggestion.length,
        itemBuilder:
            (BuildContext context, int itemIndex, Animation animation) {
          return _buildRow(_suggestion[itemIndex], animation, itemIndex);
        },
      ),
    );
  }

  Widget _buildRow(WordPair suggestion, Animation animation, [int index]) {
    print((index + 1).toString() +
        " suggestion name: " +
        suggestion.asPascalCase);

    final bool isAlreadySaved = _savedWords.contains(suggestion);

    return SlideTransition(
      position: Tween<Offset>(
        begin: new Offset(1, 0),
        end: new Offset(0, 0),
      ).animate(animation),
      child: Card(
        child: ListTile(
          title: new Text(
            suggestion.asPascalCase,
            style: _biggerFont,
          ),
          subtitle: Text((index + 1).toString()),
          trailing: new Icon(
            isAlreadySaved ? Icons.favorite : Icons.favorite_border,
            color: isAlreadySaved ? Colors.red : null,
          ),
          onTap: () => _saveAsFavourite(isAlreadySaved, suggestion),
        ),
      ),
    );
  }

  void _saveAsFavourite(bool isAlreadySaved, WordPair suggestion) {
    setState(() {
      if (isAlreadySaved) {
        _savedWords.remove(suggestion);
      } else {
        _savedWords.add(suggestion);
      }
    });
  }

  void _goToFavourite() {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => FavouriteWordsPage(
              favouriteWords: _savedWords,
            ),
      ),
    );
  }

  void _addWords() {
    setState(() {
      _suggestion.addAll(generateWordPairs().take(10));
      print("list count: " + _suggestion.length.toString());

      for (var i = 0; i < 10; i++) {
        _listKey.currentState.insertItem(i);
      }
    });
  }

}

might not be related to your problem directly, but you should never use functions to build the widget tree. See [this answer](https://stackoverflow.com/a/53234826/6374527) for more details. — George Zvonov, May 29 '19 at 13:43

score 2 · Accepted Answer · answered Sep 19 '19 at 15:59

You can use SafeAra to avoid this overlap. Wrap your whole list in a SafeArea widget. If you just want to avoid overlapping with the tabbar and nothing else, use

SafeArea(
      bottom: true, 
      top: false, 
      left: false, 
      right: false, 
      child: child ) //your list

score 1 · Answer 2 · answered Nov 28 '19 at 12:15

I had the same issue, as above answer, you can wrap your screen with SafeArea, or I just found that if you set background color to your CupertinoTabBar, screen will not overlap with tab.

CupertinoTabBar(
          backgroundColor: Colors.red, // add this 

          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              // title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
            ),
          ],
)

Flutter AnimatedList last item of ListTile is overlapped by CupertinoTabBar

2 Answers2