Flutter UI组件插件neu的使用

Flutter UI组件插件neu的使用

新增功能 neu

pub.dev Listing | API Doc | GitHub

Zaba.app —— 简单的包，简单的名字。

交互式Web演示

目录

开始使用

创建一个Neu对象。默认构造函数在未提供值的情况下具有各种默认设置。

const Neu({
  // 基础设置
  Color color = lightWhite,
  int depth = defaultDepth, // 25
  double spread = defaultSpread, // 7.5

  // 细节调整
  Curvature curvature = Curvature.convex,
  Swell swell = Swell.emboss,
  Alignment lightSource = defaultLightSource, // Alignment.topLeft
  
  // 特定输出方法调用
  NeuTextSpec neuTextSpec = const NeuTextSpec(), // buildTextStyle()
  BorderRadius borderRadius = BorderRadius.zero, // buildBoxDecoration()
  ShapeBorder shape = defaultShape, // buildShapeDecoration()
})

Neu对象具有可获取的属性，这些属性以“build”开头。这些getter调用Neu的静态方法，并使用对象的属性填充参数。

考虑以下静态方法：

// 静态方法调用实例
final BoxDecoration neuDecoration = Neu.boxDecoration(
  color: Colors.indigoAccent.shade700,
  depth: 25,
  spread: 10,
  curvature: Curvature.flat,
  swell: Swell.emboss,
);

示例

点击以下动画查看交互式Web演示，该演示大致等同于Example中的源代码。

深度

深度是装饰物从表面突出的程度。较大的深度会增加颜色两侧的阴影对比度。

扩散

扩散决定了效果覆盖的区域宽度和阴影的模糊程度。

曲率

曲率描述了装饰物表面的实际外观。Curvature.flat装饰物没有渐变，而Curvature.convex则按光线 -> 暗的方式排列渐变，给人一种“泡泡”状的外观。

膨胀

膨胀描述了装饰物在表面上的凹陷或突出情况。

光源

光源默认为Alignment.topLeft。这使得整个neumorphic装饰物看起来像是从左上角被照亮的。所有关于渐变和阴影方向性的描述都基于此默认光源。可以提供一个覆盖的Alignment来动态地“重新照明”装饰物。

生成文本样式

当使用Neu对象及其buildTextStyle()属性来生成neumorphic文本装饰时，还需要实例化并自定义一个NeuTextSpec对象。此二级参数容器对象简化了Neu构造函数的参数。

final TextStyle neuTextStyle = Neu.textStyle(
  baseStyle: const TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
  color: color,
  depth: depth,
  curvature: curvature,
  swell: swell,
  spread: spread / 2,
  lightSource: lightSource,
);

快速部署NeuContainer

在某些情况下，可能希望放置一个没有固定颜色背景的neumorphic元素；或者可能更喜欢方便且带有动画支持的neumorphic装饰；在这种情况下，可以使用NeuContainer。

NeuContainer是一个特殊的两层AnimatedContainer，它有一个名为insets的特殊EdgeInsets属性，该属性在padding之外添加额外的填充，颜色与color相同。

final NeuContainer neuContainer = NeuContainer(
  color: Colors.indigoAccent.shade700,
  depth: 25,
  spread: 10,
  curvature: Curvature.flat,
  swell: Swell.emboss,
  insets: EdgeInsets.all(10),
);

更多关于Flutter UI组件插件neu的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI组件插件neu的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


neu 是一个用于 Flutter 的 UI 组件库，专注于创建 Neumorphic 风格的 UI 元素。Neumorphism 是一种流行的设计风格，通过模拟物理按钮的凸起和凹陷效果，使界面看起来更加立体和现代。

以下是使用 neu 插件的基本步骤和示例：

1. 安装 neu 插件

在 pubspec.yaml 文件中添加 neu 依赖：

dependencies:
  flutter:
    sdk: flutter
  neu: ^0.2.0 # 检查最新版本

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

2. 基本用法

neu 提供了 Neumorphic 组件，可以轻松创建 Neumorphic 风格的 UI 元素。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xFFE0E5EC), // 背景色应与 Neumorphic 风格匹配
        body: Center(
          child: Neumorphic(
            style: NeumorphicStyle(
              depth: 5, // 控制凸起/凹陷的深度
              intensity: 0.8, // 控制光照强度
              surfaceIntensity: 0.5, // 控制表面强度
              shape: NeumorphicShape.flat, // 形状（flat 或 convex）
              lightSource: LightSource.topLeft, // 光源方向
              color: Color(0xFFE0E5EC), // 背景色
            ),
            child: Container(
              width: 150,
              height: 150,
              child: Center(
                child: Text(
                  'Hello Neu!',
                  style: TextStyle(fontSize: 20, color: Colors.black),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 主要组件和属性

neu 的核心组件是 Neumorphic，它有以下常用属性：

  • style: 用于配置 Neumorphic 样式。

    • depth: 控制凸起或凹陷的深度（正值为凸起，负值为凹陷）。
    • intensity: 控制光照强度。
    • surfaceIntensity: 控制表面强度。
    • shape: 形状，可以是 NeumorphicShape.flat（扁平）或 NeumorphicShape.convex（凸起）。
    • lightSource: 光源方向，如 LightSource.topLeft、LightSource.topRight 等。
    • color: 背景色。

  • child: 包裹在 Neumorphic 效果中的子组件。

4. 高级用法

neu 还支持更多高级功能，例如：

  • 自定义边框：通过 border 属性设置边框。
  • 阴影效果：通过 boxShadow 属性添加阴影。
  • 动画效果：结合 Flutter 的动画库实现动态效果。

示例：带边框和阴影的 Neumorphic 按钮

Neumorphic(
  style: NeumorphicStyle(
    depth: 10,
    intensity: 0.8,
    shape: NeumorphicShape.convex,
    lightSource: LightSource.topLeft,
    color: Color(0xFFE0E5EC),
    border: NeumorphicBorder(
      color: Colors.grey,
      width: 2,
    ),
  ),
  child: Container(
    width: 120,
    height: 50,
    child: Center(
      child: Text(
        'Click Me',
        style: TextStyle(fontSize: 18, color: Colors.black),
      ),
    ),
  ),
)
回到顶部