Flutter ListView in Expanded alignment center

https://codelabs.developers.google.com/codelabs/flutter-codelab-first#8

How can I the effect of step 9 be achieved in this Flutter codelabs?
enter image description here

I have tried like this

    // class GenneratorPage
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: appState.allPair.length,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: appState.isFavorite(index)
                      ? const Icon(Icons.favorite)
                      : null,
                  title: Text(appState.allPair[index].asPascalCase),
                );
              },
            ),
          ),
          BigCard(pair: pair),
          const SizedBox(height: 10),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  appState.toggleFavorite();
                },
                icon: Icon(icon),
                label: const Text('Like'),
              ),
              const SizedBox(width: 10),
              ElevatedButton(
                onPressed: () {
                  appState.next();
                },
                child: const Text('Next'),
              ),
            ],
          ),
          const Spacer(),
        ],
      ),
    );

and another Expanded wrap that

return LayoutBuilder(builder: (context, constraints) {
  return Scaffold(
    body: Row(
      children: [
        SafeArea(
          child: NavigationRail(
            extended: constraints.maxWidth >= 600,
            destinations: const [
              NavigationRailDestination(
                icon: Icon(Icons.home),
                label: Text('Home'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.favorite),
                label: Text('Favorites'),
              ),
            ],
            selectedIndex: index,
            onDestinationSelected: (value) {
              setIndex(value);
            },
          ),
        ),
        Expanded(
          child: Container(
            color: Theme.of(context).colorScheme.primaryContainer,
            child:
                index == 0 ? const GeneratorPage() : const FavoritesPage(),
          ),
        ),
      ],
    ),
  );
});

But I can’t let ListTile in the center, Here is the effect I achieved
enter image description here