flutter_neumorphic如何使用

在使用Flutter Neumorphic包时遇到了一些问题，想请教大家：

  1. 如何正确安装和导入flutter_neumorphic包？是否需要额外配置？
  2. Neumorphic控件的基本使用方法是什么？比如NeumorphicButton、NeumorphicContainer这些组件该怎么设置样式？
  3. 如何调整阴影、光效和圆角等效果？有没有推荐的参数范围？
  4. 在深色和浅色主题下，Neumorphic效果如何自适应切换？
  5. 性能方面有什么需要注意的地方？尤其是在复杂界面中使用时会不会有明显卡顿？

如果有具体的代码示例或经验分享就更好，谢谢！

2 回复

Flutter_Neumorphic 是一个实现拟态设计的 Flutter 组件库。使用步骤：

  1. 在 pubspec.yaml 添加依赖：flutter_neumorphic: ^3.2.0
  2. 导入：import 'package:flutter_neumorphic/flutter_neumorphic.dart';
  3. 使用 Neumorphic 组件，如按钮、输入框等。

示例代码：

NeumorphicButton(
  onPressed: () {},
  child: Text('按钮'),
)

可调整样式、深度、颜色等参数实现不同效果。

更多关于flutter_neumorphic如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter Neumorphic 是一个用于创建拟态设计（Neumorphism）UI 的 Flutter 包。以下是基本使用方法：

安装

在 pubspec.yaml 中添加：

dependencies:
  flutter_neumorphic: ^3.2.0

基本使用

1. 包裹应用

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NeumorphicApp(
      title: 'Neumorphic App',
      home: MyHomePage(),
    );
  }
}

2. 基本组件示例

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: NeumorphicTheme.baseColor(context),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 按钮
            NeumorphicButton(
              onPressed: () {},
              child: Text('按钮'),
            ),
            
            SizedBox(height: 20),
            
            // 输入框
            Neumorphic(
              style: NeumorphicStyle(
                depth: -5,
                color: Colors.grey[300],
              ),
              child: SizedBox(
                width: 200,
                child: TextField(
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.all(12),
                  ),
                ),
              ),
            ),
            
            SizedBox(height: 20),
            
            // 进度指示器
            NeumorphicProgressIndeterminate(),
          ],
        ),
      ),
    );
  }
}

3. 自定义样式

Neumorphic(
  style: NeumorphicStyle(
    shape: NeumorphicShape.flat, // 或 convex, concave
    boxShape: NeumorphicBoxShape.circle(), // 圆形
    depth: 8, // 深度（正值为凸起，负值为凹陷）
    intensity: 0.8, // 强度
    surfaceIntensity: 0.3, // 表面强度
    lightSource: LightSource.topLeft, // 光源方向
    color: Colors.grey[300],
  ),
  child: Container(
    width: 100,
    height: 100,
    child: Icon(Icons.favorite, color: Colors.red),
  ),
)

主要组件

  • Neumorphic - 基础容器
  • NeumorphicButton - 按钮
  • NeumorphicText - 文本
  • NeumorphicIcon - 图标
  • NeumorphicProgress - 进度条

通过调整 depth、intensity 等参数可以创建不同的拟态效果。

回到顶部