Question 309747 in Flutter Question posted in
The official Flutter documentation can be found here.

I want to draw an arrow in Flutter, but I just can't seem to fill the space

We produced arrows with this kind of code.
However, space is inevitably generated. How can we place the widget without generating space?
The tip of the arrow inevitably creates a space between it and the body.

class Line extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 100,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Align(
            alignment: Alignment.bottomRight,
            child: Transform.rotate(
              angle: pi / 4,
              child: Container(
                width: 16,
                height: 1,
                color: Colors.white,
              ),
            ),
          ),
          const Divider(color: Colors.white),
          Align(
            alignment: Alignment.bottomRight,
            child: Transform.rotate(
              angle: -pi / 4,
              child: Container(
                width: 16,
                height: 1,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

enter image description here

Tags:

3

Answers


  1. 0

    You can use the Transform.translate widget to to move the upper and lower angular lines. Here is the working code to achieve your desired output:

    class Line extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 100,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Transform.translate(
            offset: const Offset(2, 2.5),
            child: Align(
              alignment: Alignment.bottomRight,
              child: Transform.rotate(
                angle: pi / 4,
                child: Container(
                  width: 16,
                  height: 1,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          const Divider(color: Colors.black),
          Transform.translate(
            offset: const Offset(2, -2.5),
            child: Align(
              alignment: Alignment.bottomRight,
              child: Transform.rotate(
                angle: -pi / 4,
                child: Container(
                  width: 16,
                  height: 1,
                  color: Colors.black,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

    https://phpout.com/wp-content/uploads/2023/12/SNPwa.png

    Login or Signup to reply.
  2. 0 
    SizedBox( 
      width: 200,
      height: 100,
      child: Stack(
        alignment: Alignment.centerRight,
        children: [
          Align(
            alignment: Alignment.centerRight,
            child: Transform.rotate(
              angle: pi / 4,
              child: Container(
                width: 16,
                height: 1,
                color: Colors.white,
              ),
            ),
          ).paddingOnly(bottom: 10.5),
          const Divider(color: Colors.white).paddingSymmetric(horizontal: 3),
          Align(
            alignment: Alignment.centerRight,
            child: Transform.rotate(
              angle: -pi / 4,
              child: Container(
                width: 16,
                height: 1,
                color: Colors.white,
              ),
            ),
          ).paddingOnly(top: 10.5),
        ],
      ),
    ),
    Login or Signup to reply.
  3. 0

    I think you should use CustomPainter to draw an arrow. To make your task easy I added code below which can help you.

    We will draw an Arrow using following coordinates:

    enter image description here

    To draw above image we will create an ArrowPainter using CustomPainter

    class ArrowPainter extends CustomPainter{

    @override
    void paint(Canvas canvas,Size size){
        double width = size.width;
        double height = size.height;
        Paint paint = Paint();
        paint.color = Colors.black;
        //Draw Straight line using (x1,y1) and (x2,y2)
        double x1=0;
        double y1= height/2;
        double x2= width;
        double y2= y1;

        canvas.drawLine(Offset(x1,y1),Offset(x2,y2),paint);

        //Draw upper line using (x2,y2) and (x3,y3)
        double x3 = width-(width*0.20);
        double y3 = y2-(height*10);

        canvas.drawLine(Offset(x2,y2),Offset(x3,y3),paint);

        //Draw lower line using (x2,y2) and (x4,y4)
        double x4 = x3;
        double y4 = y2+(height*10);

        canvas.drawLine(Offset(x2,y2),Offset(x4,y4),paint);
    }
    
    @override
    bool shouldRepaint(covariant CustomPainter oldDelegate){
        return true;
    }
}

    Create an ArrowWidget:

    class ArrowWidget extends StatelessWidget{
    final double size;
    
    const ArrowWidget({super.key,this,size = 300});
    
    @overrride
    Widget build(BuildContext context){
        return SizedBox(
                width:size,
                height:size,
                child: CustomPaint(
                        foregroundPainter: ArrowPainter(),
                );       
        );
    }
}

    Now you can use ArrowWidget anywhere in you code.

    Note: I am using width=height to draw arrow. you can change above code as per your requirement. Also do import for required classes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search