You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter实现单张垂直卡片与两组堆叠卡片等高并适配小屏

Flutter 卡片布局适配需求及问题

需求说明:

  • 左侧单张垂直卡片的高度,与右侧两组(每组包含两张垂直堆叠卡片)的总高度相等
  • 右侧每组内的两张卡片高度保持一致

遇到的问题:
使用IntrinsicHeight组件在部分屏幕尺寸下能达成预期布局,但在小屏设备中会出现文本溢出的情况。

当前实现代码:

@override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        crossAxisAlignment:
            CrossAxisAlignment.stretch, //dikey kart aşağı doğru çeksin diye

        children: [
          // Dikey Kart
          Expanded(
            flex: 1,
            child: FadeInRight(
              child: Container(
                padding: const EdgeInsets.all(5),
                child: Card(
                  elevation: 4,
                  child: Card(
                    child: DottedBorder(
                      radius: Radius.circular(10),
                      borderType: BorderType.RRect,
                      dashPattern: [3, 2],
                      strokeWidth: 1.5,
                      color: cayirblue,
                      child: Center(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            AspectRatio(
                              aspectRatio: 1.5, // İkonun kare olmasını sağlar
                              child: SvgPicture.asset(
                                "assets/images/icons/odeme.svg",
                                colorFilter: ColorFilter.mode(
                                    cayirblue, BlendMode.srcIn),
                                fit: BoxFit.contain,
                              ),
                            ),
                            Container(
                              alignment: Alignment.center,
                              padding:
                                  const EdgeInsets.only(top: 10, bottom: 5),
                              child: Text(
                                "Belediye'ye ait borçlarınızı ödemek için tıklayınız",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                    fontSize: 10,
                                    color: cayirblue,
                                    fontWeight: FontWeight.bold),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          // İki Sütun Kartlar
          Expanded(
            flex: 1,
            child: IntrinsicHeight(
              child: Column(
                children: [
                  // İlk Kart nöbetçi eczane
                  FadeInLeft(
                    child: Container(
                      padding: EdgeInsets.all(5),
                      child: Card(
                        child: Card(
                          child: DottedBorder(
                            radius: Radius.circular(10),
                            borderType: BorderType.RRect,
                            dashPattern: [3, 2],
                            strokeWidth: 1.5,
                            color: cayirblue,
                            child: Container(
                              padding: EdgeInsets.only(top: 5),
                              child: Column(
                                children: [
                                  AspectRatio(
                                    aspectRatio: aspectRatio,
                                    child: SvgPicture.asset(
                                      "assets/images/icons/eczane.svg",
                                      colorFilter: ColorFilter.mode(
                                          cayirblue, BlendMode.srcIn),
                                      fit: BoxFit.contain,
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        top: 10, bottom: 5),
                                    child: FittedBox(
                                      child: Text(
                                        "Nöbetçi Eczaneler",
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                            fontSize: 10,
                                            color: cayirblue,
                                            fontWeight: FontWeight.bold),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),

                  // İkinci Kart E-Kent
                  FadeInLeft(
                    child: Container(
                      padding: EdgeInsets.all(5),
                      child: Card(
                        child: Card(
                          child: DottedBorder(
                            radius: Radius.circular(10),
                            borderType: BorderType.RRect,
                            dashPattern: [3, 2],
                            strokeWidth: 1.5,
                            color: cayirblue,
                            child: Container(
                              padding: EdgeInsets.only(top: 5),
                              child: Column(
                                children: [
                                  AspectRatio(
                                    aspectRatio: aspectRatio,
                                    child: SvgPicture.asset(
                                      "assets/images/icons/kent.svg",
                                      colorFilter: ColorFilter.mode(
                                          cayirblue, BlendMode.srcIn),
                                      fit: BoxFit.contain,
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(
                                        top: 10, bottom: 5),
                                    child: Text(
                                      "E-Kent",
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 10,
                                          color: cayirblue,
                                          fontWeight: FontWeight.bold),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Column(
              children: [
                // Üçüncü Kart E-İmar
                FadeInRight(
                  child: Container(
                    padding: EdgeInsets.all(5),
                    child: Card(
                      child: Card(
                        child: DottedBorder(
                          radius: Radius.circular(10),
                          borderType: BorderType.RRect,
                          dashPattern: [3, 2],
                          strokeWidth: 1.5,
                          color: cayirblue,
                          child: Container(
                            padding: EdgeInsets.only(top: 5),
                            child: Column(
                              children: [
                                AspectRatio(
                                  aspectRatio: aspectRatio,
                                  child: SvgPicture.asset(
                                    "assets/images/icons/imar.svg",
                                    colorFilter: ColorFilter.mode(
                                        cayirblue, BlendMode.srcIn),
                                    fit: BoxFit.contain,
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.only(top: 10, bottom: 3),
                                  child: Text(
                                    "E-İmar",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontSize: 10,
                                        color: cayirblue,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),

                // Dördüncü Kart Beyan ve Takip
                FadeInRight(
                  child: Container(
                    padding: EdgeInsets.all(5),
                    child: Card(
                      child: Card(
                        child: DottedBorder(
                          radius: Radius.circular(10),
                          borderType: BorderType.RRect,
                          dashPattern: [3, 2],
                          strokeWidth: 1.5,
                          color: cayirblue,
                          child: Container(
                            padding: EdgeInsets.only(top: 5),
                            child: Column(
                              children: [
                                AspectRatio(
                                  aspectRatio: aspectRatio,
                                  child: SvgPicture.asset(
                                    "assets/images/icons/beyan.svg",
                                    colorFilter: ColorFilter.mode(
                                        cayirblue, BlendMode.srcIn),
                                    fit: BoxFit.contain,
                                  ),
                                ),
                                Padding(
                                  padding:
                                      const EdgeInsets.only(top: 10, bottom: 7),
                                  child: Text(
                                    "Beyan ve Takip",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        fontSize: 10,
                                        color: cayirblue,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

内容的提问来源于stack exchange,提问作者enes durmuş

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 23:20:54