neumorphic.flutter

拟物用户界面的实现，包括一套用于 Flutter 框架的原则和组件
all cards

入门

在您的 Flutter 项目中添加依赖项

pub package

dependencies:
  neumorphic: any

查看 最新稳定版库文档。

API

现已实现一些小部件

  • NeuCard
  • NeuButton
  • NeuSwitch
  • NeuText
  • NeuTextField
  • NeuBackButton
  • NeuAppBar
  • NeuApp

NeuCard

它是一个类似 Material 和 Container 合并的容器，但实现了 Neumorphism（拟物设计）

NeuCard(
  // State of Neumorphic (may be convex, flat & emboss)
  curveType: CurveType.concave,

  // Elevation relative to parent. Main constituent of Neumorphism
  bevel: 12,

  // Specified decorations, like `BoxDecoration` but only limited
  decoration: NeumorphicDecoration(
    borderRadius: BorderRadius.circular(8)
  ),

  // Other arguments such as margin, padding etc. (Like `Container`)
  child: Text('Container')
)

NeuButton

按钮在按下时会自动将 NeumorphicStatus 从 concave（凹陷）切换到 convex（凸起）并反之

NeuButton(
  onPressed: () {
    print('Pressed !');
  },
  child: Text('Button'),
);

NeuSwitch

重做了 CupertinoSlidingSegmentedControl，使其遵循 Neumorphism

NeuSwitch<int>(
  onValueChanged: (val) {
    setState(() {
      switchValue = val;
    });
  },
  groupValue: switchValue,
  children: {
    0: Padding(
      padding: EdgeInsets.symmetric(vertical: 24, horizontal: 8),
      child: Text('First'),
    ),
    1: Padding(
      padding: EdgeInsets.symmetric(vertical: 24, horizontal: 8),
      child: Text('Second'),
    ),
  },
);

NeuText

这是一个可以实现 Neumorphism 的文本小部件。parentColor、spread、depth、style、emboss 是此小部件的属性，可以进行修改以获得不同的效果。

NeuText('Lorem Ipsum')

NeuTextField

这是一个文本编辑小部件，类似于 Material 的 TextField，它还有一些额外的属性，例如：
支持使用自定义选择控件。

NeuTextField(
  controller: _controller,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Write',
  ),
)

NeuBackButton

一个 Neumorphic 设计的返回按钮。

由 NeuAppBar 使用。

NeuAppBar

一个 Neumorphic 设计的应用栏。
此应用栏由一个 leading 小部件和 title 小部件组成。

应用栏通常在 Scaffold.appBar 属性中使用，它将应用栏作为固定高度的小部件放置在屏幕顶部。

NeuAppBar(
  title: Text('This is title'),
)

NeuApp

NeumorphicApp 实现了 WidgetsApp 的实例，该实例利用 NeuThemeData 为您的应用程序添加主题。

NeuThemeData 也将 ThemeData 添加到小部件树中，因此您不必担心再次使用 MaterialApp。Material 小部件不会产生副作用。

您可以使用 NeuTheme.of(context) 访问当前 Neumorphic NeuThemeData。您也可以使用
Theme.of(context) 获取 ThemeData。

NeumorphicApp(
  theme: NeumorphicThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.blueGrey,
    curveType: curveType.concave,
    lightSource: LightSource.topLeft, // Not implemented yet
  ),
  home: Scaffold(
    appBar: NeuAppBar(
      title: const Text('NeumorphicApp Theme'),
    ),
  ),
)

限制

  • 并非所有小部件都当前使用 NeuThemeData。这将在该包的后续更新中进行更改。
  • NeuTextField 目前与 Material 的 TextField 没有太大区别。

您可以在 Neumorphic 的 GitHub 问题页面上提交功能请求或报告问题。

GitHub

https://github.com/neumorphic/neumorphic.flutter