How to use Cascade(..) Operator in Flutter

How to use Cascade(..) Operator in Flutter

In this guide, we will discuss how to implement a Cascade Operator in a flutter. For this, we should know some basic information about what a Cascade Operator in flutter is. Cascades (..) allow you to perform a sequence of operations on the same object. The Cascades notation(..) is similar to method chaining that saves you a number of steps and the need for temporary variables. The cascade notation is denoted by the (..) symbol. we can keep dart code neat & clean as it removes unnecessary temporary variable creation to store data.

Now let’s take an example of how we can implement the cascade operator in the dart first and later on we will discuss implementing it on the flutter application.

class Demo {
  var a;
  var b;
  void setA(x) {
    this.a = x;
  }

  void setB(y) {
    this.b = y;
  }

  void showVal() {
    print(this.a);
    print(this.b);
  }
}
void main() {
  Demo d1 = new Demo();
  Demo d2 = new Demo();

  d1
    ..setA(20)
    ..setB(25)
    ..showVal();

d2
    ..setA(10)
    ..setB(15)
    ..showVal();
}

In the above example, we have two objects created in a single class and we are calling three methods that are present in the above class. When we call the three methods on the object instance d1, we are explicitly typing the name of the object three times followed by the dot notation and the call to methods.

In the second case, the d2 is written only once and we made use of the cascade operator to call the methods we want.

It should be noted that we can’t have semicolons(;) between the consecutive method calls as it will confuse the compiler and we will get an error.

Now We will implement the flutter application for these we are using a custom painter in order to draw the rectangle and triangle with the help of a cascade operator.

import 'package:flutter/material.dart';

class CascadeScreen extends StatefulWidget {
  const CascadeScreen({Key? key}) : super(key: key);

  @override
  State<CascadeScreen> createState() => _CascadeScreenState();
}

class _CascadeScreenState extends State<CascadeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.redAccent,
      appBar: AppBar(
        title: const Text('CasCade Operator'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Container(
            margin: const EdgeInsets.symmetric(
              vertical: 20,
              horizontal: 20,
            ),
            color: Colors.white,
            width: 350,
            height: 350,
            child: CustomPaint(
              painter: RectanglePainter(),
            ),
          ),
          Container(
            margin: const EdgeInsets.symmetric(
              vertical: 20,
              horizontal: 20,
            ),
            color: Colors.white,
            width: 300,
            height: 300,
            child: CustomPaint(
              painter: TranglePainter(),
            ),
          ),
        ],
      ),
    );
  }
}

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

    final a = Offset(size.width * 1 / 6, size.height * 1 / 4);
    final b = Offset(size.width * 5 / 6, size.height * 3 / 4);
    final rect = Rect.fromPoints(a, b);
    const radius = Radius.circular(32);
    canvas.drawRect(rect, paint);
    canvas.drawRRect(
        RRect.fromRectAndRadius(rect, radius), paint); // for rounded rectangle
  }

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

class TranglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.green
      ..strokeWidth = 10
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke;

    final path = Path()
      ..moveTo(size.width * 1 / 2, size.height * 1 / 4)
      ..lineTo(size.width * 1 / 6, size.height * 3 / 4)
      ..lineTo(size.width * 5 / 6, size.height * 3 / 4);
    path.close();

    canvas.drawPath(path, paint);
  }

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

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Thanks for reading this article on How to use Cascade(..) Operator in Flutter. Also Read: How To Implement The InteractiveViewer In Flutter