Future builder return 值一直闪烁

Question

我有一个屏幕，其中有一个显示当前时间的容器，在该屏幕下有一个列表视图，其中包含具有不同区域及其相应时间的列表图块。我有一个获取位置时间的 Future 函数。问题是我用 future builder 包装的文本字段一直闪烁。它从 null 到 time 来回移动。我希望它继续重建以更新时间，但我如何消除闪烁问题。当我将 newTime 包装在 setState 中时，它 returns 为空。任何帮助将不胜感激

class _WorldClockState extends State<WorldClock> {


final WorldTimeController worldTimeController =
      Get.put(WorldTimeController());
  String formattedTime = DateFormat('h:mm').format(DateTime.now());
  String hour = DateFormat('a').format(DateTime.now());
  late Timer _timer;
  var location;
  var time;

  @override
  void initState() {
    super.initState();
    _timer =
        Timer.periodic(const Duration(milliseconds: 500), (timer) => _update());
  }

  void _update() {
    setState(() {
      formattedTime = DateFormat('h:mm').format(DateTime.now());
      hour = DateFormat('a').format(DateTime.now());
    });
  }

  var newUrl;
  var newResponse;

  getTime(location) async {
    newUrl = "http://worldtimeapi.org/api/timezone/$location";
    newResponse = await get(Uri.parse(newUrl));
    Map newData = jsonDecode(newResponse.body);
    var time = newData['datetime'];
    String dateTime = newData["utc_datetime"];
    String offset = newData["utc_offset"];
    DateTime now = DateTime.parse(dateTime);
    now = now.add(Duration(
        hours: int.parse(offset.substring(1, 3)),
        minutes: int.parse(offset.substring(4))));
    String newtime = DateFormat.jm().format(now);
    return newtime;
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: SingleChildScrollView(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 20.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(formattedTime,
                        style: GoogleFonts.lato(
                            fontSize: 80.0,
                            color: Colors.blue,
                            fontStyle: FontStyle.normal,
                            letterSpacing: 5.0)),
                    Padding(
                      padding: const EdgeInsets.only(top: 40.0, left: 5.0),
                      child: Text(
                        hour,
                        style: GoogleFonts.lato(
                          color: Colors.blue,
                          fontSize: 30.0,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                child: Text(
                  DateFormat('EE,  MMM d').format(DateTime.now()),
                  style: GoogleFonts.lato(
                    color: Colors.white,
                    fontSize: 20.0,
                    letterSpacing: 2.0,
                  ),
                ),
              ),
              const Padding(
                padding: EdgeInsets.only(top: 20.0, left: 30.0, right: 30.0),
                child: Divider(
                  color: Colors.white,
                  height: 2.0,
                ),
              ),
              Container(
                height: 600.0,
                width: 450.0,
                child: Padding(
                  padding: const EdgeInsets.only(top: 20.0),
                  child: ListView.builder(
                    scrollDirection: Axis.vertical,
                    physics: const BouncingScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: worldTimeController.WorldTimeList.length,
                    itemBuilder: (BuildContext context, index) => Padding(
                      padding: const EdgeInsets.only(bottom: 18.0),
                      child: Slidable(
                        key: UniqueKey(),
                        startActionPane: ActionPane(
                          motion: ScrollMotion(),
                          dismissible: DismissiblePane(onDismissed: () {
                            worldTimeController.WorldTimeList.removeAt(index);
                          }),
                          children: const [],
                        ),
                        child: ListTile(
                          leading: Text(
                              worldTimeController.WorldTimeList[index].location,
                              style: GoogleFonts.lato(
                                  color: Colors.white70, fontSize: 25)),
                          trailing: FutureBuilder(
                              future: getTime(worldTimeController
                                  .WorldTimeList[index].location),
                              builder: (context, AsyncSnapshot snapshot) {
                                return Text(
                                  '${snapshot.data}',
                                  style: GoogleFonts.lato(
                                      color: Colors.white70, fontSize: 35.0),
                                );
                              }),
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),

Answer 1

替换你的 Future Func

 FutureBuilder(
                          future: getTime(worldTimeController.WorldTimeList[index].location),
                          initialData:"",
                          builder: (context, AsyncSnapshot snapshot) {
                            return Text(
                              '${snapshot?.data??""}',
                              style: GoogleFonts.lato(
                                  color: Colors.white70, fontSize: 35.0),
                            );
                          }),

Answer 2

我通过删除包装未来构建器的可滑动小部件修复了错误，不知道为什么会导致错误

Future builder return 值一直闪烁

Future builder return value keeps blinking

flutter

setstate

flutter-getx