Displaying scrollable list inside Flutter Show Dialog

Question

I have a dynamic list of names of countries. I want to show this list in a Dialog Box (say when a user clicks a button).

Here is my implementation of the Dialog Box so far:

 List<String> countries = [
    'India','Japan','China','USA','France','Egypt','Norway','Nigeria','Colombia','Australia','South Korea','Bangladesh','Mozambique','Canada','Germany','Belgium','Vietnam','Bhutan','Israel','Brazil'
  ];


  @override
  Widget build(BuildContext context) {
    return Dialog(
        child: Container(
      width: 400,
      height: 400,
      child: SingleChildScrollView(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: countries.length,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text('${countries[index]}'),
              );
            }),
      ),
    ));
  }
}

The output I am getting is as follows:

Clearly, only 7 countries are visible.

I have tried several other options:

1. Making height of the Container as double.maxFinite .
2. Putting another Column inside SingleChildScrollView.
3. All possible permutations of Column, Container, SingleChildScrollView

However, none of the above methods seem to work (overflow error, limited number of displayed items etc).

What I actually want is to be able to show a list using ListView.builder method inside a ShowDialog .

Answer 1

Solved like this:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> _countries = [
    'India',
    'Japan',
    'China',
    'USA',
    'France',
    'Egypt',
    'Norway',
    'Nigeria',
    'Colombia',
    'Australia',
    'South Korea',
    'Bangladesh',
    'Mozambique',
    'Canada',
    'Germany',
    'Belgium',
    'Vietnam',
    'Bhutan',
    'Israel',
    'Brazil'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Push for open list dialog',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _showDialogOnButtonPressing,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  _showDialogOnButtonPressing() => showDialog(
        context: context,
        child: Container(
          width: MediaQuery.of(context).size.width - 40,
          height: MediaQuery.of(context).size.height - 60,
          child: Dialog(
            child: ListView.builder(
              itemCount: _countries.length,
              itemBuilder: (context, index) => ListTile(
                title: Text('${index + 1}. ${_countries[index]}'),
              ),
            ),
          ),
        ),
      );
}

The result is in the image, and you can scroll up and down without problems: