Pop up Dialog box on Pressing button in flutter

Question

I have a button by clicking on which I want a dialog box to pop up and I did that by using showDialog and calling my dialog method there. But I don't know how should I use the image text and score in a line .?

The image is provided and the code also suggests to me, please?

This is where is used showDialog

      Row(
          children: <Widget>[
            RaisedButton(
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 15.0),
              textColor: Colors.black,
              child: Text(
                'LeaderBoard',
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              onPressed: () {

                showDialog(
                    context: context,
                    builder: (BuildContext context) => leadDialog);
              },
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0)),
           ),

My Dialog mmethod

import 'package:flutter/material.dart';

Dialog leadDialog = Dialog(
  child: Container(
    height: 300.0,
    width: 360.0,
    color: Colors.white,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.all(15.0),
          child: Text(
            'Choose from Library',
            style:
            TextStyle(color: Colors.black, fontSize: 22.0),
          ),
        ),
      ],
    ),
  ),
);

The expected result is

Answer 1

Screenshot:

---

Code:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: ElevatedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return Dialog(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
                elevation: 16,
                child: Container(
                  child: ListView(
                    shrinkWrap: true,
                    children: <Widget>[
                      SizedBox(height: 20),
                      Center(child: Text('Leaderboard')),
                      SizedBox(height: 20),
                      _buildRow('assets/choc.png', 'Name 1', 1000),
                      _buildRow('assets/choc.png', 'Name 2', 2000),
                      _buildRow('assets/choc.png', 'Name 3', 3000),
                      _buildRow('assets/choc.png', 'Name 4', 4000),
                      _buildRow('assets/choc.png', 'Name 5', 5000),
                      _buildRow('assets/choc.png', 'Name 6', 6000),
                    ],
                  ),
                ),
              );
            },
          );
        },
        child: Text('Show dialog'),
      ),
    ),
  );
}
  
Widget _buildRow(String imageAsset, String name, double score) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 20.0),
    child: Column(
      children: <Widget>[
        SizedBox(height: 12),
        Container(height: 2, color: Colors.redAccent),
        SizedBox(height: 12),
        Row(
          children: <Widget>[
            CircleAvatar(backgroundImage: AssetImage(imageAsset)),
            SizedBox(width: 12),
            Text(name),
            Spacer(),
            Container(
              decoration: BoxDecoration(color: Colors.yellow[900], borderRadius: BorderRadius.circular(20)),
              padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
              child: Text('$score'),
            ),
          ],
        ),
      ],
    ),
  );
}

Answer 2

You need to change a structure of the code for it,

First you need to create one separate class for dialog(So you can pass data on it),

Then you need to create custom tile class for this kind of List View tile.

Then you need to create list view in your custom dialog and call those tiles in your list view.

And at your button click event just pass data at calling the dialog.