如何用颤振将一个容器夹在另一个容器上 (lofg)

我想构建一个可重用的卡片小部件,它将有一个带有一些自定义设计布局的图像和文本。我尽了一切可能,但未能达到预期的结果。任何帮助将不胜感激。

我想构建一个可重用的卡片小部件,它将有一个带有一些自定义设计布局的图像和文本。我尽了一切可能,但未能达到预期的结果。任何帮助将不胜感激。

This is what I want to do
This is what I want to do

I'm stuck here
I'm stuck here

这是我的代码

class ReusabelCard extends StatelessWidget {
      ReusabelCard(
          {this.cardChild, @required this.assetImagePath, @required this.cardText});
      final Widget cardChild;
      final String assetImagePath;
      final String cardText;
      @override
      Widget build(BuildContext context) {
        return Container(
            height: MediaQuery.of(context).size.height * 0.35,
            width: MediaQuery.of(context).size.width * 0.5,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(MediaQuery.of(context).size.width * 0.5 * 0.28),
            ),
            child: Stack(
              children: [
                LayoutBuilder(
                  builder: (context, contraint) {
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Icon(
                          Icons.trip_origin,
                          size: contraint.biggest.width,
                          color: Colors.grey[300],
                        ),
                        Container(
                          height: MediaQuery.of(context).size.height*0.05,
                          width: MediaQuery.of(context).size.width,
                          color: Colors.green,
                        ),
                      ],
                    );
                  },
                ),
              ],
            )
            
            );
      }
    }
3

使用ClipRRect执行此操作:

ClipRRect(
  borderRadius: BorderRadius.circular(50.0), //clipping the whole widget
  child: Container(
    height: MediaQuery.of(context).size.height * 0.4, //I adjusted here for responsiveness problems on my device
    width: MediaQuery.of(context).size.width * 0.5,
    color: Colors.white,
    child: LayoutBuilder(
      builder: (context, constraint) {
        return Stack(
          children: [
            Center(
              child: Icon(
                Icons.trip_origin,
                size: constraint.biggest.width,
                color: Colors.grey[300],
              ),
            ),
            Positioned(
              right: 0,
              left: 0,
              top: 20.0,
              child: Icon(
                Icons.sports_volleyball_rounded, //just to represent the ball
                size: constraint.biggest.width * 0.5,
              ),
            ),
            Positioned(
              bottom: 0.0,
              child: Container(
                alignment: Alignment.center,
                height: MediaQuery.of(context).size.height * 0.1,
                width: constraint.biggest.width,
                color: Colors.yellow[700],
                child: Text(
                  'Sports',
                  style: Theme.of(context)
                      .textTheme
                      .headline3
                      .copyWith(color: Colors.white),
                ),
              ),
            ),
          ],
        );
      },
    ),
  ),
);

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(40)
数量的 Java百分比
上一篇
Java中的蛇游戏-蛇离开空间
下一篇

相关推荐

  • 文件管理器在哪里:gnome更新管理器配置文件存储在哪里

    关于文件管理器在哪里的问题,在the gnome store中经常遇到,gnome update manager 配置文件位于哪里?我的目标是制作一个 shell 脚本,它将自动配置更新管理器,以便它执行每日更新,而不使用 ui。我主要只需要知道它们存储在哪里。…

    2022-12-01 12:13:11
    0 47 25
  • Dg分区:路由器访问在ArrisDG1670A上不起作用

    关于Dg分区的问题,在arris router remote access中经常遇到,不确定这是否仅用于编程,但无论如何我都会问。我有一个 Arris DG1670A 路由器,正在尝试设置远程访问。我没有像某些路由器那样启用远程访问的选项卡或部分。我尝试设置虚拟服务器 / 端口转发和端口触发器,这是我在路由器设置中看到的最接近远程访问的设置,但是当我检查我设置的端口是否在 canyouseemports.is 上打开时。…

    2022-12-10 06:15:00
    0 66 40
  • 如何在 log-logsns.regplot中实现直线回归线

    我试图在 Python 中重新创建这个用 R 创建的情节:…

    2022-12-12 01:16:38
    0 99 22
  • Nexus中的 Log4j新版本和旧版本

    我已经将 Log4j 从 2.10.0 版本升级到 2.16.0,并在 Jenkins 中发布了作业。我可以在从 Nexus 下载时看到旧版本和新版本。它将在构建时最新版本。如何删除旧版本?任何人都可以建议如何删除旧版本。…

    2022-11-11 15:16:42
    0 57 40
  • 将“page-break-before”应用于表行 (tr)

    根据 W3.org,样式page-break-after适用于块级元素(http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props)…

    2022-12-07 00:45:20
    0 68 73
  • 使用ggplot2在R中的 Barplot中的垂直平均线

    我对 R 很新,但我试图从 ggplot2 库中创建一个 barplot 中的垂直平均线。…

    2022-11-11 15:12:11
    0 44 31
  • wifi网页认证登录入口192.168.1.1192.168.1.1

    Wifi网页认证登录入口192.168.1.1,是一种技术,用于在无线网络上进行安全认证。它使用特定的协议,如802.1x,EAP(Extensible Authentication Protocol)和RADIUS(Remote Authentication Dial In User Service),来实现客户端认证。它的原理是,客户端向服务器发送认证请求,服务器根据客户端的凭据(如用户名和密码)进行认证,如果认证通过,则客户端可以访问服务器上的资源。以下是实现Wifi网页认证登录入口192.168.1.1的代码:…

    2023-05-29 01:13:04
    0 77 93

发表评论

登录 后才能评论

评论列表(28条)