简体   繁体   中英

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

   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

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.

在此处输入图像描述

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'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
  ),

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM