Flutter中.9.png图片显示异常：如何实现原生安卓同款效果？

Hey there, let's break down this issue and fix that distorted image scaling!

First, the root cause #

Flutter does not fully support Android's .9.png files natively. While it can load the image file itself, it completely ignores the stretch and content area markers that make .9.png so great for adaptive resizing. That's why when you adjust the width/height in Flutter, the whole image gets stretched unevenly, whereas native Android knows exactly which parts to scale and which to keep fixed.

Solutions to get the same adaptive scaling effect #

1. Use a third-party package for .9.png support

The easiest way to reuse your existing .9.png is to use a package built specifically for parsing those stretch markers. Try flutter_nine_patch—it handles the .9.png logic just like native Android. Here's how you'd use it:

NinePatchImage(
  image: AssetImage('images/launcher/border_highlight.9.png'),
  fit: NinePatchFit.stretch,
  width: yourTargetWidth,
  height: yourTargetHeight,
)

This will ensure only the marked regions of your image get stretched, keeping edges and corners crisp no matter the size.

2. Manually split the image (no third-party dependencies)

If you want to avoid adding a package, you can split your .9.png into 9 separate pieces:

• 4 fixed-size corners (top-left, top-right, bottom-left, bottom-right)
• 4 stretchable edges (top, bottom, left, right)
• 1 stretchable middle area

Then assemble them using Flutter's layout widgets to mimic .9.png behavior:

Container(
  width: 300, // Your target width
  height: 200, // Your target height
  child: Column(
    children: [
      // Top row: corner + stretchable edge + corner
      Row(
        children: [
          Image.asset('images/launcher/top_left.png'),
          Expanded(child: Image.asset('images/launcher/top_edge.png', fit: BoxFit.fill)),
          Image.asset('images/launcher/top_right.png'),
        ],
      ),
      // Middle row: stretchable edge + middle area + stretchable edge
      Expanded(
        child: Row(
          children: [
            Image.asset('images/launcher/left_edge.png', fit: BoxFit.fill),
            Expanded(child: Image.asset('images/launcher/middle.png', fit: BoxFit.fill)),
            Image.asset('images/launcher/right_edge.png', fit: BoxFit.fill),
          ],
        ),
      ),
      // Bottom row: corner + stretchable edge + corner
      Row(
        children: [
          Image.asset('images/launcher/bottom_left.png'),
          Expanded(child: Image.asset('images/launcher/bottom_edge.png', fit: BoxFit.fill)),
          Image.asset('images/launcher/bottom_right.png'),
        ],
      ),
    ],
  ),
)

This gives you full control over how each section scales, and works perfectly without any external packages.

3. Use Flutter's built-in decoration (for simple borders)

If your border is a solid color or simple gradient, you don't even need an image. Use BoxDecoration to draw the border directly:

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.orange, width: 3),
    borderRadius: BorderRadius.circular(10),
    // Add gradients or shadows if needed
  ),
)

This is the lightest solution, though it only works for non-image border styles.

Pick the approach that fits your workflow best—all of them will give you the adaptive scaling you're used to from native Android!

内容的提问来源于stack exchange，提问作者coder.john