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

A simple implementation for neumorphic UI for flutter. Feel free to check it out :>

安装

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

dependencies:
  neumorphic_plugin: ^0.0.1

然后在 .dart 文件中导入：

import 'package:neumorphic_plugin/neumorphic_plugin.dart';

使用

要创建一个简单的拟物风格按钮，可以写如下代码：

// 导入必要的包
import 'package:flutter/material.dart';
import 'package:neumorphic_plugin/neumorphic_plugin.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Neumorphic Plugin 示例'),
        ),
        body: Center(
          child: NeumorphicButton(
            // 点击事件回调
            onTap: () {
              print('按钮被点击了！');
            },
            // 按钮内边距
            padding: const EdgeInsets.all(10.0),
            // 背景色（应与背景色相同）
            backgroundColor: Colors.grey[800],
            // 按钮高度
            height: 100,
            // 圆角半径
            borderRadius: 10,
            // 阴影偏移倍数
            shadowOffsetMultiplier: 5,
            // 阴影模糊半径
            shadowBlurRadius: 5,
            // 按钮内部的子组件
            child: const Text(
              'Click me!',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 25,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter拟物风格设计插件neumorphic_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼•6 天前

更多关于Flutter拟物风格设计插件neumorphic_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

neumorphic 是一个用于 Flutter 的拟物风格（Neumorphism）设计插件，它可以帮助你轻松地在应用中实现拟物风格的 UI 设计。拟物风格是一种介于扁平设计和拟真设计之间的设计风格，通过使用阴影和高光来创建凸起或凹陷的效果。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 neumorphic 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  neumorphic: ^3.0.3  # 请查看最新版本

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

基本使用

neumorphic 插件提供了 Neumorphic 组件，你可以使用它来包裹其他组件，从而实现拟物风格的效果。

1. 创建一个简单的拟物按钮

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: NeumorphicTheme.baseColor(context),
        body: Center(
          child: NeumorphicButton(
            onPressed: () {
              // 按钮点击事件
            },
            style: NeumorphicStyle(
              shape: NeumorphicShape.flat,
              boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
              depth: 8,
              intensity: 0.7,
            ),
            child: Text(
              'Click Me',
              style: TextStyle(color: Colors.black),
            ),
          ),
        ),
      ),
    );
  }
}

2. 创建一个拟物风格的卡片

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: NeumorphicTheme.baseColor(context),
        body: Center(
          child: Neumorphic(
            style: NeumorphicStyle(
              shape: NeumorphicShape.flat,
              boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
              depth: 8,
              intensity: 0.7,
            ),
            child: Container(
              width: 200,
              height: 100,
              child: Center(
                child: Text(
                  'Neumorphic Card',
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

自定义样式

NeumorphicStyle 提供了多个属性来自定义拟物风格的外观：

shape: 设置形状，可以是 NeumorphicShape.flat（扁平）或 NeumorphicShape.concave（凹陷）。
boxShape: 设置盒子的形状，可以是 NeumorphicBoxShape.circle（圆形）或 NeumorphicBoxShape.roundRect（圆角矩形）。
depth: 设置阴影的深度，正值表示凸起，负值表示凹陷。
intensity: 设置阴影的强度，值越大阴影越明显。
lightSource: 设置光源的方向，默认是 LightSource.topLeft。

主题

你还可以使用 NeumorphicTheme 来全局设置拟物风格的主题：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NeumorphicTheme(
        theme: NeumorphicThemeData(
          baseColor: Color(0xFFDDDDDD),
          lightSource: LightSource.topLeft,
          depth: 10,
        ),
        child: Scaffold(
          body: Center(
            child: NeumorphicButton(
              onPressed: () {
                // 按钮点击事件
              },
              child: Text(
                'Click Me',
                style: TextStyle(color: Colors.black),
              ),
            ),
          ),
        ),
      ),
    );
  }
}