How to Create This Type of Two Button in the End of CupertinoActionSheet?

Question

   showCupertinoModalPopup(
                context: context,
                builder: (context) {
                  return CupertinoActionSheet(
                    actions: [],
                    title: Text("Sampark Tag"),
                    message: CupertinoSearchTextField(),
                    cancelButton: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Container(
                          margin: EdgeInsets.symmetric(horizontal: 10),
                          child: CupertinoActionSheetAction(
                              onPressed: () {}, child: Text("Cancel")),
                        ),
                        CupertinoActionSheetAction(
                            onPressed: () {}, child: Text("Cancel"))
                      ],
                    ),
                  );
                },
              );

result needed https://i.stack.imgur.com/aHRBa.png my screen https://i.stack.imgur.com/cK90U.png

you can add these buttons in actions list – Munsif Ali Sep 14 '22 at 10:01 — Munsif Ali, Sep 14 '22 at 10:01
@MunsifAli not really work – Mayank Prajapati Sep 14 '22 at 10:05 — Mayank Prajapati, Sep 14 '22 at 10:05

score 0 · Accepted Answer · answered Sep 14 '22 at 11:03

if you want to build the same design you can do it with the following code

showModalBottomSheet<void>(
                backgroundColor: Colors.transparent,
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    height: 310,
                    margin: EdgeInsets.all(30),
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.all(10),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(15),
                          ),
                          height: 250,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Text("Sampark"),
                              CupertinoSearchTextField(),
                              const Text('Modal BottomSheet'),
                              ElevatedButton(
                                child: const Text('Close BottomSheet'),
                                onPressed: () => Navigator.pop(context),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Container(
                          child: Row(
                            children: [
                              Expanded(
                                child: Container(
                                  height: 50,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(15),
                                    color: Colors.white,
                                  ),
                                  child: TextButton(
                                    onPressed: () {},
                                    child: Text("Cancel"),
                                  ),
                                ),
                              ),
                              SizedBox(
                                width: 10,
                              ),
                              Expanded(
                                child: Container(
                                  height: 50,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(15),
                                    color: Colors.white,
                                  ),
                                  child: TextButton(
                                    onPressed: () {},
                                    child: Text("Cancel"),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  );
                });

Check out the following image. with little adjustment you can achieve the design you want.

Container height create problem some time use whole Container wrap with Wrap widget so the bottom sheet height flexible according to children, — Mayank Prajapati, Sep 14 '22 at 12:26

score 0 · Answer 2 · answered Sep 14 '22 at 11:44

Use below code

showCupertinoModalPopup(
      context: context,
      builder: (BuildContext context) =>
          CupertinoActionSheet(
        title:
            const Text('Select Option'),
        message:
            const Text('Which option?'),
        actions: <Widget>[
          CupertinoActionSheetAction(
            child: const Text('1'),
            onPressed: () {
              print('pressed');
            },
          )
        ],
        cancelButton: Container(
          decoration: BoxDecoration(
            borderRadius:
                BorderRadius.circular(
                    14),
            color: Colors.black
                .withOpacity(0.2),
          ),
          child: Row(
            children: [
              Expanded(
                flex: 5,
                child: Container(
                  decoration:
                      BoxDecoration(
                    borderRadius:
                        BorderRadius
                            .circular(
                                14),
                    color: Colors.white
                        .withOpacity(
                            0.8),
                  ),
                  child:
                      CupertinoActionSheetAction(
                    onPressed: () =>
                        Navigator.pop(
                            context),
                    isDestructiveAction:
                        true,
                    child: const Text(
                        'Cancel'),
                  ),
                ),
              ),
              const SizedBox(
                width: 10,
              ),
              Expanded(
                flex: 5,
                child: Container(
                  decoration:
                      BoxDecoration(
                    borderRadius:
                        BorderRadius
                            .circular(
                                14),
                    color: Colors.white
                        .withOpacity(
                            0.8),
                  ),
                  child:
                      CupertinoActionSheetAction(
                    onPressed: () =>
                        Navigator.pop(
                            context),
                    child: const Text(
                        'Cancel'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
  ),

whole Cancel button also tap .. – Mayank Prajapati Sep 14 '22 at 12:21 — Mayank Prajapati, Sep 14 '22 at 12:21

How to Create This Type of Two Button in the End of CupertinoActionSheet?

2 Answers2