Flutter 用图像和文本设计颤振按钮

如果我只是将一个图像和一些文本放在一个圆角矩形中，用户将不知道他们可以“单击此处”。但我不必自己烘焙溶液。InkWell覆盖了这个场景，并有一个漂亮的阴影

我是 使用 类，其本身要求位于 例如

导入“包装：颤振/材料.省道”；
const boat_url=（'https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/'
“Segelboot_Bodensee_Mainau_%28Foto_Hilarmont%29.JPG/”
“182px-Segelboot_Bodensee_Mainau_%28Foto_Hilarmont%29.JPG”）；
void main（）{
runApp（材料应用程序）(
debugShowCheckedModeBanner:false，
标题：“图像”，
家：脚手架(
背景颜色：颜色。灰色，
正文：MyImage（），
)));
}
类MyImage扩展了无状态小部件{
MyImage（{Key，}）；
@凌驾
小部件构建（构建上下文）{
Size sz=MediaQuery.of（context）.Size*0.4；
双边框=4；
返回堆栈（子级：[
定位(
前100名，
左:100,，
宽度：sz.width，
高度：sz.height，
儿童：材料(
孩子：墨水(
装饰：盒子装饰(
boxShadow：[
新盒影(
颜色：颜色，红色，
半径：10.0，
偏移量：新偏移量（30.0,20.0），
),
],
边界：边界(
颜色：颜色，蓝色，
宽度：边框，
),
边界半径：边界半径。圆形（40），
),
孩子：InkWell(
onTap:（）{/*..*/}，
子：列(
儿童：[
容器(
高度：4*（深浅高度-2*边框）/5，
对齐：对齐.center，
子：Image.network（boat_url），
),
容器(
高度：（sz.高度-2*边框）/5，
孩子：FittedBox(
clipBehavior:Clip.antiAlias，
对齐：alignment.centerLeft，
适合度：BoxFit.fit高度，
child:Text（“一个长的描述性句子”），
)
],
)),
),
)),
]);
}
}

1-我实际上没有使用

颜色。白色

，脚手架本身有

背景色：颜色.灰色

。白色背景从哪里来

2-当我们谈论“影子”时，我期待着影子在后面 墨水/墨水池对象。为什么阴影出现在前面

---

相关：

白色来自Material小部件，可以使用type param删除

Material(
      type: MaterialType.transparency,
      child: Container(),
    );

下面是实现自定义按钮的代码

---

屏幕截图：

---

创建一个类，

ImageTextButton

：

class ImageTextButton扩展了无状态小部件{
最后一次按下按钮；
最终图像提供者图像；
最终双倍成像高度；
最终双半径；
最终小部件文本；
ImageTextButton({
@需要这个。按下按钮，
@需要这个图像，
此.imageHeight=200，
这个半径=28，
@需要此文本，
});
@凌驾
小部件构建（构建上下文）{
回程卡(
立面图：8，
形状：RoundedRectangleBorder（borderRadius:borderRadius.circular（radius）），
clipBehavior:Clip.hardEdge，
孩子：InkWell(
onTap:onPressed，
子：列(
mainAxisSize:mainAxisSize.min，
儿童：[
墨水图像(
图像：图像，
高度：图像高度，
适合：BoxFit.cover，
),
尺寸箱（高度：6），
文本，
尺寸箱（高度：6），
],
),
),
);
}
}

用法：

ImageTextButton(
按下：（）{}，
图片：AssetImage（“巧克力图片”），
text:text（“巧克力”），
)

I已更新，以包括

高程

和

半径

。

Material(
      type: MaterialType.transparency,
      child: Container(),
    );

Scaffold(
          backgroundColor: Colors.blueGrey,
          body: SafeArea(
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.green.shade200,
                  border: Border.all(color: Colors.green),
                  borderRadius: BorderRadius.circular(5),
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 5,
                      spreadRadius: 2,
                      color: Colors.black26,
                    )
                  ]),
              margin: const EdgeInsets.all(20),
              child: Material(
                type: MaterialType.transparency,
                child: InkWell(
                  onTap: () {},
                  splashColor: Colors.black26,
                  child: IntrinsicHeight(
                    child: Padding(
                      padding: const EdgeInsets.all(12.0),
                      child: Column(mainAxisSize: MainAxisSize.min, children: [
                        Image.asset(
                          'assets/images/marked_tyre_base.png',
                          fit: BoxFit.cover,
                          width: 80,
                          height: 80,
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Text(
                          'Tyre 1',
                          style: TextStyle(color: Colors.white),
                        )
                      ]),
                    ),
                  ),
                ),
              ),
            ),
          ),
        );