Flutter开发中如何在main.dart调用其他Dart文件的多个Widget

步骤1：确认导出文件的Widget定义 #

Adobe XD导出的dart文件默认会生成独立的可复用Widget类，你可以打开background.dart确认文件内有类似如下的类定义（其余两个按钮文件同理）：

import 'package:flutter/material.dart';

// 类名一般和文件名对应，驼峰命名
class Background extends StatelessWidget {
  const Background({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      // 这里就是你之前复制到main.dart的所有Container相关代码
    );
  }
}

步骤2：在main.dart中导入目标文件 #

在main.dart的顶部导入三个组件文件，导入路径根据文件存放的相对位置调整：

• 如果三个文件和main.dart同放在lib根目录：

// main.dart顶部添加导入代码
import 'background.dart';
import 'applebutton.dart';
import 'googlebutton.dart';

• 如果三个文件统一放在lib下的widgets子目录：

import 'widgets/background.dart';
import 'widgets/applebutton.dart';
import 'widgets/googlebutton.dart';

步骤3：直接调用对应Widget #

替换之前粘贴的Container代码，直接使用对应类名生成组件即可：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: const [
            // 直接调用Background组件，无需粘贴内部代码
            Background(),
            // 其余按钮组件按需调用即可
            AppleButton(),
            GoogleButton(),
          ],
        ),
      ),
    );
  }
}

常见问题排查 #

• 如果导入路径报错，可右键点击目标dart文件，选择Copy Path/Reference获取相对lib目录的正确路径
• 如果调用时提示类不存在，打开对应dart文件确认最外层的类名，使用文件内定义的实际类名即可

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