Flutter 吐司对话框

Question

如何在 flutter 中制作这样的 toast 对话框？ （创建服务，创建场地）

互动示例： https://files.fm/f/dw6qvmznc

Answer 1

这里有一个简洁的package，它也用不同的样式处理了这一点。

                StarMenu(
                  onStateChanged: (state) {
                    print('State changed: $state');
                  },
                  params: StarMenuParameters(
                      shape: MenuShape.linear,
                      linearShapeParams: LinearShapeParams(
                          angle: 270,
                          space: 30,
                          alignment: LinearAlignment.center),
                      onItemTapped: (index, controller) {
                        // don't close if the item tapped is not the ListView
                        if (index != 1) controller.closeMenu();
                      }),
                  // lazyItemsLoad let you build menu entries at runtime
                  lazyItems: () async {
                    return [
                      Container(
                        color: Color.fromARGB(255, Random().nextInt(255),
                            Random().nextInt(255), Random().nextInt(255)),
                        width: 60,
                        height: 40,
                      ),
                      Container(
                        width: 150, // CHANGE WIDTH
                        height: 200, // CHANGE HEIGHT
                        child: Card(
                          elevation: 6,
                          margin: EdgeInsets.all(6),
                          child: Column(
                              children: [
                                 // ADD YOUR ACTIONS HERE
                              ]
                            ),
                          ),
                        ),
                      ),
                    ];
                  },
                  child: FloatingActionButton( // THIS WILL BE YOUR BUTTON YOU WANT TO SHOW THE MENU FROM
                    onPressed: () {
                      print('FloatingActionButton Menu1 tapped');
                    },
                    child: Icon(Icons.looks_one),
                  ),
                ),

Answer 2

您可以使用PopupMenuButton

PopupMenuButton<String>(
  icon: const Icon(Icons.add_circle_outline_outlined),
  color: Colors.grey, // background color
  itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
    PopupMenuItem<String>(
      value: "create service",
      onTap: () {},
      child: const Center(
        child: Text(
          'create service',
        ),
      ),
    ),
    PopupMenuItem<String>(
      value: "create venue",
      child: const Center(
        child: Text(
          'create venue',
        ),
      ),
      onTap: () {},
    ),
  ],
)

Answer 3

您可以使用 CupertinoDailog 的简单对话框...

onPress:(){
      showCupertinoDialog(context: context,
          builder: (context) {
                   return CupertinoAlertDialog(
                      content: Column(
                               children: [
                                          Text("Option 1"),
                                          Text("Option 1"),
                                          Text("Option 1"),
                                         ],
                                       ),
                                      );})


}