Flutter拟物化UI设计插件neumorphic_ui的使用

Flutter拟物化UI设计插件neumorphic_ui的使用

引言

A complete, ready to use, Neumorphic ui kit for Flutter

您可以尝试在浏览器上体验 Flutter-Neumorphic：👉 在线演示 🌐

安装

首先，确保您的 flutter 版本大于 1.13.18。然后，在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_neumorphic: ^3.0.3

接下来，在您的 .dart 文件中导入该库：

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

组件

以下是 flutter_neumorphic 插件中的一些主要组件及其预览和描述。

预览	Widget	描述
	Neumorphic	主要的Neumorphic组件，一个容器，根据光源和深度添加白色/黑色渐变。
	NeumorphicButton	一个Neumorphic按钮，通过深度变化响应用户交互。
	NeumorphicRadio	一组Neumorphic按钮，每次只有一个被选中，取决于值和groupValue。
	NeumorphicCheckbox	一个与值关联的按钮，可以选中或取消选中，如果选中则采用强调色。
	NeumorphicText	一个Neumorphic文本（仅支持正深度）。
	NeumorphicIcon	一个Neumorphic图标（仅支持正深度）。
	material.TextField	对于TextField，只需将现有的material TextField小部件包围在一个Neumorphic（容器）中。
	NeumorphicSwitch	一个开/关切换器，与一个值关联，如果打开，则采用强调色。
	NeumorphicToggle	一个多值切换器，与selectedIndex关联。
	NeumorphicSlider	一个Neumorphic进度条（范围滑块），用户可以在范围内选择一个值。
	NeumorphicProgress	一个确定性进度条，根据显示的百分比。
	NeumorphicProgressIndeterminate	一个不确定性的进度条。
	NeumorphicBackground	采用主题背景色，可以剪辑屏幕以增加圆角边框。
	NeumorphicApp	使用Neumorphic设计的应用程序。处理主题、导航、本地化等。
	NeumorphicAppBar	一个Neumorphic设计的应用栏，可以用于Scaffold中。

展示

Neumorphic组件示例

Neumorphic(
  style: NeumorphicStyle(
    shape: NeumorphicShape.concave,
    boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
    depth: 8,
    lightSource: LightSource.topLeft,
    color: Colors.grey
  ),
  child: Container(
    height: 100,
    width: 100,
    color: Colors.blue,
  ),
)

Neumorphic文本

child: NeumorphicText(
  "I love flutter",
  style: NeumorphicStyle(
    depth: 4,  // 自定义深度
    color: Colors.white, // 自定义颜色
  ),
  textStyle: NeumorphicTextStyle(
    fontSize: 18, // 自定义字体大小
    // 其他文本样式属性 (fontFamily, fontWeight, ...)
  ),
),

Neumorphic图标

child: NeumorphicIcon(
  Icons.add_circle,
  size: 80,
),

如何显示SVG图标？ 使用 https://fluttericon.com/ 导出SVG文件为.ttf格式并使用NeumorphicIcon(YOUR_ICON)。

自定义形状

class MyShapePathProvider extends NeumorphicPathProvider {
  [@override](/user/override)
  bool shouldReclip(NeumorphicPathProvider oldClipper) {
    return true;
  }

  [@override](/user/override)
  Path getPath(Size size) {
    return Path()
      ..moveTo(0, 0)
      ..lineTo(size.width/2, 0)
      ..lineTo(size.width, size.height/2)
      ..lineTo(size.width/2, size.height/2)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();
  }
}

使用：

Neumorphic(
  style: NeumorphicStyle(
    boxShape: NeumorphicBoxShape.path(MyShapePathProvider()),
  ),
  ...
),

导入Flutter Logo作为自定义形状：

Neumorphic(
  style: NeumorphicStyle(
    shape: NeumorphicBoxShape.path(NeumorphicFlutterLogoPathProvider()),
  ),
  ...
),

可访问性/边框

Neumorphic(
  style: NeumorphicStyle(
    border: NeumorphicBorder(
      color: Color(0x33000000),
      width: 0.8,
    )
  ),
  ...
)

启用/禁用边框（例如：监听可访问性提供者）：

border: NeumorphicBorder(
  isEnabled: true,
  color: Color(0x33000000),
  width: 0.8,
)

注意：borderColor 和 borderWidth 的默认值已添加到 NeumorphicThemeData 中。

Neumorphic主题

NeumorphicTheme(
  themeMode: ThemeMode.light, // 或 dark / system
  darkTheme: NeumorphicThemeData(
    baseColor: Color(0xff333333),
    accentColor: Colors.green,
    lightSource: LightSource.topLeft,
    depth: 4,
    intensity: 0.3,
  ),
  theme: NeumorphicThemeData(
    baseColor: Color(0xffDDDDDD),
    accentColor: Colors.cyan,
    lightSource: LightSource.topLeft,
    depth: 6,
    intensity: 0.5,
  ),
  child: ...
)

获取当前使用的主题：

final theme = NeumorphicTheme.currentTheme(context);
final baseColor = theme.baseColor;
final accentColor = theme.accentColor;
...

从亮模式切换到暗模式：

NeumorphicTheme.of(context).themeMode = ThemeMode.dark;

检查是否正在使用暗模式：

if(NeumorphicTheme.of(context).isUsingDark){
  
}

NeumorphicApp

可以直接在项目中使用 NeumorphicApp，包裹你的代码。

它直接处理Neumorphic主题和导航（以及其他所有可能性）。

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return NeumorphicApp(
      debugShowCheckedModeBanner: false,
      title: 'Neumorphic App',
      themeMode: ThemeMode.light,
      theme: NeumorphicThemeData(
        baseColor: Color(0xFFFFFFFF),
        lightSource: LightSource.topLeft,
        depth: 10,
      ),
      darkTheme: NeumorphicThemeData(
        baseColor: Color(0xFF3E3E3E),
        lightSource: LightSource.topLeft,
        depth: 6,
      ),
      home: MyHomePage(),
    );
  }
}