popped_button #

此包用于创建一个具有3D效果的弹出按钮。

预览 #

使用 #

以下是一个简单的示例，展示如何在 Flutter 中使用 `PoppedButton`：

PoppedButton(
    depth: 10.5, // 设置按钮的深度，控制3D效果
    color: Colors.yellow, // 设置按钮的颜色
    child: Center( // 子组件可以是任何 Widget
        child: Text(
            "点击我！", // 按钮上的文字
            style: TextStyle(fontWeight: FontWeight.bold), // 文字样式
        ),
    ),
    onPressed: () { // 按钮点击事件
        debugPrint("已按下"); // 打印日志
    },
)

贡献 #

如果你已经看到了这里，那么恭喜你🎉🎉🎉！你可以通过以下几种方式为 `popped_button.dart` 的社区做出贡献：

选择任何带有 “好第一问题” 标签的问题。
提议任何功能或增强功能。
报告错误。
修复错误。
编写和改进一些文档。文档至关重要，其重要性不可低估！
提交拉取请求 😊

example/lib/main.dart

```dart import 'package:flutter/material.dart'; import 'package:popped_button/popped_button.dart';

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

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

@override State<App> createState() => _AppState(); // 创建状态 }

class _AppState extends State<App> { @override Widget build(BuildContext context) { return MaterialApp( // 应用程序的入口 home: Scaffold( // 主页面 body: Center( // 页面居中 child: Container( // 容器 width: 200.0, // 宽度 height: 100.0, // 高度 child: PoppedButton( // 自定义弹出按钮 depth: 10.5, // 深度设置 color: Colors.yellow, // 颜色设置 child: Center( // 子组件居中 child: Text( “点击我！”, // 按钮文本 style: TextStyle(fontWeight: FontWeight.bold), // 字体加粗 )), onPressed: () { debugPrint(“已按下”); // 打印日志 }, ), ), ), ), ); } }

yibo5220 1楼•23 天前

更多关于Flutter自定义弹出按钮插件popped_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

popped_button 是一个 Flutter 插件，用于创建自定义的弹出按钮。它允许你定义按钮的样式、动画效果以及弹出的内容。以下是如何使用 popped_button 插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入插件

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

import 'package:popped_button/popped_button.dart';

3. 使用 `PoppedButton`

PoppedButton 是一个可以自定义的按钮，点击后会弹出内容。你可以通过设置 child 来定义按钮的外观，通过 popupChild 来定义弹出的内容。

以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Popped Button Example'),
        ),
        body: Center(
          child: PoppedButton(
            child: Container(
              padding: EdgeInsets.all(16.0),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Text(
                'Click Me',
                style: TextStyle(color: Colors.white, fontSize: 18.0),
              ),
            ),
            popupChild: Container(
              padding: EdgeInsets.all(16.0),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 10.0,
                    offset: Offset(0, 4),
                  ),
                ],
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('This is a popup!'),
                  SizedBox(height: 10),
                  ElevatedButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text('Close'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4. 自定义 `PoppedButton`

你可以通过以下属性来自定义 PoppedButton：

child: 定义按钮的外观。
popupChild: 定义弹出的内容。
direction: 定义弹出内容的方向（上、下、左、右）。
offset: 定义弹出内容的偏移量。
duration: 定义弹出动画的持续时间。
curve: 定义弹出动画的曲线。

例如，你可以设置弹出内容的方向为上方：

PoppedButton(
  direction: PopDirection.top,
  child: Text('Click Me'),
  popupChild: Text('Popup Content'),
);

Flutter自定义弹出按钮插件popped_button的使用