Flutter插件neobox的特性与使用

Flutter插件neobox的特性与使用

本文将带你了解如何在Flutter应用中使用neobox插件来创建现代UI设计。通过这个插件，开发者可以轻松地实现Neomorphic风格的设计。

Flutter插件neobox的特性

• 易于使用：只需几行代码即可创建美观的Neomorphic界面。
• 高度可定制化：可以通过多种参数调整样式。

开始使用Flutter插件neobox

要使用这个插件，请在你的pubspec.yaml文件中添加neobox作为依赖项。

dependencies:
  neobox: ^版本号

使用方法

简单示例

以下是一个简单的示例代码，展示如何使用NeoBox来创建一个具有Neomorphic风格的卡片：

NeoBox(
  blurRadius: 30,
  width: 100,
  height: 100,
  color: Colors.blueGrey,
  borderRadius: BorderRadius.circular(24),
  child: Center(
    child: Text(
      'Hello World!',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

完整示例

下面是一个完整的Flutter应用示例，展示了如何在应用中集成NeoBox组件。

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

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 应用的根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用标题
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 颜色主题
        useMaterial3: true, // 使用Material 3设计语言
      ),
      home: Home(), // 主页面
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  [@override](/user/override)
  State<Home> createState() => _HomeState(); // 创建状态
}

class _HomeState extends State<Home> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center( // 居中显示
        child: NeoBox(
          blurRadius: 30, // 模糊半径
          width: 100, // 卡片宽度
          height: 100, // 卡片高度
          color: Colors.blueGrey, // 背景色
          borderRadius: BorderRadius.circular(24), // 圆角半径
          child: Center( // 中心文本
            child: Text(
              'data',
              style: TextStyle(color: Colors.white), // 文本颜色
            ),
          ),
        ),
      ),
    );
  }
}