flutter design Curves layout

Question

in flutter i know that we can draw line to design arc layout such as this below screen shot

but i just learn this feature on flutter and i can't design that, maybe in flutter we have some implemented library or source code like with that, but i can't find and design that

note that, white space between right of screen and curve is resizable on height and width and using customPaint not clipping widget

take a look at this tutorial : https://iirokrankka.com/2017/09/04/clipping-widgets-with-bezier-curves-in-flutter/ — diegoveloper, Jun 29 '19 at 20:47
i gave you a code for a very similar shape, whats unclear in it? — pskink, Jul 07 '19 at 07:50
so learn [Path](https://api.flutter.dev/flutter/dart-ui/Path-class.html) class official documentation — pskink, Jul 07 '19 at 07:51

score 6 · Accepted Answer · answered Jul 08 '19 at 10:17

Here is working example. Maybe you want any additional functionality - I think you can implement it. Anyway, CustomPainter works fine and widget changes when you drag button:

import 'dart:math' as math;

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  double _height = 0.0;
  double _width = 0.0;
  final double _minPadding = 24.0;
  double _rightPadding = 24.0;
  double _btnSize = 48.0;
  double _btnY = 0.0;
  double _currentX = 0.0;
  double _currentY = 0.0;

  @override
  Widget build(BuildContext context) {
    if (_height == 0.0)
      setState(() {
        _height = MediaQuery.of(context).size.height;
        _width = MediaQuery.of(context).size.width;
        _btnY = _height / 3 * 2;
      });
    return _height == 0.0
        ? Container()
        : Stack(
            children: <Widget>[
              Container(
                color: Colors.white,
              ),
              CustomPaint(
                size: Size(_width - _rightPadding, _height),
                painter: CurvedPainter(_btnSize, _btnY),
              ),
              Positioned(
                top: _btnY - _btnSize / 2,
                right: _rightPadding  - _minPadding / 2,
                child: GestureDetector(
                  onPanDown: (details) {
                    _currentX = details.globalPosition.dx;
                    _currentY = details.globalPosition.dy;
                  },
                  onPanStart: (details) {
                    _onDrag(details.globalPosition.dx, details.globalPosition.dy);
                  },
                  onPanUpdate: (details) {
                    _onDrag(details.globalPosition.dx, details.globalPosition.dy);
                  },
                  child: Material(
                    type: MaterialType.circle,
                    color: Colors.white,
                    elevation: 8.0,
                    child: Container(
                      width: _btnSize,
                      height: _btnSize,
                      child: IconButton(
                        icon: Icon(Icons.add),
                        onPressed: () {},
                        iconSize: _btnSize / 3,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          );
  }

  _onDrag(double x, double y) {
    double dx = _currentX - x;
    double dy = _currentY - y;
    _currentX = x;
    _currentY = y;
    setState(() {
      _rightPadding = _rightPadding + dx;
      _rightPadding = math.max(_rightPadding, _minPadding);
      _rightPadding = math.min(_rightPadding, _width - _btnSize);
      _btnY = _btnY - dy;
      _btnY = math.max(_btnY, _btnSize);
      _btnY = math.min(_btnY, _height - _btnSize);
    });
  }
}

class CurvedPainter extends CustomPainter {
  CurvedPainter(this.btnSize, this.btnY);

  final double btnSize;
  final double btnY;

  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();
    path.moveTo(0.0, 0.0);
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width, btnY - btnSize * 2);

    path.cubicTo(size.width, btnY - btnSize * 0.3,
        size.width - btnSize * 0.95, btnY - btnSize * 0.9,
        size.width - btnSize, btnY);
    path.cubicTo(size.width - btnSize * 0.95, btnY + btnSize * 0.9,
        size.width, btnY + btnSize * 0.3,
        size.width, btnY + btnSize * 2);

    path.lineTo(size.width, size.height);
    path.lineTo(0.0, size.height);
    path.lineTo(0.0, 0.0);
    canvas.drawPath(
        path,
        Paint()
          ..color = Colors.green
          ..style = PaintingStyle.fill);
  }

  @override
  bool shouldRepaint(CurvedPainter oldDelegate) =>
    oldDelegate.btnY != btnY;
}

(all the coefficients were found empiric way)

Thanks a lot, how to drag in single direction? that meas is when i drag vertical skip dragging horizontal or dragging horizontal skipping drag vertically — DolDurma, Jul 08 '19 at 12:42
Honestly, I'm not sure. But `GestureDetector` has many method - you can try `onVerticalDragUpdate`, `onHorizontalDragUpdate`, etc. — Andrii Turkovskyi, Jul 08 '19 at 12:50

flutter design Curves layout

1 Answers1

Linked