painting

readme.md

painting

Created with <3 with dartpad.dev.

main.dart

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

void main() {
  runApp(MyApp());
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke;

    // Create a gradient to apply to the paint object.
    final gradient = LinearGradient(
      colors: [
        Colors.blue.withOpacity(1.0),
        Colors.blue.withOpacity(0.0),
      ],
      stops: const [0.0, 1.0],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    );

    // Set the shader of the paint object to the gradient.
    paint.shader = gradient.createShader(
      Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        width: size.width,
        height: size.height,
      ),
    );

    final path = Path()
      ..moveTo(0, size.height / 2)
      ..arcToPoint(
        Offset(size.width, size.height / 2),
        radius: Radius.circular(size.width / 2),
        clockwise: false,
      );

    // Create a transformation matrix to rotate the curve in 3D space.
    final matrix = Matrix4.identity()
      ..setEntry(2, 3, 0.001)
      ..rotateX(60 * math.pi / 180);
    // ..rotateY(0 * math.pi / 180);

    canvas.transform(matrix.storage);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.white,
          body: Container(
            width: double.infinity,
            // padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Center(
              child: CustomPaint(
                size: const Size(double.infinity, 100),
                painter: CurvePainter(),
              ),
            ),
          )),
    );
  }
}