Flutter仿拟态风格应用栏插件material_neumorphic_app_bar的使用

Flutter仿拟态风格应用栏插件material_neumorphic_app_bar的使用

使用说明

NeumorphicAppBar 是 Material Neumorphic 组件套件的一部分。它是一种具有仿拟态风格的应用栏，其参数与标准的 AppBar 类相同。

NeumorphicAppBar(
    leading: _showLeading
        ? NeumorphicButton(
            style: NeumorphicStyle(color: theme.colorScheme.primary),
            onPressed: () {
                // Navigator.of(context).pop();
            },
            child: const Icon(Icons.menu))
        : null,
    actionSpacing: 10,
    actions: _showActions
        ? [
            NeumorphicButton(
                style: NeumorphicStyle(color: theme.colorScheme.primary),
                onPressed: () {
                    // Navigator.of(context).pop();
                },
                child: const Icon(Icons.message_rounded)),
            NeumorphicButton(
                style: NeumorphicStyle(color: theme.colorScheme.primary),
                onPressed: () {
                    // Navigator.of(context).pop();
                },
                child: const Icon(Icons.account_circle))
            ]
        : null,
    title: Text(
        'Neumorphic AppBar',
        style: theme.textTheme.titleLarge!.copyWith(
            color: theme.colorScheme.onPrimary,
        ),
    ),
),

完整示例 Demo

下面是一个完整的示例，展示了如何在 Flutter 应用中使用 NeumorphicAppBar：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: NeumorphicAppBar(
          leading: _showLeading
              ? NeumorphicButton(
                  style: NeumorphicStyle(color: Theme.of(context).colorScheme.primary),
                  onPressed: () {
                    // Navigator.of(context).pop();
                  },
                  child: const Icon(Icons.menu))
              : null,
          actionSpacing: 10,
          actions: _showActions
              ? [
                  NeumorphicButton(
                      style: NeumorphicStyle(color: Theme.of(context).colorScheme.primary),
                      onPressed: () {
                        // Navigator.of(context).pop();
                      },
                      child: const Icon(Icons.message_rounded)),
                  NeumorphicButton(
                      style: NeumorphicStyle(color: Theme.of(context).colorScheme.primary),
                      onPressed: () {
                        // Navigator.of(context).pop();
                      },
                      child: const Icon(Icons.account_circle))
                ]
              : null,
          title: Text(
            'Neumorphic AppBar',
            style: Theme.of(context).textTheme.titleLarge!.copyWith(
              color: Theme.of(context).colorScheme.onPrimary,
            ),
          ),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

更多关于Flutter仿拟态风格应用栏插件material_neumorphic_app_bar的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是如何在Flutter应用中使用material_neumorphic_app_bar插件来实现仿拟态风格的应用栏的示例代码。这个插件提供了一个具有深度和质感的应用栏，非常适合追求现代设计感的应用。

首先，确保你已经在pubspec.yaml文件中添加了material_neumorphic_app_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  material_neumorphic_app_bar: ^最新版本号  # 请替换为当前最新版本号

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

接下来，你可以在你的Flutter应用中使用MaterialNeumorphicAppBar组件。以下是一个简单的示例：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MaterialNeumorphicAppBar(
        title: Text('Neumorphic App Bar'),
        centerTitle: true,
        elevation: 10,
        depth: 10,
        intensity: 0.5, // 控制拟态效果的强度
        color: Colors.grey[300]!,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          ),
        ],
      ),
      body: Center(
        child: Text('Hello, Neumorphic App Bar!'),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，并在主页面(MyHomePage)中使用了MaterialNeumorphicAppBar。这里是一些关键参数的解释：

  • title: 应用栏的标题。
  • centerTitle: 是否将标题居中显示。
  • elevation: 应用栏的阴影高度，类似于Material Design中的阴影效果。
  • depth: 拟态效果的深度，数值越大，深度效果越明显。
  • intensity: 拟态效果的强度，数值在0到1之间，越接近1效果越明显。
  • color: 应用栏的背景颜色。
  • leading: 应用栏左侧的图标按钮，通常用于导航菜单。
  • actions: 应用栏右侧的图标按钮集合，可以放置多个操作按钮，如搜索、设置等。

你可以根据需要调整这些参数，以达到你想要的拟态效果。material_neumorphic_app_bar插件还提供了更多自定义选项，你可以查阅其官方文档以了解更多细节。

回到顶部