Flutter中Container的BoxDecoration图片无法显示问题求助

1. 先确认本地资源配置 #

首先检查pubspec.yaml是否正确声明了assets资源，没配置的话本地图片根本加载不出来：

flutter:
  assets:
    - assets/pln.png
    - assets/logo_pln.png

2. 修正AppBar的图片加载错误 #

你在AppBar里用了Image.network加载本地资源，这是错的，应该换成Image.asset：

AppBar(
  title: SizedBox(
    height: 50,
    child: Image.asset('assets/logo_pln.png'), // 替换Image.network为Image.asset
  ),
)

3. 给横幅容器设置尺寸 #

原来的Container没有宽高，装饰图片自然显示不出来。要让它适配父组件宽度，同时设置合适的高度：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
  child: Container(
    width: double.infinity, // 占满父组件宽度
    height: 120, // 根据你的图片比例调整高度
    decoration: const BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/pln.png'),
        fit: BoxFit.cover, // 用cover比fill更不容易变形
      ),
    ),
  ),
)

4. 可选：优化布局避免溢出 #

如果页面内容超出屏幕，用SingleChildScrollView包裹Column，防止滚动溢出：

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        // 横幅图片、搜索框、按钮代码
      ],
    ),
  );
}

完整修正代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Widget build(BuildContext context) {
   return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
           title: SizedBox(
             height: 50,
             child: Image.asset('assets/logo_pln.png'),
           )
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatelessWidget {
  const MyCustomForm({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(
                padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
                child: Container(
                  width: double.infinity,
                  height: 120,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/pln.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
            ),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
              child: TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Masukkan ID Pelanggan',
                ),
              ),
            ),
            const Padding(
              padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
              child: ElevatedButton(
                onPressed: null,
                child: Text('Cari'),
              ),
            ),
          ]
      ),
    );
  }
}

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