awesome_login_page/lib/views/my_header.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

/// Description: login header
/// Time       : 05/11/2023 Thursday
/// Author     : liuyuqi.gov@msn.cn
class MyHeader extends StatefulWidget {
  final String image;
  final String textTop;
  final String textBottom;
  final double offset;

  const MyHeader(
      {super.key,
      required this.image,
      required this.textTop,
      required this.textBottom,
      required this.offset});

  @override
  State<MyHeader> createState() => _MyHeaderState();
}

class _MyHeaderState extends State<MyHeader> {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: MyClipper(offset: widget.offset),
      child: Container(
        padding: const EdgeInsets.only(left: 40, top: 50, right: 20),
        height: 350,
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [
              Color(0xFF3383CD),
              Color(0xFF11249F),
            ],
          ),
          image: DecorationImage(
            image: AssetImage("assets/images/virus.png"),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            const SizedBox(
              height: 30,
            ),
            Expanded(
              child: Stack(
                children: [
                  Positioned(
                    top: 20 - widget.offset / 2,
                    left: 0,
                    child: SvgPicture.asset(
                      widget.image,
                      width: 270,
                      fit: BoxFit.fitWidth,
                      alignment: Alignment.bottomLeft,
                    ),
                  ),
                  Positioned(
                    top: 50 - widget.offset / 2,
                    left: 0,
                    child: Text(
                      "${widget.textTop} \n${widget.textBottom}",
                      style: const TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.w500,
                        color: Colors.white,
                      ),
                    ),
                  ),
                  Container(), // I dont know why it can work without container
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// Description: 自定义形状,弧线
///
class MyClipper extends CustomClipper<Path> {
  /// 偏移量
  final double offset;

  const MyClipper({required this.offset});

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height * 0.8);
    path.quadraticBezierTo(
        size.width / 2, size.height * 0.9, size.width, size.height * 0.8);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false;
  }
}