Всплывающее диалоговое окно при нажатии кнопки во флаттере

Question

У меня есть кнопка, нажав на которую, я хочу, чтобы всплыло диалоговое окно, и я сделал это, используя showDialog и вызвав там мой метод диалога.Но я не знаю, как я должен использовать текст изображения и оценки в строке.?

Изображение предоставлено, и код также предлагает мне, пожалуйста?

Это где используется 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),
          ),
        ),
      ],
    ),
  ),
);

Ожидаемый результат:

Answer 1

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("Testing")),
    body: Center(
      child: RaisedButton(
        child: Text("Show dialog"),
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return Dialog(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
                elevation: 16,
                child: Container(
                  height: 400.0,
                  width: 360.0,
                  child: ListView(
                    children: <Widget>[
                      SizedBox(height: 20),
                      Center(
                        child: Text(
                          "Leaderboard",
                          style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
                        ),
                      ),
                      SizedBox(height: 20),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 1", score: 1000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 2", score: 2000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 3", score: 3000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 4", score: 4000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 5", score: 5000),
                      _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 6", score: 6000),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    ),
  );
}

Widget _buildName({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),
              radius: 30,
            ),
            SizedBox(width: 12),
            Text(name),
            Spacer(),
            Container(
              padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
              child: Text("${score}"),
              decoration: BoxDecoration(
                color: Colors.yellow[900],
                borderRadius: BorderRadius.circular(20),
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

Answer 2

Вам нужно изменить структуру кода для него,

Сначала вам нужно создать один отдельный класс для диалога (чтобы вы могли передавать по нему данные),

Затем вам нужночтобы создать пользовательский класс плиток для этого вида плитки вида списка.

Затем необходимо создать представление списка в своем настраиваемом диалоговом окне и вызвать эти плитки в виде списка.

И по нажатию кнопкисобытие просто передает данные при вызове диалога.