flutter arrow on Column children

Question

hi guys! I'm facing this issue with Column Widget,

when I debug my app and open the page it pauses the debug process and gives me this arrow on text Widget I tried to write Fixed "String" value and still giving me this arrow in the same place
the arrow on Text widget
and I removed the entire widget but the arrow moved to the next widget witch is Row widget
when I removed the widget
I hope you can help me

• 1- no null values
• 2- no overlays

the code

class ProductScreenBody extends StatelessWidget {
  final String productReturn;
  final int price;
  final int delivery;
  final String deliveryTime;
  final String name;
  final String describtion;
  final String image;
  final String categoryPath;
  final String warranty;
  ProductScreenBody(
      {Key? key,
      required this.warranty,
      required this.price,
      required this.productReturn,
      required this.delivery,
      required this.deliveryTime,
      required this.name,
      required this.image,
      required this.categoryPath,
      required this.describtion})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ScreenHeight = MediaQuery.of(context).size.height;
    final ScreenWidth = MediaQuery.of(context).size.width;
    return Container(
      height: ScreenHeight,
      child: Column(
        children: [
          Container(
            width: ScreenWidth,
            margin: EdgeInsets.all(10),
            padding: EdgeInsets.all(15),
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(30)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  describtion,
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                ),
                Text(categoryPath,
                    style: TextStyle(
                        color: Colors.grey, fontWeight: FontWeight.bold)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    ProductRating(),
                    Text(
                      "(5/5)",
                    ),
                    Text(" Ordered (" + 122.toString() + ") times.",
                        style: TextStyle(
                            color: Colors.grey, fontWeight: FontWeight.bold))
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

Haha, that's a step arrow, see the red dot on the line above the arrow? that's a breakpoint, you added it by clicking on the place where the breakpoint now is,

A breakpoint is a debugging tool to stop execution of a program halfway through said program, in your case, you told vscode you wanted to stop execution on line 169, but line 169 only has a parenthesis, which means there is nothing to execute on that line, so instead, execution stops on the next line, which is your Text widget's line.

The arrow signifies the current point of your program, as I said, the breakpoint tells the program to stop, so the program stops at the Text widget's line and vscode shows you the arrow so you know the program stopped.

To remove the arrow, you can either remove the breakpoint (by clicking the red dot again) and execute the program again (or hot-reload or full-restart the program), or you can press the continue button on your debugging board.

Your debugging board is a bunch of buttons that appear while you are debugging, if the arrow is visible, your debugging board should look like this:

You should be able to see it on the top right corner of vscode while debugging (it isn't visible while the program isn't running)

The "play" button will continue execution until you reach another breakpoint, you can also use the "next line button" (the button directly to the right of the "play" button) to execute the line with the arrow on it, conversely moving the arrow into the next executable line.

Android studio also has this feature and it works the same way, although the visuals might be different.