user969068
user969068

Reputation: 2943

Draw lines with flutter

Is there any way to display skew borders at the top and bottom? I came up with the solution below by using two images (top_layout and bottom_layout.png). Is there any other way to make those color bars with shadows without using static images?

return Container(
      color: const Color.fromARGB(255, 236, 0, 140),
      child: Container(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          color: Colors.white,
          margin:
              EdgeInsets.only(top: 60.0, bottom: 20.0, left: 15.0, right: 15.0),
          child: Stack(
            children: <Widget>[
              Positioned.fill(
                child: Image.asset(
                  "assets/imgs/top_layout.png",
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.topCenter,
                ),
              ),
              Positioned.fill(
                child: Image.asset(
                  "assets/imgs/xbottom_layout.png",
                  fit: BoxFit.fitWidth,
                  alignment: Alignment.bottomLeft,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Upvotes: 23

Views: 48573

Answers (1)

Suragch
Suragch

Reputation: 511538

How do draw lines in Flutter using the CustomPaint widget

enter image description here

To paint in Flutter you use the CustomPaint widget. The CustomPaint widget takes a CustomPainter object as a parameter. In that class you have to override the paint method, which gives you a canvas that you can paint on. Here is the code to draw the line in the image above.

@override
void paint(Canvas canvas, Size size) {
  final p1 = Offset(50, 50);
  final p2 = Offset(250, 150);
  final paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 4;
  canvas.drawLine(p1, p2, paint);
}

Notes:

  • The drawLine method draws a line connecting the two points you give it.
  • An Offset is a pair of (dx, dy) doubles, offset from the top left corner of the CustomPaint widget.

Another option

You could do something similar with the drawPoints method using the PointMode.polygon option.

enter image description here

@override
void paint(Canvas canvas, Size size) {
  final pointMode = ui.PointMode.polygon;
  final points = [
    Offset(50, 100),
    Offset(150, 75),
    Offset(250, 250),
    Offset(130, 200),
    Offset(270, 100),
  ];
  final paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 4
    ..strokeCap = StrokeCap.round;
  canvas.drawPoints(pointMode, points, paint);
}

Context

Here is the main.dart code so that you can see it in context.

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

See also

See this article for my fuller answer.

Upvotes: 61

Related Questions