Android Studio 凸起图像抖动卡

mwyxok5s 于 2023-03-03 发布在 Android

关注(0)|答案(2)|浏览(145)

我是新flutter和我想创建简单的设计菜单应用程序，如下图所示...我尝试下面的代码，但它没有给予相同的设计，有什么办法实现它？Image Here

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text("Card over stack"),
    ),
    body: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.topCenter,
          child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
                color: Colors.lightBlueAccent),
            height: 100,
          ),
        ),
        Positioned(
          top: 60,
          right: 10,
          left: 10,
          child: Card(
            child: ListTile(
                leading: SizedBox(
                    height: 150.0,
                    width: 150.0, // fixed width and height
                    child: Image.asset("assets/images/test.png"))),
          ),
        ),
      ],
    ),
  ),
);

android-studio

来源：https://stackoverflow.com/questions/75600441/raising-image-flutter-card

2条答案

按热度按时间

ncgqoxb01#

在Material中包含Card，给予1的elevation

Material(
elevation: 1,//👈 This will help for the elevation
child: Card(
            child: ListTile(
                leading: SizedBox(
                    height: 150.0,
                    width: 150.0, // fixed width and height
                    child: Image.asset("assets/images/test.png"))),
          ),
);

赞(0）回复(0）举报 2023-03-03

wwwo4jvm2#

试试这个：

Scaffold(
      appBar: AppBar(
        title: Text("Card over stack"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 20,
              left: 40,
              right: 0,
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    color: Colors.lightBlueAccent,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.shade300,
                        blurRadius: 5,
                        spreadRadius: 2,
                        offset: const Offset(4, 4),
                      )
                    ]),
                height: 150,
                child: Padding(
              padding: const EdgeInsets.only(left: 75),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('abcdefghiklmn'),
                  Text('abcdefghiklmn'),
                  Text('abcdefghiklmn'),
                  Text('abcdefghiklmn'),//code any here
                ],
              ),
            ),
              ),
            ),
            Positioned(
              top: 0,
              child: Container(
                height: 150,
                width: 100,
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.shade200,
                      blurRadius: 5,
                      spreadRadius: 2,
                      offset: const Offset(-3, -3),
                    )
                  ],
                  borderRadius: const BorderRadius.all(Radius.circular(20)),
                ),
                child: ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(20)),
                  child: Image.asset(
                    'assets/images/test.png',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

这是我的结论：

赞(0）回复(0）举报 2023-03-03

我来回答

Android Studio 凸起图像抖动卡

2条答案

相关问题

热门标签

最新问答