flutter_neumorphic

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

flutter_logo

neumorphic_playground

⚙️ 安装

https://pub.dev/packages/flutter_neumorphic

pub package
pub package

dependencies:
  flutter_neumorphic: ^3.0.3

//requires flutter > 1.13.18

在您的 .dart 文件中

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

? 小部件

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

? 演示

Neumorphic
Neumorphic

Neumorphic
Neumorphic

? 仿拟


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

Neumorphic
Neumorphic

☝️ 玩转光源与深度

?️ 属性

属性 值 描述
光源 左上角、右下角等 / (dx, dy) 特定于主题或小部件的光源，用于在仿拟元素上投射白色/深色阴影
形状 凹 / 凸 / 平 用于仿拟容器的曲线形状
深度 -20 <= double <= 20 小部件与其父项的距离。可以是负数 => 浮雕。它会影响阴影的颜色以及大小/模糊程度
强度 0 <= double <= 1 光线的强度，它会影响阴影的颜色
表面强度 0 <= double <= 1 表面的强度，它会影响凹/凸的暗度
颜色 任意颜色 仿拟元素的默认颜色
强调色 任意颜色 仿拟元素激活时（例如：复选框）的默认强调色
变体 任意颜色 仿拟元素的默认次要颜色（例如：用于进度渐变的第二种颜色）
盒子形状 圆形、圆角矩形（圆角半径）、胶囊形、路径 仿拟元素的盒子形状。胶囊形：两端为圆形的圆角矩形
Border NeumorphicBorder 边框（颜色/宽度），以增强与背景和其他元素的对比度

Neumorphic
Neumorphic
Neumorphic
Neumorphic

? 形状

形状 Widget Image 条件
平 depth >= 0 && shape == Flat
凸 depth >= 0 && shape == Convex
凹 depth >= 0 && shape == Concave
浮雕 depth < 0

仿拟文本

text

文本仅支持正深度

child: NeumorphicText(
        "I love flutter",
        style: NeumorphicStyle(
          depth: 4,  //customize depth here
          color: Colors.white, //customize color here
        ),
        textStyle: NeumorphicTextStyle(
          fontSize: 18, //customize size here
          // AND others usual text style properties (fontFamily, fontWeight, ...)
        ),
    ),

仿拟图标

custom_shape

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

如何显示 **SVG** 图标？

只需使用 https://fluttericon.com/ 将您的 svg 导出为 .ttf 文件，然后使用 NeumorphicIcon(YOUR_ICON)

custom_shape

? 自定义形状

custom_shape

Flutter Neumorphic 支持自定义形状，只需提供路径到

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

  @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()),
  ),
  ...
),

您可以使用以下方式导入 Flutter logo 作为自定义形状

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

? 可访问性 / 边框

出于设计目的，或仅仅是为了增强可访问性，
您可以为仿拟小部件添加边框

Neumorphic

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

您可以启用/禁用它（例如：监听可访问性提供程序）通过 isEnabled

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

请注意，NeumorphicThemeData 中已添加了 borderColor 和 borderWidth 的默认值

? 仿拟主题

neumorphic_theme
neumorphic_theme

NeumorphicTheme(
    themeMode: ThemeMode.light, //or 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，将您的代码包裹起来

它直接处理 NeumorphicTheme 和导航（以及 MaterialApp 的所有可能性）

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @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(),
    );
  }
}

什么是仿拟

neumorphic

Material 卡片

现代/Material（升级版）卡片通常是一个漂浮在我们感知背景之上的表面，并对其投射阴影。阴影既赋予了它深度，又在很多情况下定义了形状本身——因为它常常是无边框的。

仿拟卡片

然而，仿拟卡片则试图从背景中凸起。它是一个由与背景完全相同的材料制成的凸起形状。当我们从侧面看它时，我们会发现它并没有“漂浮”。

neumorphic_button

以下是样本应用中一个仿拟按钮的点击（慢速 x2），您可以看到元素如何改变其深度到表面。

GitHub

https://github.com/Idean/Flutter-Neumorphic