I’m using a StaggeredGridView.extentBuilder that adjusts its height automatically according to the data provided. However, when i resize the window, the positions of its items don’t update immediately. The layout only refreshes when I reload the page.

In the image blow, I’m currently on #1. When I enlarge the window, I expect the layout to show #2, But it’s actually showing #3. The only way to get it right is to reload the page. How can I properly handle this situation?

image

      body: StaggeredGridView.extentBuilder(
        maxCrossAxisExtent: 480,
        staggeredTileBuilder: (index) => StaggeredTile.fit(1),
        itemCount: _platformNames.length,
        itemBuilder: (context, index) {
          return _buildCard(_platformNames[index], index);
        },
      ),

  Widget _buildCard(String platformName, int index) {
    final selectedPlatform = platformName;
    return Card(
      key: ValueKey(platformName),
      elevation: 5,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          //card头部
          Container(
            decoration: BoxDecoration(
              color: Color.fromARGB(172, 211, 218, 220),
            ),
            //平台信息
            child: Row(
              children: [
                SizedBox(width: 10),
                Image.asset('assets/platforms/$platformName.jpg',
                    width: 27, height: 27),
                SizedBox(width: 10),
                Text(
                  platformName,
                  style: const TextStyle(
                      fontSize: 18, fontWeight: FontWeight.bold),
                ),
                Expanded(child: const SizedBox()),
                if (platformName == '洛谷')
                  IconButton(
                    onPressed: () async {
                      await getLuoguPlatformHelp(context);
                    },
                    icon: const Icon(Icons.help),
                  ),
                if (platformName == '牛客')
                  IconButton(
                    onPressed: () async {
                      await getNowcoderPlatformHelp(context);
                    },
                    icon: const Icon(Icons.help),
                  ),
                if (platformName == '力扣')
                  IconButton(
                    onPressed: () async {
                      await getLeetcodePlatformHelp(context);
                    },
                    icon: const Icon(Icons.help),
                  )
                else
                  Container(),
                IconButton(
                  onPressed: () {
                    _querySolvedNum(
                        platformName, _usernameControllers[platformName]!.text);
                  },
                  icon: const Icon(Icons.refresh),
                ),
              ],
            ),
          ),
          SizedBox(height: 13),
          // 输入框
          Row(
            children: [
              SizedBox(width: 10),
              Expanded(
                flex: 1,
                child: TextFormField(
                  controller: _usernameControllers[platformName],
                  enabled: _isLoading[platformName] == false,
                  // 使用对应的控制器
                  decoration: InputDecoration(
                    labelText:
                        selectedPlatform == '牛客' || selectedPlatform == '洛谷'
                            ? 'id'
                            : '用户名',
                    labelStyle: const TextStyle(color: Colors.grey),
                    floatingLabelStyle: const TextStyle(color: Colors.blue),
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.blue)),
                    suffixIcon: _usernameControllers[platformName]!.text.isEmpty
                        ? null
                        : IconButton(
                            onPressed: () {
                              setState(() {
                                _usernameControllers[platformName]!.clear();
                                _saveUsername(platformName, '');
                                _infoMessages[platformName] = '';
                              });
                            },
                            icon: Icon(Icons.highlight_off),
                          ),
                  ),
                  onChanged: (text) {
                    setState(() {
                      _platformSolvedNums[platformName] = 0;
                      _infoMessages[platformName] = '';
                    });
                    _saveUsername(platformName, text);
                  }, // 保存用户名
                ),
              ),
              SizedBox(width: 20),
            ],
          ),
          // 进度条
          if (_isLoading[platformName] == true)
            Row(
              children: [
                SizedBox(width: 10),
                Expanded(
                  child: LinearProgressIndicator(
                    backgroundColor: const Color.fromARGB(255, 126, 186, 213),
                    valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                  ),
                ),
                SizedBox(width: 20),
              ],
            )
          else
            const SizedBox(),
          //返回信息
          if (_infoMessages[platformName] != '')
            Text(
              _infoMessages[platformName]!,
              style: TextStyle(
                  fontSize: 16,
                  color: _infoMessages[platformName] != '查询失败，请检查网络或用户名是否正确'
                      ? Colors.green
                      : Colors.red),
              textAlign: TextAlign.center,
              maxLines: 2,
            )
        ],
      ),
    );
  }