如何在VS Code中自定义Flutter无状态/有状态Widget模板，自动引入material.dart

当然可以！你完全不用再每次手动删除默认导入或者依赖快速修复了——直接自定义VS Code里的Flutter代码模板就能实现自动导入material.dart的需求，下面给你一步步说明：

• 找到Flutter模板文件的位置
  首先打开VS Code的扩展面板，找到Dart插件，查看它的版本号（比如3.70.0）。然后根据你的系统找到模板路径：

  • Windows：%USERPROFILE%\.vscode\extensions\dart-code.dart-code-<你的版本号>\templates
  • macOS/Linux：~/.vscode/extensions/dart-code.dart-code-<你的版本号>/templates
    替换路径里的<你的版本号>为实际的插件版本，就能找到包含stateless_widget.dart和stateful_widget.dart的文件夹。

• 修改Stateless Widget模板
  打开stateless_widget.dart文件，把原来的默认导入代码：

  import 'package:flutter/widgets.dart';
  import 'package:flutter/widgets.dart' show Container;
  

  直接替换成：

  import 'package:flutter/material.dart';
  

  保留模板里的其他内容（比如{{name}}类名占位符），保存文件即可。

• 修改Stateful Widget模板
  同样打开stateful_widget.dart文件，删除原来的两个默认导入，替换成import 'package:flutter/material.dart';，保存文件。

• 重启VS Code生效
  关闭并重新打开VS Code，之后再创建新的无状态/有状态Widget模板时，就会自动导入material.dart了。

额外提示：避免插件更新覆盖模板 #

如果Dart插件更新，默认模板会被重置，你可以把自定义模板存到VS Code的用户代码片段里，这样更持久：

• 打开VS Code命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入「User Snippets」并选择dart.json
• 添加自定义的Widget模板，比如：

  "Stateless Widget (Material)": {
      "prefix": "stless_material",
      "body": [
          "import 'package:flutter/material.dart';",
          "",
          "class ${1:MyWidget} extends StatelessWidget {",
          "  const ${1:MyWidget}({super.key});",
          "",
          "  @override",
          "  Widget build(BuildContext context) {",
          "    return const Scaffold(",
          "      body: Center(",
          "        child: Text('Hello World'),",
          "      ),",
          "    );",
          "  }",
          "}",
          ""
      ],
      "description": "Stateless Widget with Material import"
  },
  "Stateful Widget (Material)": {
      "prefix": "stful_material",
      "body": [
          "import 'package:flutter/material.dart';",
          "",
          "class ${1:MyWidget} extends StatefulWidget {",
          "  const ${1:MyWidget}({super.key});",
          "",
          "  @override",
          "  State<${1:MyWidget}> createState() => _${1:MyWidget}State();",
          "}",
          "",
          "class _${1:MyWidget}State extends State<${1:MyWidget}> {",
          "  @override",
          "  Widget build(BuildContext context) {",
          "    return const Scaffold(",
          "      body: Center(",
          "        child: Text('Hello World'),",
          "      ),",
          "    );",
          "  }",
          "}",
          ""
      ],
      "description": "Stateful Widget with Material import"
  }
  

  之后在Dart文件里输入stless_material或stful_material，就能快速生成带material.dart导入的自定义Widget了。

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