Flutter中showModalBottomSheet打开后变量不实时更新问题求助

你遇到的核心问题有两个：

• showModalBottomSheet 弹出后，deliveryLocation2 更新时无法自动触发UI重建，必须热重载才显示新值
• 加载状态的UI（默认文本+进度指示器）没有和位置获取状态绑定，无法自动切换到结果

1. 重构 locationDetection 方法，让它真正处理加载/完成状态 #

原来的 FutureBuilder 不管快照状态都返回同一个child，完全没起到监听异步任务的作用。修改它，根据异步状态动态切换UI：

Widget locationDetection({required Future<String> locationFuture}) {
  return FutureBuilder<String>(
    future: locationFuture,
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        // 加载中：显示默认文本+进度指示器
        return Row(
          children: [
            const Text('Detecting Location...'),
            const SizedBox(width: 8),
            SizedBox(
              height: 25,
              width: 25,
              child: circularProgressIndicator(3),
            ),
          ],
        );
      } else if (snapshot.hasError) {
        return const Text('Error detecting location');
      } else {
        // 加载完成：显示实际位置，隐藏进度指示器
        return Text(snapshot.data ?? 'Unknown Location');
      }
    },
  );
}

2. 修改 chooseDeliveryLocation，在弹出BottomSheet时触发位置重新获取 #

在弹出BottomSheet的同时，重置deliveryLocation2并启动位置检测，确保BottomSheet能响应状态变化：

Future<dynamic> chooseDeliveryLocation() {
  // 重置位置状态
  setState(() {
    deliveryLocation2 = 'Detecting Location...';
  });
  // 启动位置检测任务
  final locationFuture = detectCurrentLocation();

  return showModalBottomSheet(
    backgroundColor: Colors.transparent,
    context: context,
    builder: (context) {
      Size size = MediaQuery.of(context).size;

      return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.white,
        ),
        height: size.height * 0.45,
        width: size.width,
        padding: const EdgeInsets.all(10),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              const Text(
                'Choose delivery location',
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const DeliveryLocation(
                icon: Icons.location_on_outlined,
                locationDetails:
                    'MVVM stands for Model-View-ViewModel. The basic idea is to create.',
                locationName: 'Home',
              ),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  // 点击时重新触发位置检测，完成后关闭BottomSheet
                  setState(() {
                    deliveryLocation2 = 'Detecting Location...';
                  });
                  detectCurrentLocation().then((_) {
                    Navigator.pop(context);
                  });
                },
                child: DeliveryLocation(
                  icon: Icons.my_location,
                  locationName: 'Deliver to current location',
                  // 用FutureBuilder绑定位置检测任务
                  locationDetails: locationDetection(locationFuture: locationFuture),
                ),
              ),
              const DeliveryLocation(
                icon: Icons.pin_drop_outlined,
                locationDetails:
                    'MVVM stands for Model-View-ViewModel. The basic idea is to create.',
                locationName: 'Deliver to different location',
              ),
            ],
          ),
        ),
      );
    });
}

3. 优化 detectCurrentLocation，去掉不必要的延迟（可选） #

如果Future.delayed是为了模拟加载可以保留，否则删掉避免不必要的等待：

Future<String> detectCurrentLocation() async {
  try {
    // 去掉不必要的延迟，或者保留用于测试
    // await Future.delayed(const Duration(seconds: 3));
    Position position = await _determinePosition();
    String location = await _getAddressFromLocation(position);

    setState(() {
      deliveryLocation1 = location;
      deliveryLocation2 = location;
    });

    return location;
  } catch (e) {
    if (kDebugMode) {
      print("Error detecting location: $e");
    }
    setState(() {
      deliveryLocation1 = "Unknown Location";
      deliveryLocation2 = "Unknown Location";
    });
    return "Unknown Location";
  }
}

4. 调整主界面的位置显示逻辑 #

简化主界面中TextButton的位置显示，直接绑定位置检测任务：

TextButton(
  onPressed: () {
    chooseDeliveryLocation();
  },
  child: Text.rich(
    TextSpan(
      children: <InlineSpan>[
        const TextSpan(
          text: 'Delivering to\n',
          style: TextStyle(color: Colors.black),
        ),
        WidgetSpan(
          child: locationDetection(locationFuture: detectCurrentLocation()),
        ),
      ],
    ),
  ),
),

• 让FutureBuilder真正发挥作用：根据异步任务的connectionState动态切换UI，加载时显示默认文本+进度指示器，完成后自动切换为实际位置
• 在弹出BottomSheet时立即触发位置检测，并把异步任务传递给BottomSheet内的UI，确保状态变化能实时反映
• 移除了原逻辑中无意义的child参数，让异步任务与UI绑定更直接

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