Flutter仿拟态材质按钮插件material_neumorphic_button的使用

Flutter仿拟态材质按钮插件material_neumorphic_button的使用

Material Neumorphic Button

作为Material Neumorphic小部件套件的一部分。

使用

一个仿拟态按钮。

当按下时，它会调用其onClick点击参数中的VoidCallback回调函数。动画从style.depth（或在样式中未定义主题的depth）开始。

完成到minDistance，在指定的duration时间里。

你可以通过pressed参数强制按钮的状态：

  • true：强制为按下状态。
  • false：强制为未按下状态。
  • null：可以由用户按下。

它接受一个padding，默认值为EdgeInsets.symmetric(horizontal: 8, vertical: 4)。

它接受一个NeumorphicStyle，参见[NeumorphicStyle]。

NeumorphicButton(
    onClick: () {
        setState(() {
            // 执行一些操作
        });
    },
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
    style: NeumorphicStyle(
        shape: NeumorphicShape.flat,
    ),
    child: Text("点击我"),
)

完整示例Demo

以下是一个完整的示例代码，展示了如何使用material_neumorphic_button插件来创建一个仿拟态按钮。

import 'package:flutter/material.dart';
import 'package:material_neumorphic_button/material_neumorphic_button.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('仿拟态按钮示例'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: NeumorphicButton(
              onClick: () {
                // 按钮点击事件处理
                print('按钮被点击了！');
              },
              boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
              style: NeumorphicStyle(
                depth: 4, // 设置深度
                lightSource: LightSource.topLeft, // 设置光源位置
                color: Colors.grey.shade300, // 设置颜色
              ),
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 设置内边距
              child: Text(
                "点击我",
                style: TextStyle(fontSize: 18), // 设置文本样式
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter仿拟态材质按钮插件material_neumorphic_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


material_neumorphic_button 是一个 Flutter 插件，它允许你在应用中创建具有拟态设计（Neumorphism）风格的按钮。拟态设计是一种 UI 设计风格，它通过使用阴影和高光效果来模拟物理按钮的外观。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 material_neumorphic_button 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  material_neumorphic_button: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

使用 MaterialNeumorphicButton

以下是一个简单的示例，展示如何使用 MaterialNeumorphicButton：

import 'package:flutter/material.dart';
import 'package:material_neumorphic_button/material_neumorphic_button.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Neumorphic Button Example'),
        ),
        body: Center(
          child: MaterialNeumorphicButton(
            onPressed: () {
              print('Button Pressed!');
            },
            child: Text(
              'Press Me',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
            style: NeumorphicStyle(
              color: Colors.blue, // 按钮背景颜色
              intensity: 0.8, // 阴影强度
              depth: 5, // 阴影深度
              shape: NeumorphicShape.flat, // 形状
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

  • onPressed: 按钮点击时的回调函数。
  • child: 按钮内部的内容，通常是一个 Text 或 Icon 组件。
  • style: 用于自定义按钮的外观，类型为 NeumorphicStyle。

NeumorphicStyle 参数

  • color: 按钮的背景颜色。
  • intensity: 阴影的强度，值越大阴影越明显。
  • depth: 阴影的深度，值越大按钮的凸起效果越明显。
  • shape: 按钮的形状，可以是 NeumorphicShape.flat（扁平）或 NeumorphicShape.concave（凹形）。

自定义按钮样式

你可以通过调整 NeumorphicStyle 中的参数来自定义按钮的外观，例如：

MaterialNeumorphicButton(
  onPressed: () {
    print('Button Pressed!');
  },
  child: Text(
    'Custom Button',
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
    ),
  ),
  style: NeumorphicStyle(
    color: Colors.green,
    intensity: 0.9,
    depth: 8,
    shape: NeumorphicShape.concave,
  ),
)
回到顶部