SizedBox(
                    height: size.height * 0.5,
                    child: Row(
                      children: [
                        Expanded(
                          flex: 2,
                          child: SizedBox(
                            height: size.height * 0.5,
                            child: Card(
                              margin: const EdgeInsets.fromLTRB(20, 0, 5, 10),
                              key: _cardKey,
                              shape: const RoundedRectangleBorder(
                                borderRadius: BorderRadius.all(
                                  Radius.circular(10),
                                ),
                              ),
                              elevation: 10.0,
                              color: Colors.white,
                              child: Padding(
                                padding:
                                    const EdgeInsets.only(left: 10, top: 10),
                                child: Row(
                                  crossAxisAlignment:
                                  CrossAxisAlignment.stretch,
                                  children: _numbers.map((int number) {
                                    counter  ;
                                    return CustomPaint(
                                      painter: BarPainter(
                                        width: cardSize!.width / sample,
                                        height: number,
                                        index: counter,
                                        size: cardSize,
                                      ),
                                    );
                                  }).toList(),
                                ),
                              ),
                            ),
                          ),
                        ),

I want the Row to be constrained inside the card, but it overflows, can anyone suggest why is this happening? Here is a picture of the problem.

CodePudding user response：

As pointed out in this issue flutter issue #31202 The CustomPainter can draw outside the canvas. One way you could limit this is by checking that the coordinates of the stuff you draw are inside the canvas.

Second method would be to wrap the CustomPaint inside a ClipRect to cut off everything outside the widgets boundary.

Edit: I just realised that you are using an individual painter for every line. I would use one painter/canvas for all lines that iterates over all numbers and draws the bars at once. This would also increase performance I guess.