Flutter 创建自定义设计按钮答案

【问题标题】：Flutter create a custom design buttonFlutter 创建自定义设计按钮
【发布时间】：2021-06-28 08:46:15
【问题描述】：

我需要在flutter中创建这种类型的按钮

想知道这是什么类型的按钮吗？我之前检查过这些是一些特定类型的按钮需要知道这种类型的按钮是否有任何小部件？

【问题讨论】：

你可以查看这个morioh.com/p/e16733007adc

标签： flutter dart

【解决方案1】：

100% 自定义按钮

源码使用flutter_neumorphic: ^3.0.3包

 Container(width: MediaQuery.of(context).size.width,
                    color: const Color(0xf0222324),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [

                      GestureDetector(onTap:(){},
                        child: Neumorphic(
                            style: NeumorphicStyle(
                                shape: NeumorphicShape.convex,
                                shadowLightColor: Colors.white38,
                                shadowDarkColor:Colors.black,
shadowLightColorEmboss: Colors.white,
shadowDarkColorEmboss: Colors.black,
                                boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(20)),
                                depth: 8,
                                lightSource: LightSource.topLeft,
                                color: Color(0xf8a70707)
                            ),
                            child: Container(width: 300,
                              padding: EdgeInsets.symmetric(vertical: 7,horizontal: 15),
                              alignment: Alignment.center,child:
                              Text('RELOAD LIVEWALLET',style:TextStyle(fontSize: 20,color: Colors.white)),)

                        ),
                      ),
                        SizedBox(height: 20,),
                        Row(mainAxisAlignment: MainAxisAlignment.center,
                          children: [

                          GestureDetector(onTap:(){},
                          child: Neumorphic(
                              style: NeumorphicStyle(
                                  shape: NeumorphicShape.convex,
                                  shadowLightColor: Colors.white38,
                                  shadowDarkColor:Colors.black,
                                  shadowLightColorEmboss: Colors.white,
                                  shadowDarkColorEmboss: Colors.black,
                                  boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(20)),
                                  depth: 8,
                                  lightSource: LightSource.topLeft,
                                  color: Color(0xf8282626)
                              ),
                              child: Container(width: 150,
                                padding: EdgeInsets.symmetric(vertical: 7,horizontal: 15),
                                alignment: Alignment.center,child:
                                Row(
                                  children: [Icon(Icons.local_atm,color: Colors.white,),
                                    Text(' WITHDRAW',style:TextStyle(fontSize: 17,color: Colors.white)),
                                  ],
                                ),)

                          ),
                        ), SizedBox(width: 20),
                          GestureDetector(onTap:(){},
                          child: Neumorphic(
                              style: NeumorphicStyle(
                                  shape: NeumorphicShape.convex,
                                  shadowLightColor: Colors.white38,
                                  shadowDarkColor:Colors.black,
                                  shadowLightColorEmboss: Colors.white,
                                  shadowDarkColorEmboss: Colors.black,
                                  boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(20)),
                                  depth: 8,
                                  lightSource: LightSource.topLeft,
                                  color: Color(0xf8282626)
                              ),
                              child: Container(width: 150,
                                padding: EdgeInsets.symmetric(vertical: 7,horizontal: 15),
                                alignment: Alignment.center,child:
                                Row(
                                  children: [Icon(Icons.workspaces_filled,color: Colors.white,),
                                    Text(' TRANSFER',style:TextStyle(fontSize: 17,color: Colors.white)),
                                  ],
                                ),)

                          ),
                        )],)
                    ],),
                  ),

【讨论】：