Flutter Web生产构建出现灰屏及minified错误码问题求助

开发Flutter Web应用时，生产构建下整个屏幕变灰，控制台报错：Another exception was thrown: Instance of 'minified:jI'，URL带有minified标识。页面整体显示在灰色框内，相关实现代码如下：

class StoreScreen1 extends StatefulWidget {
  final String uid; // Accept the user ID as a parameter

  StoreScreen1({required this.uid});

  @override
  _StoreScreen1State createState() => _StoreScreen1State();
}

class _StoreScreen1State extends State<StoreScreen1> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  TextEditingController searchController = TextEditingController();
  String _searchQuery = '';


  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    searchController.addListener(_onSearchChanged);
  }

  void _onSearchChanged() {
    setState(() {
      _searchQuery = searchController.text;
    });
  }

  @override
  void dispose() {
    searchController.removeListener(_onSearchChanged);
    searchController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  Stream<List<PetMarket>> _fetchPetsStream(String status) {
    return FirebaseFirestore.instance
        .collection('petMarketPet')
        .where('uid', isEqualTo: widget.uid) // Use the dynamic uid passed to the screen
        .where('status', isEqualTo: status)
        .snapshots()
        .map((snapshot) {
      return snapshot.docs.map((document) {
        var petData = document.data() as Map<String, dynamic>;
        return PetMarket(
          title: petData['title'] ?? '',
          date: (petData['date'] as Timestamp?)?.toDate() ?? DateTime.now(),
          location: petData['location'] ?? '',

          serviceType: petData['serviceType'] ?? '',
          imageUrl: List<String>.from(petData['imageUrl'] ?? []),
   
          paymentId: petData['paymentId'] ?? '',
          country: '',
          actuallocation: '',
        );
      }).toList()
        ..sort((a, b) => b.date.compareTo(a.date)); // Sort by date
    });
  }

  List<PetMarket> filterPets(String query, List<PetMarket> pets) {
    return pets.where((pet) {
      final locationMatch = pet.location.toLowerCase().contains(query.toLowerCase());
      final breedTypeMatch = pet.breedType.toLowerCase().contains(query.toLowerCase());
      final animalTypeMatch = pet.animalType.toLowerCase().contains(query.toLowerCase());
      return locationMatch || breedTypeMatch || animalTypeMatch;
    }).toList();
  }

  @override
  Widget build(BuildContext context) {

    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(

          title: Text('User Ads', style: TextStyle(color:  Colors.white )),
          leading: IconButton(
            icon: Icon(Icons.arrow_back, color:  Colors.white ),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'Published'),
              Tab(text: 'Unpublished'),
              Tab(text: 'await'),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            _buildPetList('published'),
            _buildPetList('unpublished'),
            _buildPetList('await'),
          ],
        ),
      ),
    );
  }

  Widget _buildPetList(String status) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            controller: searchController,
            decoration: InputDecoration(
              hintText: 'Search ads...',
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
              suffixIcon: Icon(Icons.search),
            ),
          ),
        ),
        Expanded(
          child: StreamBuilder<List<PetMarket>>(
            stream: _fetchPetsStream(status),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(child: CircularProgressIndicator());
              } else if (snapshot.hasError) {
                return Center(child: Text('Error: ${snapshot.error}'));
              } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
                return Center(child: Text('No ads found'));
              }

              List<PetMarket> filteredPets = filterPets(_searchQuery, snapshot.data!);

              return ListView.builder(
                itemCount: filteredPets.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(filteredPets[index].title),
                      subtitle: Text(filteredPets[index].location),
                      trailing: Text('${filteredPets[index].currency} ${filteredPets[index].price}'),
                      onTap: () {
                        // Navigate to the detailed view
                      },
                    ),
                  );
                },
              );
            },
          ),
        ),
      ],
    );
  }
}

修复方案 #

1. 补全未初始化的PetMarket字段 #

代码中filterPets方法用到了pet.breedType、pet.animalType，ListTile用到了pet.currency、pet.price，但在_fetchPetsStream的PetMarket构造中未给这些字段赋值，也没有默认值。生产构建的代码压缩会把空指针异常转为minified:jI这类模糊错误，这是核心问题。修改PetMarket初始化代码：

return PetMarket(
  title: petData['title'] ?? '',
  date: (petData['date'] as Timestamp?)?.toDate() ?? DateTime.now(),
  location: petData['location'] ?? '',
  serviceType: petData['serviceType'] ?? '',
  imageUrl: List<String>.from(petData['imageUrl'] ?? []),
  paymentId: petData['paymentId'] ?? '',
  country: '',
  actuallocation: '',
  breedType: petData['breedType'] ?? '', // 补全默认值
  animalType: petData['animalType'] ?? '', // 补全默认值
  currency: petData['currency'] ?? '', // 补全默认值
  price: petData['price'] ?? '', // 补全默认值
);

2. 移除重复的TabController冲突 #

代码同时使用了DefaultTabController和手动初始化的_tabController，会导致控制器冲突，引发UI异常。移除DefaultTabController，保留自定义的_tabController即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('User Ads', style: TextStyle(color: Colors.white )),
      leading: IconButton(
        icon: Icon(Icons.arrow_back, color: Colors.white ),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
      bottom: TabBar(
        controller: _tabController,
        tabs: [
          Tab(text: 'Published'),
          Tab(text: 'Unpublished'),
          Tab(text: 'await'),
        ],
      ),
    ),
    body: TabBarView(
      controller: _tabController,
      children: [
        _buildPetList('published'),
        _buildPetList('unpublished'),
        _buildPetList('await'),
      ],
    ),
  );
}

3. 临时禁用代码压缩排查（可选） #

如果问题仍未解决，可先关闭生产构建的代码压缩，获取清晰的错误信息：
在pubspec.yaml中添加配置：

flutter:
  build:
    web:
      release:
        dart2js_args: --no-minify

重新构建后查看控制台的具体错误，定位问题后再恢复压缩。

4. 优化搜索控制器的共享逻辑（可选） #

三个Tab页共用同一个searchController，虽然功能可用，但可能导致不必要的状态重绘。可以给每个_buildPetList单独创建搜索控制器，或者通过状态管理优化搜索状态的更新逻辑。

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