Flutter拟物化设计插件neumorphic_kit的使用

Flutter拟物化设计插件neumorphic_kit的使用

Neumorphic Kit

Neumorphic Kit 是一个用于创建拟物化UI组件的 Flutter 插件。

特性

  • NeumorphicContainer: 具有拟物化样式的容器。
  • NeumorphicCard: 具有拟物化样式的卡片。
  • NeumorphicButton: 具有拟物化样式的按钮。

安装

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

dependencies:
  neumorphic_kit: ^0.1.0

然后运行：

flutter pub get

使用

下面是一个完整的示例代码，展示了如何使用 neumorphic_kit 创建拟物化样式的设计组件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义主题样式
    final theme = NeumorphicTheme(
      baseColor: Color(0xFFE0E5EC),
      shadowDarkColor: Color(0x4D000000),
      shadowLightColor: Color(0xCCFFFFFF),
      depth: 8.0,
      intensity: 0.5,
      lightSource: Offset(-1, -1),
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('拟物化设计')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Neumorphic容器
              NeumorphicContainer(
                theme: theme,
                borderRadius: 16.0,
                padding: const EdgeInsets.all(16.0),
                child: Text(
                  '拟物化容器',
                  style: TextStyle(fontSize: 18),
                ),
              ),
              SizedBox(height: 20), // 添加间距
              // Neumorphic卡片
              NeumorphicCard(
                theme: theme,
                borderRadius: 16.0,
                padding: const EdgeInsets.all(16.0),
                child: Text(
                  '拟物化卡片',
                  style: TextStyle(fontSize: 18),
                ),
              ),
              SizedBox(height: 20), // 添加间距
              // Neumorphic按钮
              NeumorphicButton(
                theme: theme,
                borderRadius: 16.0,
                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
                onPressed: () {
                  print('拟物化按钮被按下');
                },
                child: Text(
                  '拟物化按钮',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


neumorphic_kit 是一个用于 Flutter 的拟物化设计插件，它可以帮助开发者轻松地在应用中实现拟物化（Neumorphic）设计风格。拟物化设计是一种通过模拟物理世界的阴影和高光来创建 UI 元素的设计风格，通常用于创建具有深度和质感的界面。

安装 neumorphic_kit

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

dependencies:
  flutter:
    sdk: flutter
  neumorphic_kit: ^1.0.0  # 请使用最新版本

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

基本使用

neumorphic_kit 提供了多种拟物化风格的组件，如 NeumorphicContainer、NeumorphicButton、NeumorphicText 等。以下是一些基本的使用示例。

1. 使用 NeumorphicContainer

NeumorphicContainer 是一个可以包裹任何内容的容器，具有拟物化效果。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Neumorphic Design'),
      ),
      body: Center(
        child: NeumorphicContainer(
          width: 200,
          height: 200,
          depth: 10,  // 控制阴影的深度
          color: Colors.grey[300],
          child: Center(
            child: Text('Hello Neumorphic!'),
          ),
        ),
      ),
    );
  }
}

2. 使用 NeumorphicButton

NeumorphicButton 是一个拟物化风格的按钮。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Neumorphic Design'),
      ),
      body: Center(
        child: NeumorphicButton(
          onPressed: () {
            print('Button Pressed!');
          },
          child: Text('Press Me'),
          depth: 8,
          color: Colors.grey[300],
        ),
      ),
    );
  }
}

3. 使用 NeumorphicText

NeumorphicText 是一个拟物化风格的文本组件。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Neumorphic Design'),
      ),
      body: Center(
        child: NeumorphicText(
          text: 'Hello Neumorphic!',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          depth: 6,
          color: Colors.grey[300],
        ),
      ),
    );
  }
}

自定义拟物化效果

neumorphic_kit 提供了多种参数来自定义拟物化效果，例如 depth、intensity、lightSource 等。你可以根据需要调整这些参数来实现不同的视觉效果。

示例：调整 depth 和 intensity

NeumorphicContainer(
  width: 200,
  height: 200,
  depth: 15,  // 增加深度
  intensity: 0.8,  // 调整光照强度
  color: Colors.grey[300],
  child: Center(
    child: Text('Custom Neumorphic!'),
  ),
);
回到顶部