Flutter界面出现网格线如何去除？flutter clean操作无效

开发Flutter时遇到界面所有元素被蓝色网格线勾勒的问题，执行flutter clean并重新构建项目后问题仍存在。相关代码片段如下：

SizedBox(height: 10), // Adding some spacing between the two containers
    SingleChildScrollView(
      child: Container(
        width: 348,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(left: 20, top: 10),
              child: Transform.translate(
                offset: Offset(0, 8),
                child: Text(
                  "Basic Care",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            const SizedBox(height: 3),
            Row(
              children: [
                Expanded(
                  flex: 4,
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      "Reliable pediatric care within 15 minutes.",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Container(
                  width: 45,
                  height: 10,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.green, // Green color for the checkbox
                    border: Border.all(
                      color: Colors.green,
                      width: 1,
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(1.0),
                    child: Checkbox(
                      value: true,
                      onChanged: (value) {},
                      checkColor: Colors.white,
                      fillColor: MaterialStateProperty.all(Colors.green),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Text(
                    "Instant answers on WhatsApp by Pediatricians (8AM-10PM).",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 15,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 14,),
            Row(
              children: [
                Container(
                  width: 45,
                  height: 10,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.green, // Green color for the checkbox
                    border: Border.all(
                      color: Colors.green,
                      width: 1,
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(1.0),
                    child: Checkbox(
                      value: true,
                      onChanged: (value) {},
                      checkColor: Colors.white,
                      fillColor: MaterialStateProperty.all(Colors.green),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Text(
                    "Unlimited free pediatric consultaions (8AM - 10PM)",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 15,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 14,),
            Row(
              children: [
                Container(
                  width: 45,
                  height: 10,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.green, // Green color for the checkbox
                    border: Border.all(
                      color: Colors.green,
                      width: 1,
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(1.0),
                    child: Checkbox(
                      value: true,
                      onChanged: (value) {},
                      checkColor: Colors.white,
                      fillColor: MaterialStateProperty.all(Colors.green),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Text(
                    "Free postpartum yoga classes",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 15,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 14,),
            Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 25),
                    child: Text(
                      "₹999",
                      style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 25),
                    child: Text(
                      "Per Month",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 15,),
            Padding(
              padding: const EdgeInsets.only(left: 9),
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  primary: Color(0xFF9334EA),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  minimumSize: Size(330, 45),
                ),
                child: Text(
                  "Get Started",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 17,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              offset: Offset(0, 4),
              blurRadius: 4,
              spreadRadius: 2,
            ),
          ],
          border: Border.all(
            color: Colors.white,  // Set the border color to white
            width: 1,
          ),
        ),
      ),
    ),
    const SizedBox(height: 20),
    SingleChildScrollView(
      child: Container(
        width: 348,
        // height: 450,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(left: 20, top: 10),
              child: Transform.translate(
                offset: Offset(0, 8),
                child: Text(
                  "Basic Care",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            SizedBox(height: 3),
            Row(
              children: [
                Expanded(
                  flex: 4,
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      "Reliable pediatric care within 15 minutes.",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Container(
                  width: 45,
                  height: 10,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.green, // Green color for the checkbox
                    border: Border.all(
                      color: Colors.green,
                      width: 1,
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(1.0),
                    child: Checkbox(
                      value: true,
                      onChanged: (value) {},
                      checkColor: Colors.white,
                      fillColor: MaterialStateProperty.all(Colors.green),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Text(
                    "Instant answers on WhatsApp by Pediatricians (8AM-10PM).",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 15,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 14,),
            Row(
              children: [
                Container(
                  width: 45,
                  height: 10,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.green, // Green color for the checkbox
                    border: Border.all(
                      color: Colors.green,
                      width: 1,
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(1.0),
                    child: Checkbox(
                      value: true,
                      onChanged: (value) {},
                      checkColor: Colors.white,
                      fillColor: MaterialStateProperty.all(Colors.green),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Text(
                    "Unlimited free pediatric consultaions (8AM - 10PM)",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 15,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(height: 14,),
            Row(
              children: [
                Container(
                  width: 45,
                  height: 10,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.green, // Green color for the checkbox
                    border: Border.all(
                      color: Colors.green,
                      width: 1,
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(1.0),
                    child: Checkbox(
                      value: true,
                      onChanged: (value) {},
                      checkColor: Colors.white,
                      fillColor: MaterialStateProperty.all(Colors.green),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Text(
                    "Free postpartum yoga classes",
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 15,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 14,),
            Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 25),
                    child: Text(
                      "₹999",
                      style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 25),
                    child: Text(
                      "Per Month",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 10,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 15,),
            Padding(
              padding: const EdgeInsets.only(left: 9),
              child: ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  primary: Color(0xFF9334EA),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  minimumSize: Size(330, 50),
                ),
                child: Text(
                  "Get Started",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 17,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
  ],
),

界面表现为所有元素被蓝色网格线勾勒。

问题原因及解决方案 #

蓝色网格线是Flutter的调试布局边界功能，用于辅助开发者排查布局问题，并非代码或构建错误。以下是几种关闭方式：

• 通过开发工具关闭
  在Android Studio/VS Code的Flutter Inspector面板中，找到「Debug Paint」按钮（画笔图标），点击即可切换关闭状态。

• 通过代码关闭
  在项目的main.dart文件中，修改main函数：

  import 'package:flutter/rendering.dart';
  
  void main() {
    debugPaintSizeEnabled = false; // 关闭调试布局边界
    runApp(MyApp());
  }
  

• 通过快捷键关闭

  • Windows/Linux：按下Ctrl + Alt + P，在弹出窗口输入debugPaintSizeEnabled并设置为false
  • Mac：按下Cmd + Option + P，执行上述相同操作
  • VS Code：打开命令面板（Ctrl + Shift + P/Cmd + Shift + P），输入「Flutter: Toggle Debug Paint」切换状态

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