Flutter材质霓虹背景插件material_neumorphic_background的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter 材质霓虹背景插件 material_neumorphic_background 的使用

Material Neumorphic Background

这部分是来自 Material Neumorphic 组件套件的一部分。

使用方法

NeumorphicBackground 是一个容器，它会将当前的 [NeumorphicTheme] 主色调作为背景色。您可以参考 [NeumorphicTheme] 获取更多信息。

默认情况下，颜色是从材料颜色方案中获取的，即 [secondaryContainer]。

此外，通过 [borderRadius]、[margin] 和 [backendColor]，它可以提供屏幕边界的圆角裁剪。

NeumorphicBackground(
    borderRadius: BorderRadius.circular(12), // 设置圆角半径
    margin: EdgeInsets.all(12), // 设置外边距
    child: Container(
        height: 100, // 设置容器高度
        width: 100, // 设置容器宽度
    ),
),

完整示例 Demo

下面是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 NeumorphicBackground 插件。

import 'package:flutter/material.dart';
import 'package:material_neumorphic/material_neumorphic.dart'; // 导入 material_neumorphic 包

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Neumorphic 背景示例'),
        ),
        body: Center(
          child: NeumorphicBackground(
            borderRadius: BorderRadius.circular(12), // 设置圆角半径
            margin: EdgeInsets.all(12), // 设置外边距
            child: Container(
              height: 100, // 设置容器高度
              width: 100, // 设置容器宽度
              color: Colors.blue, // 设置容器内部颜色
              child: Center(child: Text('Hello Neumorphic!')), // 中心显示文本
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter材质霓虹背景插件material_neumorphic_background的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter材质霓虹背景插件material_neumorphic_background的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个使用 material_neumorphic_background 插件在 Flutter 中创建霓虹背景效果的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  material_neumorphic_background: ^latest_version  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用 MaterialNeumorphicBackground 来创建霓虹背景。下面是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Neumorphic Background Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NeumorphicBackgroundScreen(),
    );
  }
}

class NeumorphicBackgroundScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Neumorphic Background Demo'),
      ),
      body: Center(
        child: MaterialNeumorphicBackground(
          blur: 10.0,
          intensity: 0.5,
          color: Colors.blue.withOpacity(0.7),
          shape: BoxShape.circle, // 可以是 BoxShape.rectangle 或 BoxShape.circle
          child: Container(
            width: 300,
            height: 300,
            alignment: Alignment.center,
            child: Text(
              'Hello, Neumorphic!',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
            decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.circular(150), // 确保与 shape 一致
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. MaterialNeumorphicBackground 是一个自定义的霓虹背景组件。
  2. blur 属性控制模糊程度。
  3. intensity 属性控制霓虹效果的强度。
  4. color 属性设置霓虹颜色的透明度和主色调。
  5. shape 属性定义背景的形状，可以是圆形 (BoxShape.circle) 或矩形 (BoxShape.rectangle)。
  6. child 属性包含你想要在霓虹背景上显示的内容。

你可以根据需要调整这些属性来创建不同的霓虹背景效果。注意，material_neumorphic_background 插件的具体 API 可能会随着版本更新而变化，所以请查阅最新的文档以获取最新的使用方法和属性。

回到顶部