stream_laser.dart

import 'dart:async';
import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'package:stream_chat_localizations/stream_chat_localizations.dart';
import 'package:ezanimation/ezanimation.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  /// Create a new instance of [StreamChatClient] passing the apikey obtained
  /// from your project dashboard.
  final client = StreamChatClient(
    's2dxdhpxd94g',
    logLevel: Level.OFF,
  );

  /// Set the current user and connect the websocket. In a production
  /// scenario, this should be done using a backend to generate a user token
  /// using our server SDK.
  ///
  /// Please see the following for more information:
  /// https://getstream.io/chat/docs/ios_user_setup_and_tokens/
  await client.connectUser(
    User(id: 'super-band-9'),
    '''eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoic3VwZXItYmFuZC05In0.0L6lGoeLwkz0aZRUcpZKsvaXtNEDHBcezVTZ0oPq40A''',
  );

  final channel = client.channel('messaging', id: 'godevs');

  await channel.watch();

  runApp(
    MyApp(
      client: client,
      channel: channel,
    ),
  );
}

/// Example application using Stream Chat Flutter widgets.
///
/// Stream Chat Flutter is a set of Flutter widgets which provide full chat
/// functionalities for building Flutter applications using Stream. If you'd
/// prefer using minimal wrapper widgets for your app, please see our other
/// package, `stream_chat_flutter_core`.
class MyApp extends StatelessWidget {
  /// Example using Stream's Flutter package.
  ///
  /// If you'd prefer using minimal wrapper widgets for your app, please see
  /// our other package, `stream_chat_flutter_core`.
  const MyApp({
    Key? key,
    required this.client,
    required this.channel,
  }) : super(key: key);

  /// Instance of Stream Client.
  ///
  /// Stream's [StreamChatClient] can be used to connect to our servers and
  /// set the default user for the application. Performing these actions
  /// trigger a websocket connection allowing for real-time updates.
  final StreamChatClient client;

  /// Instance of the Channel
  final Channel channel;

  @override
  Widget build(BuildContext context) => MaterialApp(
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        supportedLocales: const [
          Locale('en'),
          Locale('hi'),
          Locale('fr'),
          Locale('it'),
          Locale('es'),
        ],
        localizationsDelegates: GlobalStreamChatLocalizations.delegates,
        builder: (context, widget) => StreamChat(
          client: client,
          child: widget,
        ),
        home: StreamChannel(
          channel: channel,
          child: const ChannelPage(),
        ),
      );
}

/// A list of messages sent in the current channel.
///
/// This is implemented using [MessageListView], a widget that provides query
/// functionalities fetching the messages from the api and showing them in a
/// listView.
class ChannelPage extends StatefulWidget {
  /// Creates the page that shows the list of messages
  const ChannelPage({
    Key? key,
  }) : super(key: key);

  @override
  State<ChannelPage> createState() => _ChannelPageState();
}

class _ChannelPageState extends State<ChannelPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const ChannelHeader(),
      body: Column(
        children: <Widget>[
          Expanded(
            child: MessageListView(
              messageBuilder: (context, details, list, def) {
                return def.copyWith(onMessageTap: (m) {
                  _showOverlay(def);
                });
              },
            ),
          ),
          MessageInput(attachmentLimit: 3),
        ],
      ),
    );
  }

  void _showOverlay(MessageWidget w) {
    var entry = _buildOverlayEntry(w);
    Overlay.of(context)?.insert(entry);
  }

  OverlayEntry _buildOverlayEntry(MessageWidget w) {
    // blue pink red yellow green cyan

    var sequence = TweenSequence([
      TweenSequenceItem(
          tween: ColorTween(begin: Colors.blue, end: Colors.pink), weight: 1),
      TweenSequenceItem(
          tween: ColorTween(begin: Colors.pink, end: Colors.red), weight: 1),
      TweenSequenceItem(
          tween: ColorTween(begin: Colors.red, end: Colors.yellow), weight: 1),
      TweenSequenceItem(
          tween: ColorTween(begin: Colors.yellow, end: Colors.green),
          weight: 1),
      TweenSequenceItem(
          tween: ColorTween(begin: Colors.green, end: Colors.cyan), weight: 1),
    ]);

    return OverlayEntry(
      builder: (c) {
        return TweenAnimationBuilder<double>(
          tween: Tween(begin: 0.0, end: 1.0),
          duration: Duration(seconds: 6),
          builder: (c, val, wid) {
            return Stack(
              children: [
                Opacity(
                  opacity: 0.6,
                  child: Container(
                    child: SizedBox.expand(),
                    decoration: BoxDecoration(
                        gradient: RadialGradient(
                      colors: [
                        sequence.transform(val)!,
                        Colors.black,
                      ],
                      stops: [0.3, 1.0],
                      center: Alignment(0.70, 0.70),
                      radius: 2,
                    )),
                  ),
                ),
                CustomPaint(
                  painter: LaserPainter(
                    val,
                  ),
                  child: SizedBox.expand(),
                ),
                StreamChannel(
                  channel: StreamChannel.of(context).channel,
                  child: Align(
                    child: w,
                    alignment: Alignment(0.0, 0.6),
                  ),
                ),
              ],
            );
          },
        );
      },
    );
  }
}

