Flutter拟物风格设计插件flutter_neumorphic的使用

Flutter拟物风格设计插件flutter_neumorphic的使用

简介

flutter_neumorphic 是一个完整的拟物UI套件，适用于Flutter。通过此插件，开发者可以轻松创建具有拟物风格的界面。

在线试用

您可以在线试用 flutter_neumorphic，请点击以下链接： 👉 https://flutter-neumorphic.firebaseapp.com/ 🌐

安装

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

dependencies:
  flutter_neumorphic: ^3.0.3

确保您的 Flutter 版本大于 1.13.18。

然后，在您的 .dart 文件中导入该库：

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

小部件

以下是 flutter_neumorphic 中的一些常用小部件及其功能：

预览	小部件	描述
	Neumorphic	主要的拟物容器，根据光源和深度添加白色/黑色渐变
	NeumorphicButton	拟物按钮，响应用户交互时改变深度
	NeumorphicRadio	一组拟物按钮，每次只能选择一个，根据值和组值进行选择
	NeumorphicCheckbox	与值关联的按钮，可选中或取消选中，如果选中则采用强调色
	NeumorphicText	拟物文本（仅支持正深度）
	NeumorphicIcon	拟物图标（仅支持正深度）
	material.TextField	对于文本字段，只需将现有的 material.TextField 小部件包裹在 Neumorphic 容器中
	NeumorphicSwitch	开关按钮，与值关联，如果打开，则采用强调色
	NeumorphicToggle	多值开关，与选定的索引关联
	NeumorphicSlider	拟物滑块，用户可以在范围内选择一个值
	NeumorphicProgress	确定进度条，显示百分比
	NeumorphicProgressIndeterminate	不确定进度条
	NeumorphicBackground	采用主题背景色，可以使用 borderRadius 剪裁屏幕
	NeumorphicApp	使用拟物设计的应用程序，处理主题、导航、本地化等
	NeumorphicAppBar	使用拟物设计的应用栏，可用于 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.white,
  ),
)

Neumorphic 文本

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

Neumorphic 图标

NeumorphicIcon(
  Icons.add_circle,
  size: 80,
)

如何显示 SVG 图标？

只需使用 https://fluttericon.com/ 导出 SVG 并将其作为字体文件导出，然后使用 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();
  }
}

使用 NeumorphicBoxShape.path：

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

可访问性 / 边框

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

可以通过启用或禁用 isEnabled 来控制边框：

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

拟物主题

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，它直接处理拟物主题和导航。

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