Flutter中Divider组件无法显示的问题求助

我在Flutter应用中添加了Divider组件，但运行后看不到分割线。之前该组件能正常显示，做了一些修改后再次添加就无法显示了，不清楚原因，附上相关代码与截图。

相关代码 #

import 'package:flutter/material.dart';

class SettingScreen extends StatefulWidget {
  const SettingScreen({super.key});

  @override
  State<SettingScreen> createState() => _SettingScreenState();
}

class _SettingScreenState extends State<SettingScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
        children: [
          Container(
            width: double.infinity,
            height: 100,
            decoration: BoxDecoration(
                boxShadow: const [
                  BoxShadow(
                      color: Colors.black26,
                      blurRadius: 90,
                      offset: Offset(4, 9))
                ],
                gradient: LinearGradient(
                    colors: [
                      Color.fromARGB(255, 170, 148, 210),
                      Color.fromARGB(255, 65, 160, 195),
                      Color.fromARGB(255, 134, 174, 207),
                      Color.fromARGB(255, 155, 187, 212),
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.topRight,
                    stops: [0.2, 0.7, 0.9, 1.4])),
            child: Padding(
              padding: const EdgeInsets.all(18.0),
              child: Row(children: [
                Text(
                  "REL" + '\n' + "  ATE",
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 10,
                    letterSpacing: 20,
                  ),
                ),
                SizedBox(
                  width: 130,
                ),
                Icon(
                  Icons.skip_next_rounded,
                  color: Colors.white,
                  size: 50,
                ),
              ]),
            ),
          ),
          Stack(
            clipBehavior: Clip.none,
            children: [
              Container(
                width: 300,
                height: 522,
                decoration:
                    BoxDecoration(color: Colors.white, boxShadow: const [
                  BoxShadow(
                    color: Colors.black,
                    offset: Offset(1, 2),
                    blurRadius: 50,
                  )
                ]),
              ),
              Positioned(
                top: 10,
                right: 1,
                child: SizedBox(
                  child: Container(
                    // width: 500,
                    child: Column(
                      children: [
                        Text(
                          "SETTINGS",
                          style: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                              fontSize: 30,
                              letterSpacing: 18),
                        ),
                        Padding(
                          padding: EdgeInsets.only(right: 150, top: 10),
                          child: Text(
                            "ACCOUNT",
                            style: TextStyle(color: Colors.grey),
                          ),
                        ),
                        Divider(
                          color: Colors.grey,
                        )
                      ],
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      )),
    );
  }
}

问题原因及解决办法 #

问题出在Divider的宽度被限制：它所在的Column没有足够的宽度空间，因为外层的Container和SizedBox都未指定宽度，再加上Positioned设置了right:1，导致Divider宽度仅适配内部内容，肉眼几乎不可见。

提供三种解决思路：

1. 给Divider设置固定宽度
   直接指定Divider的宽度，匹配下方白色容器的尺寸：

Divider(
  color: Colors.grey,
  width: 280, // 可根据实际布局调整
)

2. 给包裹Column的Container设置宽度
   让Container宽度和下方白色容器一致（300），Column会自动占满宽度，Divider也会随之铺满：

Container(
  width: 300, // 添加该行
  child: Column(
    // 原有内容不变
  ),
)

3. 让Column子组件拉伸填满宽度
   给Column添加crossAxisAlignment: CrossAxisAlignment.stretch，强制子组件拉伸至可用宽度：

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    // 原有Text、Padding组件
    Divider(
      color: Colors.grey,
    )
  ],
)

如果Divider位置偏右，可调整Positioned的right参数，让内容对齐到合适位置。

内容的提问来源于stack exchange，提问作者Eain Hmun Khin