Flutter开发：Card内Divider组件不显示问题求助

Hey Nathan, let's troubleshoot why that Divider isn't showing up inside your Card! I've run into this exact issue a few times, so here are the most common fixes to try:

1. Make sure your Divider has enough space to render #

The biggest culprit here is usually layout constraints. If you're placing the Divider inside a Row (instead of a Column), the Row won't automatically allocate width to the Divider—since Divider doesn't have an intrinsic width. In that case, wrap the Divider in an Expanded to let it fill the remaining space:

Card(
  child: Row(
    children: [
      Text("Administrative"),
      // Wrap Divider in Expanded to give it width
      Expanded(
        child: Divider(color: Colors.grey, thickness: 1),
      ),
      Text("Other content"),
    ],
  ),
)

2. Don't mix up thickness vs height (you might have adjusted the wrong property) #

You mentioned adjusting "dimensions" only increased spacing—this sounds like you were tweaking the height property instead of thickness.

• height: Controls the total vertical space the Divider takes up (the gap above and below the line)
• thickness: Controls the actual thickness of the divider line itself

If you set height but leave thickness too low (or use a color matching the Card background), you won't see the line. Try explicitly setting both for clarity:

Divider(
  color: Colors.black, // High contrast with Card's default white background
  thickness: 1.5, // Makes the line clearly visible
  height: 20, // Adds optional spacing around the line
)

3. Ensure the Divider isn't hidden by padding or layout constraints #

If you're using a Column inside the Card, wrap the Column in a Padding widget (with something like EdgeInsets.all(16)) to prevent the Divider from getting clipped. You can also set crossAxisAlignment: CrossAxisAlignment.start to keep your text aligned neatly:

Card(
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text("Administrative"),
        Divider(color: Colors.grey, thickness: 1),
        Text("Your remaining content here..."),
      ],
    ),
  ),
)

Give these a shot—chances are one of these fixes will get your Divider showing up properly!

内容的提问来源于stack exchange，提问作者Nathan Bird