Flutter中的Netflix编号

r8uurelv  于 2023-04-07  发布在  Flutter
关注(0)|答案(1)|浏览(110)

bounty将在2天后过期。回答此问题可获得+50声望奖励。FTF Studio正在寻找来自信誉良好的来源的答案

我想做这个用户界面,但似乎真的很难。卡片图像上有数字和阴影。

jyztefdp

jyztefdp1#

下面是示例代码,如果你愿意,你可以做更多的配置

ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.vertical,
                    itemCount: 5,
                    itemBuilder: (context, index) {
                      return Container(
                        height: 200,
                        width: 200,
                        child: Stack(
                          children: [
                            Image.network(
                              'https://picsum.photos/250?image=$index',
                              fit: BoxFit.fill,
                            ),
                            Align(
                              alignment: Alignment.bottomLeft,
                              child: Stack(
                                children: <Widget>[
                                  // Stroked text as border.
                                  Text(
                                    "${index + 1}",
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 100,
                                      shadows: [
                                        Shadow(
                                          blurRadius: 10.0,
                                          color: Colors.grey.shade600,
                                          offset: const Offset(5, 5),
                                        ),
                                        // font size and color of the text
                                      ],
                                      foreground: Paint()
                                        ..style = PaintingStyle.stroke
                                        ..strokeWidth = 6
                                        ..color = Colors.grey.shade500,
                                    ),
                                  ),
                                  // Solid text as fill.
                                  Text(
                                    "${index + 1}",
                                    style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 100,
                                      color: Colors.black,
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      );
                    },
                  )

输出如下所示

相关问题