mostrar cuadro de diálogo en flutter con ejemplo de código de acciones

Posterior a de nuestra extensa recopilación de datos pudimos resolver este atasco que presentan muchos los usuarios. Te brindamos la respuesta y nuestro objetivo es resultarte de mucha apoyo.

Ejemplo 1: cuadro de diálogo flutter show al inicio

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

  void main() 
    runApp(new MyApp());
  

  class MyApp extends StatelessWidget 
    @override
    Widget build(BuildContext context) 
      return MaterialApp(
          title: 'Trial',
          home: Scaffold(
              appBar: AppBar(title: Text('List scroll')), body: new MyHome()));
    
  

  class MyHome extends StatelessWidget  // Wrapper Widget
    @override
    Widget build(BuildContext context) 
      Future.delayed(Duration.zero, () => showAlert(context));
      return Container(
        child: Text("Hello world"),
      );
    

    void showAlert(BuildContext context) 
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                content: Text("hi"),
              ));
    
  

Ejemplo 2: mostrar el cuadro de diálogo en el aleteo presionado

@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),
              ),
            ),
          ],
        ),
      ],
    ),
  );

Si te apasiona la programación, puedes dejar una sección acerca de qué le añadirías a este tutorial.

---

---

Utiliza Nuestro Buscador