Flutter玻璃质感按钮插件glass_button_package的使用

Flutter玻璃质感按钮插件glass_button_package的使用

在Flutter中，设计了一个玻璃质感按钮，该按钮在一个玻璃容器内添加了点击效果。

玻璃质感按钮

功能

  • 玻璃按钮效果

技术栈

  • Flutter
  • Dart

使用方法

要使用GlassEffectButton，您可以按照以下步骤操作：

const like = 'sample';

构造函数

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,
});

示例

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](/user/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,
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter玻璃质感按钮插件glass_button_package的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter玻璃质感按钮插件glass_button_package的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用glass_button_package插件来创建一个玻璃质感按钮的代码示例。请注意，这个包的具体名称和API可能会随版本变化，所以确保你查阅了最新的文档。以下是一个基本的示例：

首先，确保你已经在pubspec.yaml文件中添加了glass_button依赖（假设包名为glass_button，实际使用时请替换为正确的包名）：

dependencies:
  flutter:
    sdk: flutter
  glass_button: ^最新版本号  # 替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

接下来，在你的Dart文件中，你可以这样使用GlassButton：

import 'package:flutter/material.dart';
import 'package:glass_button/glass_button.dart';  // 导入glass_button包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Glass Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Glass Button Demo'),
        ),
        body: Center(
          child: GlassButton(
            text: 'Press Me',
            color: Colors.transparent,
            borderColor: Colors.grey.shade300,
            borderWidth: 2.0,
            borderRadius: 20.0,
            textStyle: TextStyle(color: Colors.white, fontSize: 18),
            onPressed: () {
              // 按钮点击事件处理
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Button Pressed!')),
              );
            },
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 导入包：

    import 'package:glass_button/glass_button.dart';

  2. 创建GlassButton：

    • text：按钮上显示的文本。
    • color：按钮的背景颜色。这里设置为透明以显示玻璃效果。
    • borderColor：按钮边框的颜色。
    • borderWidth：按钮边框的宽度。
    • borderRadius：按钮的圆角半径。
    • textStyle：按钮文本的样式，包括颜色和字体大小。
    • onPressed：按钮点击时的回调函数。
    • boxShadow：按钮的阴影效果，可以增强玻璃质感。

注意事项

  • 确保glass_button包的实际名称和API与代码示例中的一致。如果不一致，请参考该包的官方文档进行调整。
  • 玻璃效果很大程度上依赖于背景颜色和光照条件，因此在实际应用中可能需要调整颜色、阴影等参数以达到最佳效果。

这样，你就可以在Flutter应用中实现一个玻璃质感的按钮了。

回到顶部