dialog box with form flutter

104

dialog box with form flutter -

void showDialogWithFields() {
  showDialog(
    context: context,
    builder: (_) {
      var emailController = TextEditingController();
      var messageController = TextEditingController();
      return AlertDialog(
        title: Text('Contact Us'),
        content: ListView(
          shrinkWrap: true,
          children: [
            TextFormField(
              controller: emailController,
              decoration: InputDecoration(hintText: 'Email'),
            ),
            TextFormField(
              controller: messageController,
              decoration: InputDecoration(hintText: 'Message'),
            ),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Cancel'),
          ),
          TextButton(
            onPressed: () {
              // Send them to your email maybe?
              var email = emailController.text;
              var message = messageController.text;
              Navigator.pop(context);
            },
            child: Text('Send'),
          ),
        ],
      );
    },
  );
}

show dialog box on pressed flutter -

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

Comments

Submit
0 Comments