Dart/Flutter跨文件调用Future报错：dart:ui找不到的解决方法

错误根源 #

1. 违反Flutter State管理规则：KenState是State子类，必须由Flutter框架通过Ken这个StatefulWidget的createState()方法创建，手动KenState kenstate = KenState()会导致上下文异常，且依赖Flutter UI库的代码无法在纯Dart环境运行。
2. 代码耦合严重：网络请求逻辑绑定在UI相关的State类中，既无法单独复用，还导致非UI场景下调用时触发Flutter依赖报错。
3. 运行环境不匹配：page1.dart里的main()是纯Dart程序入口，但引入了依赖dart:ui的Flutter库，纯Dart运行时没有这个底层UI库，因此抛出「Not found: 'dart:ui'」错误。

修复步骤 #

第一步：抽离网络请求为独立服务类 #

新建api_service.dart文件，把请求逻辑从State类中解耦出来：

import 'dart:convert';
import 'package:http/http.dart' as http;

class ApiService {
  Future<dynamic> fetchDd() async {
    // 注意：必须写完整URL，比如http://localhost:3000/api/xxx，否则会请求失败
    final daeUrl = "http://localhost:你的端口号/目标接口路径";
    final daeresponse = await http.get(Uri.parse(daeUrl));
    
    // 增加请求状态判断，处理异常情况
    if (daeresponse.statusCode == 200) {
      final daedata = jsonDecode(daeresponse.body);
      return daedata['de'];
    } else {
      throw Exception('请求失败，状态码：${daeresponse.statusCode}');
    }
  }
}

第二步：修改home.dart的State类 #

让KenState通过依赖注入使用ApiService，不再自行实现请求逻辑：

import 'package:flutter/material.dart';
import 'api_service.dart';

class Ken extends StatefulWidget {
  const Ken({Key? key}) : super(key: key);

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

class KenState extends State<Ken> {
  final ApiService _apiService = ApiService();
  dynamic _requestData;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    try {
      _requestData = await _apiService.fetchDd();
      setState(() {});
    } catch (e) {
      print('请求出错：$e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _requestData == null 
            ? const CircularProgressIndicator() 
            : Text('获取到的数据：$_requestData'),
      ),
    );
  }
}

第三步：在page1.dart中复用请求逻辑 #

直接使用ApiService，不再依赖State类，同时确保在Flutter环境运行：

import 'api_service.dart';
import 'package:flutter/material.dart';

Future<dynamic> timeHere() async {
  final apiService = ApiService();
  return await apiService.fetchDd();
}

// Flutter项目的正确入口，不要用纯Dart的main
void main() => runApp(const Page1App());

class Page1App extends StatelessWidget {
  const Page1App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FutureBuilder<dynamic>(
          future: timeHere(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Center(child: Text('请求结果：${snapshot.data}'));
            } else if (snapshot.hasError) {
              return Center(child: Text('错误：${snapshot.error}'));
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

关键注意事项 #

• 禁止手动实例化State类：State的生命周期完全由Flutter框架管理，手动创建会导致上下文丢失、状态异常等问题。
• 业务逻辑与UI分离：把网络请求、数据处理等非UI逻辑抽成独立服务类，提升代码复用性和可维护性。
• 匹配运行环境：Flutter代码必须在Flutter运行环境中执行，不能用纯Dart的dart run命令运行依赖Flutter UI库的代码。

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