Flutter UI #64: Fun with Bubble Lens in Flutter


Flutter UI #64: Fun with Bubble Lens in Flutter

Tutorial and code of Bubble Lens in Flutter. Copy and paste the below code as per your requirements.

bubble_lens: ^2.0.0

import 'package:flutter/material.dart';

import 'package:bubble_lens/bubble_lens.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Bubble Lens',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: const Center(child: Text("Bubble Lens"),),),
      body: Center(
          child: Container(
            color: Colors.black,
            child: BubbleLens(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                widgets: [
                  for (var i = 0; i < 100; i++)
                    Container(
                      width: 100,
                      height: 100,
                      color: [Colors.red, Colors.green, Colors.blue][i % 3],
                    )
                ]
            ),
          )
      ),
    );
  }
}

Leave a Reply

Your email address will not be published.