Flutter4fun UI Challenge 1 - Curved Line Gradient

main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }

}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0x060524),
      body: Center(
        child: Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 40),
            child: CurvedLineWidget(),
          ),
        ),
      ),
    );
  }
}

class CurvedLineWidget extends StatelessWidget {

  final double curveHeight;

  const CurvedLineWidget({Key key, this.curveHeight = 20}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: _CurvedLineCustomPainter(curveHeight),
      size: Size(double.infinity, 100),
    );
  }

}

class _CurvedLineCustomPainter extends CustomPainter {

  final double curveHeight;

  Paint linePaint = Paint()
    ..color = Colors.lightBlueAccent
    ..style = PaintingStyle.stroke..strokeWidth = 8
    ..strokeCap = StrokeCap.round;

  Paint glowAreaPaint = Paint()
    ..style = PaintingStyle.stroke
    ..strokeWidth = 2;

  _CurvedLineCustomPainter(this.curveHeight);

  @override
  void paint(Canvas canvas, Size size) {

    final point1 = Offset(0, size.height / 2);
    final point2 = Offset(size.width , size.height / 2);
    final controlPoint = Offset((point2.dx - point1.dx) / 2, (size.height / 2) - (curveHeight * 2));

    Path linePath = new Path();
    linePath.moveTo(point1.dx, point1.dy);
    linePath.quadraticBezierTo(controlPoint.dx, controlPoint.dy, point2.dx, point2.dy);

    Path glowAreaPath = Path.from(linePath);
    glowAreaPath.lineTo(point2.dx, point2.dy + 40); // step 1
    glowAreaPath.lineTo(point1.dx, point1.dy + 40); // step 2
    glowAreaPath.lineTo(point1.dx, point1.dy); // step3

    Paint glowAreaPaint = Paint()
      ..shader = ui.Gradient.linear(
        Offset(size.width / 2, (size.height / 2) - curveHeight),
        Offset(size.width / 2, point1.dy + 40),
        [
          Colors.blueAccent.withOpacity(0.4),
          Colors.blueAccent.withOpacity(0)
        ]
      );

    canvas.drawPath(glowAreaPath, glowAreaPaint);
    canvas.drawPath(linePath, linePaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;

}

View it in dartPad