Wave Background Flutter Assistance

Question

I have been struggling with this problem for the past 3ish days. Basically, I want the homepage of my app to have a wavelike pattern at the bottom of the screen. It is similar to this:

However, I want my version of the wave to look like this:

How would I do this in flutter? I don't want to manually draw it and then use it as a jpg or png, I want to make it using containers or something native to flutter. Thanks!

go to online shape maker for flutter create wave shape and copy the code from that use it in your project — Munsif Ali, Apr 03 '23 at 01:55

Niladri Raychaudhuri · Accepted Answer · 2023-04-03T03:00:07.703

Register and use this online tool to generate the curve.

https://fluttershapemaker.com

Watch this video to get an idea, how to use the tool

shapemaker video tutorial

Finally generate the class from the tool and use it.

Here is a sample code

import 'package:flutter/material.dart';

class RPSCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint0 = Paint()
      ..color = const Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;

    Path path0 = Path();
    path0.moveTo(size.width * 0.0029500, size.height * 0.5714286);
    path0.quadraticBezierTo(size.width * 0.0394500, size.height * 0.5007143,
        size.width * 0.0999500, size.height * 0.5000000);
    path0.quadraticBezierTo(size.width * 0.1583100, size.height * 0.5003571,
        size.width * 0.2039500, size.height * 0.5685714);
    path0.quadraticBezierTo(size.width * 0.2407000, size.height * 0.5006429,
        size.width * 0.2999800, size.height * 0.4993571);
    path0.quadraticBezierTo(size.width * 0.3602400, size.height * 0.5010714,
        size.width * 0.4003700, size.height * 0.5700000);
    path0.quadraticBezierTo(size.width * 0.4403600, size.height * 0.5012714,
        size.width * 0.5000700, size.height * 0.5000000);
    path0.quadraticBezierTo(size.width * 0.5604700, size.height * 0.5002286,
        size.width * 0.6011100, size.height * 0.5695857);
    path0.quadraticBezierTo(size.width * 0.6403500, size.height * 0.5004429,
        size.width * 0.7000400, size.height * 0.4998714);
    path0.quadraticBezierTo(size.width * 0.7604000, size.height * 0.4992857,
        size.width * 0.8011100, size.height * 0.5671429);
    path0.quadraticBezierTo(size.width * 0.8406100, size.height * 0.4996429,
        size.width * 0.9002000, size.height * 0.5000000);
    path0.quadraticBezierTo(size.width * 0.9602000, size.height * 0.4982143,
        size.width * 1.0029500, size.height * 0.5685714);
    path0.cubicTo(
        size.width * 0.7529500,
        size.height * 0.5692857,
        size.width * 0.7529500,
        size.height * 0.5692857,
        size.width * 0.0029500,
        size.height * 0.5714286);
    path0.close();

    canvas.drawPath(path0, paint0);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

Add this to widget tree

@override
  Widget build(BuildContext context) {
    double curveWidth = MediaQuery.of(context).size.width;
    return Scaffold(
        body: Column(children: [
      //
      CustomPaint(
        size: Size(
            curveWidth,
            (curveWidth * 0.7)
                .toDouble()), //You can Replace [curveWidth] with your desired width for Custom Paint and height will be calculated automatically
        painter: RPSCustomPainter(),
      ),
    ]));
  }

Thank you so much for responding! I managed to figure it out using chatgpt (to generate the curves). It took like 2 hours but chatgpt saved me so much. I will however mark your answer as accepted because if I didn't use ai to generate the code this answer would have helped a ton. Thanks! (PS: The video and online tool were SUPER helpful and I will be using them in the future) — Promaster, Apr 03 '23 at 02:51

Wave Background Flutter Assistance

1 Answers1

Linked