Flutter主题风格插件neubrutalism_theme的使用

Flutter主题风格插件neubrutalism_theme的使用

特点

  • NeuButton: 具有两种动画类型的按钮。
  • 即将推出的功能: 卡片和容器。

开始使用

只需安装包 <code>flutter pub add neubrutalism_theme</code>，无需进一步操作。

使用方法

NeuButton 可以用作 <code>ElevatedButton</code>。

const myBtn = Center(
  child: NeuButton(
    btnType: NeuBtnType.round, // 设置按钮类型为圆形
    onPressed: () {
      isPressed = true; // 按钮按下时触发的操作
    },
    child: const Text('Test Button'), // 按钮上的文本
  ),
);

额外信息

此包仍在开发中，任何有关新设计或动画样式的建议都受到鼓励并接受。

示例代码

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

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

void main() {
  runApp(const MyApp()); // 运行应用
}

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建函数
    return MaterialApp(
      title: 'NeuBrtutalism Theme', // 应用标题
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 设置主题颜色方案
        useMaterial3: true, // 启用 Material 3 设计
      ),
      home: const MyHomePage(), // 主页面
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key}); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建函数
    String result = "No btn press"; // 初始化结果字符串

    return Scaffold( // 创建 Scaffold 小部件
      appBar: AppBar( // 创建 AppBar 小部件
        title: const Text("NeuBrutalism Theme"), // 设置 AppBar 的标题
      ),
      body: Column( // 创建 Column 小部件
        children: [
          NeuButton( // 创建 NeuButton 小部件
            btnType: NeuBtnType.round, // 设置按钮类型为圆形
            onPressed: () { // 设置按钮点击事件
              result = "Yes btn press"; // 更新结果字符串
            },
            child: const Text('Test Button'), // 设置按钮上的文本
          ),
          Text(result) // 显示结果字符串
        ],
      ),
    );
  }
}

更多关于Flutter主题风格插件neubrutalism_theme的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


neubrutalism_theme 是一个 Flutter 插件，可以帮助你轻松地在应用中应用 Neubrutalism 风格的主题。Neubrutalism 是一种现代设计风格，通常以大胆的颜色、简单的几何形状和强烈的对比度为特征。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  neubrutalism_theme: ^1.0.0  # 请根据实际情况使用最新版本

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

使用插件

  1. 导入插件

    在你的 Dart 文件中导入 neubrutalism_theme 插件：

    import 'package:neubrutalism_theme/neubrutalism_theme.dart';

  2. 应用主题

    你可以使用 NeubrutalismTheme 来包装你的应用或某个部分，以应用 Neubrutalism 风格的主题。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Neubrutalism Theme Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NeubrutalismTheme(
        child: HomeScreen(),
      ),
    );
  }
}

  3. 自定义主题

    你可以通过 NeubrutalismThemeData 来自定义主题的颜色、形状等属性。

    NeubrutalismTheme(
  data: NeubrutalismThemeData(
    primaryColor: Colors.blue,
    secondaryColor: Colors.white,
    shadowColor: Colors.black,
    borderRadius: BorderRadius.circular(8.0),
    elevation: 4.0,
  ),
  child: HomeScreen(),
);

  4. 使用主题

    在应用的任何地方，你可以通过 NeubrutalismTheme.of(context) 来获取当前的主题数据，并将其应用到你的 UI 组件中。

    class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = NeubrutalismTheme.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Neubrutalism Theme Demo'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16.0),
          decoration: BoxDecoration(
            color: theme.primaryColor,
            borderRadius: theme.borderRadius,
            boxShadow: [
              BoxShadow(
                color: theme.shadowColor,
                offset: Offset(theme.elevation, theme.elevation),
              ),
            ],
          ),
          child: Text(
            'Hello, Neubrutalism!',
            style: TextStyle(
              color: theme.secondaryColor,
              fontSize: 24.0,
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部