Flutter_GlassEffect_Button

In Flutter, a glass button was designed by giving a click feature inside the glass container.

GLASS EFFECT BUTTON

Features

-Glass button effect

Technologies Used

Flutter
Dart

Usaged

To use the GlassEffectButton, you can follow the steps below:

const like = 'sample';

Constructor

final Widget? child;
  final IconData? icon;
  final double borderRadius;
  final double? width;
  final double? sizedBoxWidth;
  final double? height;
  final double sigmaX;
  final double sigmaY;
  final void Function()? ontap;
  final MainAxisAlignment mainAxisAlignment;
  const GlassEffectButton({
    super.key,
    this.child = const Text('GLASS BUTTON'),
    this.icon,
    this.borderRadius = 20.0,
    this.width = 300,
    this.sizedBoxWidth = 10,
    this.height = 100,
    this.sigmaX = 4.0,
    this.sigmaY = 4.0,
    this.ontap,
    this.mainAxisAlignment = MainAxisAlignment.center,

Example

import 'package:flutter/material.dart';
import 'package:glass_button_package/glass_button_package.dart';
import 'package:example/constant/images_constant.dart';

class HomeView extends StatelessWidget {
  const HomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage(flutterbg), fit: BoxFit.cover)),
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const SizedBox(
                height: 300,
              ),
              GlassEffectButton(
                ontap: () {},
                icon: Icons.favorite_border,
                child: const Text('FLUTTER'),
              ),
              const SizedBox(
                height: 200,
              ),
              GlassEffectButton(
                ontap: () {},
                sigmaX: 1,
                sigmaY: 1,
              )
            ],
          ),
        ),
      ),
    );
  }
}

This project includes a sample button for educational purposes that demonstrates the glass effect.

Versions

Name	Version
Flutter	3.13.0
Dart	3.1.0

Support

Support	Version
Android	SDK 16+
iOS	11.0+
Web	Any*

📝 License

This project is MIT licensed.

Contributors 💻🖱️

Creators of the Flutter Glass Effect Button

Abdulsamed Tanriverdi

Nurhayat Yurtaslan