class LaserPainter extends CustomPainter {
  double progress = 0.0;

  LaserPainter(this.progress);

  @override
  void paint(Canvas canvas, Size size) {
    // Replace with message offset
    var origin = Offset(3 * size.width / 4, 3 * size.height / 4);

    var yPositionSequence = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: size.height * 4, end: -size.height * 3)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: -size.height * 3, end: size.height * 4)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
    ]);

    var sizeSequence = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 40.0, end: size.width * 8)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: size.width * 8, end: 40.0)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: 40.0, end: size.width * 8)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: size.width * 8, end: 40.0)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
    ]);

    var yRotateSequence1 = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 0.0, end: 0.5)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: 0.5, end: -0.3)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
    ]);

    var yRotateSequence2 = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 0.3, end: -0.3)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: -0.3, end: -0.6)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
    ]);

    var yRotateSequence3 = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 0.1, end: -0.1)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: -0.1, end: -0.1)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
    ]);

    var yRotateSequence4 = TweenSequence([
      TweenSequenceItem(
          tween: Tween(begin: 0.0, end: 0.3)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
      TweenSequenceItem(
          tween: Tween(begin: 0.3, end: -0.1)
              .chain(CurveTween(curve: Curves.easeInOut)),
          weight: 1),
    ]);

    var lineBrightnessSequence = TweenSequence(
      List.generate(
        100,
        (index) => index % 2 == 0
            ? TweenSequenceItem(
                tween: Tween(begin: 0.0, end: 0.6)
                    .chain(CurveTween(curve: Curves.easeInOut)),
                weight: 1)
            : TweenSequenceItem(
                tween: Tween(begin: 0.6, end: 0.0)
                    .chain(CurveTween(curve: Curves.easeInOut)),
                weight: 1),
      ),
    );

    var spaceBrightnessSequence = TweenSequence(
      List.generate(
        100,
        (index) => index % 2 == 0
            ? TweenSequenceItem(
                tween: Tween(begin: 0.0, end: 0.3)
                    .chain(CurveTween(curve: Curves.easeInOut)),
                weight: 1)
            : TweenSequenceItem(
                tween: Tween(begin: 0.3, end: 0.0)
                    .chain(CurveTween(curve: Curves.easeInOut)),
                weight: 1),
      ),
    );

    var linePainter = Paint()
      ..color =
          Colors.white.withOpacity(lineBrightnessSequence.transform(progress))
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.0
      ..strokeCap = StrokeCap.round
      ..maskFilter = MaskFilter.blur(BlurStyle.solid, 10.0);

    var spacePainter = Paint()
      ..color =
          Colors.white.withOpacity(spaceBrightnessSequence.transform(progress))
      ..style = PaintingStyle.fill
      ..maskFilter = MaskFilter.blur(BlurStyle.solid, 10.0);

    void drawTriangleThingy(double offset, double yTimeOffset, rotationSequence) {
      var path = Path();

      path.moveTo(origin.dx, origin.dy);
      path.lineTo(offset - sizeSequence.transform(progress) / 2,
          yPositionSequence.transform(progress * yTimeOffset));
      path.lineTo(offset + sizeSequence.transform(progress) / 2,
          yPositionSequence.transform(progress * yTimeOffset));
      path.close();

      var matrix = Matrix4.translationValues(origin.dx, origin.dy, 0)
        ..setEntry(3, 2, 0.002)
        ..rotateY(rotationSequence.transform(progress) / 2)
        ..rotateZ(rotationSequence.transform(progress) * 2)
        ..translate(-origin.dx, -origin.dy);

      path = path.transform(matrix.storage);

      canvas.drawPath(path, spacePainter);
      canvas.drawPath(path, linePainter);

      // canvas.drawLine(
      //     origin,
      //     Offset(offset - sizeSequence.transform(progress) / 2,
      //         yPositionSequence.transform(progress * yTimeOffset)),
      //     linePainter);
      // canvas.drawLine(
      //     origin,
      //     Offset(offset + sizeSequence.transform(progress) / 2,
      //         yPositionSequence.transform(progress * yTimeOffset)),
      //     linePainter);
    }

    var unit = size.width / 4;

    drawTriangleThingy(unit - 300, 1, yRotateSequence1);
    drawTriangleThingy(unit - 150, 0.85, yRotateSequence2);
    drawTriangleThingy(-2 * unit, 1.15, yRotateSequence3);
    drawTriangleThingy(3 * unit, 1.20, yRotateSequence4);
  }

  @override
  bool shouldRepaint(covariant LaserPainter oldDelegate) {
    return progress != oldDelegate.progress;
  }
}

extension SizeToOffset on Size {
  Offset toOffset() {
    return Offset(this.width, this.height);
  }
}