Flutter按钮堆叠插件get_buttons_stack的使用

Flutter按钮堆叠插件get_buttons_stack的使用

简介

get_buttons_stack 库是一组用于简化实现各种社交登录按钮和网络操作按钮的 Flutter 按钮集合。这些按钮高度可定制，可以轻松地与您的应用设计和品牌匹配。

安装

要使用此库，您需要将其作为依赖项添加到 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  get_buttons_stack: ^1.0.0  # 替换为最新版本

然后运行 flutter pub get 来获取库。

使用

要使用库中提供的任何按钮，导入相应的按钮文件并在您的 Flutter 项目中添加按钮小部件：

import 'package:flutter/material.dart';
import 'package:get_buttons_stack/customised_button.dart';
import 'package:get_buttons_stack/social/google_sign_in_button.dart';

class MyLoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页面'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CustomizedButton(
              onPressed: () {
                // 处理按钮点击事件
              },
              text: '自定义按钮',
              // 自定义按钮属性
            ),
            SizedBox(height: 16),
            GoogleSignInButton(
              onPressed: () {
                // 处理 Google 登录按钮点击事件
              },
            ),
            // 添加其他按钮
          ],
        ),
      ),
    );
  }
}

可用按钮

自定义按钮

CustomisedButton 是一个多功能的自定义 Flutter 小部件，允许您创建高度可定制的按钮，具有多种配置。

使用

要使用 CustomisedButton，导入包并将其添加到您的 UI 中：

import 'package:flutter/material.dart';
import 'package:get_buttons_stack/customised_button.dart';

class MyButtonPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮页面'),
      ),
      body: Center(
        child: CustomisedButton(
          onPressed: () {
            // 处理按钮点击事件
            // 添加按钮的逻辑
          },
          // 根据需要自定义按钮属性
        ),
      ),
    );
  }
}
自定义

CustomisedButton 提供了一些属性来定制其外观：

  • text: 按钮的标题或标签。
  • radius: 按钮的圆角半径（默认：0）。
  • width: 按钮的可选宽度。
  • height: 按钮的高度（默认：40）。
  • fontSize: 标题文本的字体大小（默认：15）。
  • backgroundColor: 按钮的背景颜色（默认：Colors.white）。
  • fontColor: 标题文本的字体颜色。
  • imageColor: 图标或图像的颜色。
  • isElevated: 标志，指示按钮是否应具有阴影效果（默认：true）。
  • fontFamily: 按钮文本的自定义字体族。
  • alignment: 按钮内容的对齐方式（默认：MainAxisAlignment.start）。
  • isBorderEnabled: 标志，指示按钮是否应具有边框（默认：false）。
  • borderColor: 边框的颜色。
  • borderWidth: 按钮的边框宽度。
  • fontWeight: 标题文本的字体粗细（默认：FontWeight.w500）。
  • iconSize: 图标或图像的大小（默认：null）。
  • isContentWrapped: 标志，指示按钮的内容是否应被包裹（默认：false）。
  • icon: 要在按钮中显示的图标（要么使用 icon 或 imagePath）。
  • imagePath: 要在按钮中显示的图像路径（要么使用 icon 或 imagePath）。
  • onPressed: 按钮按下时执行的回调函数（必需）。

您可以根据应用的设计和需求修改这些属性。

示例

自定义按钮

Google 登录按钮

GoogleSignInButton 是一个自定义的 Flutter 小部件，旨在在您的应用中显示一个 Google 登录按钮。此按钮允许用户使用他们的 Google 账户登录。它高度可定制，允许您调整各种属性，如标题、按钮外观、字体大小等。

使用

要使用 GoogleSignInButton，导入包并将其添加到您的 UI 中：

import 'package:flutter/material.dart';
import 'package:get_buttons_stack/google_sign_in_button.dart';

class MyLoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页面'),
      ),
      body: Center(
        child: GoogleSignInButton(
          onPressed: () {
            // 处理 Google 登录按钮点击事件
            // 添加您的 Google 登录逻辑
          },
          // 根据需要自定义按钮属性
        ),
      ),
    );
  }
}
自定义

GoogleSignInButton 提供了几个属性来自定义其外观，具体参见 Google 登录按钮指南：

  • title: 按钮的标题或标签（默认：“Sign in with Google”）。
  • isCaps: 标志，指示标题是否应显示为全大写字母（默认：false）。
  • radius: 按钮的圆角半径（默认：0）。
  • width: 按钮的可选宽度。
  • isDark: 标志，指示按钮是否应具有深色主题（默认：false）。
  • height: 按钮的高度（默认：40）。
  • isContentWrapped: 标志，指示按钮的内容是否应被包裹（默认：true）。
  • onPressed: 按钮按下时执行的回调函数（必需）。

您可以根据应用的设计和需求修改这些属性。

示例

Google 登录按钮

Facebook 登录按钮

FacebookSignButton 是一个自定义的 Flutter 小部件，旨在在您的应用中显示一个 Facebook 登录按钮。此按钮允许用户使用他们的 Facebook 账户登录。它高度可定制，允许您调整各种属性，如标题、按钮外观、字体大小等。

使用

要使用 FacebookSignButton，导入包并将其添加到您的 UI 中：

import 'package:flutter/material.dart';
import 'package:get_buttons_stack/facebook_sign_button.dart';
// -----------------------OR--------------------\
import 'package:get_buttons_stack/get_buttons_stack.dart';

class MyLoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页面'),
      ),
      body: Center(
        child: FacebookSignButton(
          onPressed: () {
            // 处理 Facebook 登录按钮点击事件
            // 添加您的 Facebook 登录逻辑
          },
          // 根据需要自定义按钮属性
        ),
      ),
    );
  }
}
自定义

FacebookSignButton 提供了几个属性来自定义其外观。自定义属性是根据 Facebook 按钮设计指南 添加的。在应用自定义之前，请检查链接。

  • title: 按钮的标题或标签（默认：“Continue with Facebook”）。
  • inCaps: 标志，指示标题是否应显示为全大写字母（默认：false）。
  • radius: 按钮的圆角半径（默认：0）。
  • width: 如果您想设置固定宽度，请使用此参数。
  • height: 按钮的高度（默认：40）。
  • isContentWrapped: 标志，指示按钮的内容是否应被包裹（默认：true）。
  • alignment: 按钮内容的水平对齐方式（默认：MainAxisAlignment.start），可能的值包括 MainAxisAlignment.start、MainAxisAlignment.center 和 MainAxisAlignment.end。
  • isTextOnly: 标志，指示按钮是否仅显示文本（默认：false）。
  • buttonColorTheme: 按钮的颜色主题（默认：ButtonColorTheme.blueWithWhite）。
  • onPressed: 按钮按下时执行的回调函数（必需）。

buttonColorTheme 属性允许您从四种不同的颜色主题中选择按钮的主题：

  1. ButtonColorTheme.blueWithWhite: 蓝色背景，白色文字。
  2. ButtonColorTheme.whiteWithBlue: 白色背景，蓝色文字。
  3. ButtonColorTheme.blackWithWhite: 黑色背景，白色文字。
  4. ButtonColorTheme.whiteWithBlack: 白色背景，黑色文字。

您可以根据应用的设计和需求修改这些属性。

示例

Facebook 登录按钮

Microsoft 登录按钮

MicrosoftSignInButton 是一个自定义的 Flutter 小部件，旨在在您的应用中显示一个 Microsoft 登录按钮。此按钮允许用户使用他们的 Microsoft 账户登录。它高度可定制，允许您调整各种属性，如按钮外观、主题、字体大小等。

使用

要使用 MicrosoftSignInButton，导入包并将其添加到您的 UI 中：

import 'package:flutter/material.dart';
import 'package:get_buttons_stack/microsoft_sign_in_button.dart';

class MyLoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页面'),
      ),
      body: Center(
        child: MicrosoftSignInButton(
          onPressed: () {
            // 处理 Microsoft 登录按钮点击事件
            // 添加您的 Microsoft 登录逻辑
          },
          // 根据需要自定义按钮属性
        ),
      ),
    );
  }
}
自定义

MicrosoftSignInButton 提供了几个属性来自定义其外观，具体参见 Microsoft 登录按钮指南：

  • radius: 按钮的圆角半径（默认：0）。
  • width: 按钮的可选宽度。
  • isDark: 标志，指示按钮是否应具有深色主题（默认：false）。
  • isShortend: 标志，指示按钮文本是否应缩短（默认：false）。
  • alignment: 按钮内容的对齐方式（默认：MainAxisAlignment.center）。
  • isContentWrapped: 标志，指示按钮的内容是否应被包裹（默认：true）。
  • isBorderEnabled: 标志，指示按钮是否应具有边框（默认：false）。
  • height: 按钮的高度（默认：41.0）。
  • isCaps: 标志，指示按钮文本是否应显示为全大写字母（默认：false）。
  • onPressed: 按钮按下时执行的回调函数（必需）。

您可以根据应用的设计和需求修改这些属性。

示例

Microsoft 登录按钮 Microsoft 登录按钮2

Apple 登录按钮

AppleSignInButton 是一个自定义的 Flutter 小部件，旨在在您的应用中显示一个 Apple 登录按钮。此按钮允许用户使用他们的 Apple ID 登录。它高度可定制，允许您调整各种属性，如标题、按钮外观、字体大小、图标大小等。

使用

要使用 AppleSignInButton，导入必要的包并将其添加到您的 UI 中：

import 'package:flutter/material.dart';
import 'package:get_buttons_stack/apple_sign_in_button.dart';

class MyLoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页面'),
      ),
      body: Center(
        child: AppleSignInButton(
          onPressed: () {
            // 处理 Apple 登录按钮点击事件
            // 添加您的 Apple 登录逻辑
          },
          // 根据需要自定义按钮属性
        ),
      ),
    );
  }
}
自定义

AppleSignInButton 提供了几个属性来自定义其外观，具体参见 Apple 设计指南：

  • title: 按钮的标题或标签（默认：“Sign in with Apple”）。
  • radius: 按钮的圆角半径（默认：4）。
  • width: 按钮的可选宽度。
  • isDark: 标志，指示按钮是否应具有深色主题（默认：false）。
  • isBorderedEnabled: 标志，指示按钮是否应具有边框（默认：false）。
  • alignment: 按钮内容的对齐方式（默认：MainAxisAlignment.start）。
  • isContentWrapped: 标志，指示按钮的内容是否应被包裹（默认：true）。
  • fontFamily: 最好是系统字体，但苹果允许根据需要或设计要求更改字体族。
  • fontWeight: 默认字体粗细为半粗体，但苹果允许用户根据设计需求设置字体粗细。
  • isCaps: 标志，指示标题是否应显示为全大写字母（默认：false）。
  • height: 按钮的高度（默认：44）。
  • onPressed: 按钮按下时执行的回调函数（必需）。

您可以根据应用的设计和需求修改这些属性。

示例

Apple 登录按钮

GitHub 登录按钮

GithubSignInButton 是一个自定义的 Flutter 小部件，旨在在您的应用中显示一个 GitHub 登录按钮。此按钮允许用户使用他们的 GitHub 账户登录。它高度可定制，允许您调整各种属性，如标题、按钮外观、字体大小、图标大小等。

使用

要使用 GithubSignInButton，导入必要的包并将其添加到您的 UI 中：

import 'package:flutter/material.dart';
import 'package:get_buttons_stack/github_sign_in_button.dart';

class MyLoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录页面'),
      ),
      body: Center(
        child: GithubSignInButton(
          onPressed: () {
            // 处理 GitHub 登录按钮点击事件
            // 添加您的 GitHub 登录逻辑
          },
          // 根据需要自定义按钮属性
        ),
      ),
    );
  }
}
自定义

GithubSignInButton 提供了几个属性来自定义其外观：

  • title: 按钮的标题或标签（默认：“Sign in with Github”）。
  • radius: 按钮的圆角半径（默认：0）。
  • width: 按钮的可选宽度。
  • height: 按钮的高度（默认：40）。
  • fontSize: 标题文本的字体大小（默认：15）。
  • fontFamily: 您想要使用的字体，根据您的设计需求。
  • backgroundColor: 按钮的背景颜色（默认：Colors.white）。
  • fontColor: 标题文本的字体颜色，也会分配给图标。
  • alignment: 按钮内容的对齐方式（默认：MainAxisAlignment.start）。可能的值有 MainAxisAlignment.start、MainAxisAlignment.center 和 MainAxisAlignment.end。
  • isBorderEnabled: 标志，指示按钮是否应具有边框（默认：false）。
  • fontWeight: 标题文本的字体粗细（默认：FontWeight.w500）。
  • iconSize: GitHub 图标大小（默认：24）。
  • isContentWrapped: 标志，指示按钮的内容是否应被包裹（默认：false）。
  • onPressed: 按钮按下时执行的回调函数（必需）。

您可以根据应用的设计和需求修改这些属性。

示例

GitHub 登录按钮

网络按钮

NetworkButton 是一个自定义的 Flutter 小部件，旨在创建一个可以在按钮中显示图标或图像以及可选文本标签的按钮。此按钮特别适用于在等待网络操作完成时向用户提供视觉反馈，例如加载数据或执行身份验证请求。

使用

要使用 NetworkButton，导入必要的包并将其添加到您的 UI 中：

import 'package:flutter/material.dart';
import 'package:get_buttons_stack/network_button.dart';

class MyButtonPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('按钮页面'),
      ),
      body: Center(
        child: NetworkButton(
          onPressed: (changeState, state) {
            // 添加您的按钮逻辑
            // 调用 `changeState` 函数以在 'idle' 和 'spinning' 状态之间切换
          },
          // 根据需要自定义按钮属性
        ),
      ),
    );
  }
}

更多关于Flutter按钮堆叠插件get_buttons_stack的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter按钮堆叠插件get_buttons_stack的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，get_buttons_stack 是一个用于 Flutter 的按钮堆叠插件，它允许开发者在单个位置堆叠多个按钮，并根据需要显示或隐藏这些按钮。以下是一个基本的使用示例，展示如何在 Flutter 应用中使用 get_buttons_stack 插件。

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

dependencies:
  flutter:
    sdk: flutter
  get_buttons_stack: ^最新版本号  # 请替换为最新的版本号

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

接下来，你可以在你的 Flutter 应用中使用 GetButtonsStack 组件。以下是一个完整的示例代码：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<GetButton> buttons = [
    GetButton(
      child: IconButton(
        icon: Icon(Icons.add),
        onPressed: () {
          print('Add button pressed');
        },
      ),
      key: UniqueKey(),
    ),
    GetButton(
      child: IconButton(
        icon: Icon(Icons.edit),
        onPressed: () {
          print('Edit button pressed');
        },
      ),
      key: UniqueKey(),
    ),
    GetButton(
      child: IconButton(
        icon: Icon(Icons.delete),
        onPressed: () {
          print('Delete button pressed');
        },
      ),
      key: UniqueKey(),
    ),
  ];

  int selectedButtonIndex = 0;

  void changeSelectedButton(int index) {
    setState(() {
      selectedButtonIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GetButtonsStack Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Button: ${selectedButtonIndex == 0 ? 'Add' : selectedButtonIndex == 1 ? 'Edit' : 'Delete'}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            GetButtonsStack(
              alignment: Alignment.center,
              buttons: buttons,
              selectedButtonIndex: selectedButtonIndex,
              onButtonSelected: changeSelectedButton,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Example of programmatically changing the selected button
          setState(() {
            selectedButtonIndex = (selectedButtonIndex + 1) % buttons.length;
          });
        },
        tooltip: 'Next Button',
        child: Icon(Icons.navigate_next),
      ),
    );
  }
}

在这个示例中：

  1. 我们定义了三个按钮（添加、编辑、删除），每个按钮都是一个 IconButton。
  2. 我们将这些按钮添加到 GetButtonsStack 组件中，并通过 selectedButtonIndex 来控制当前显示的按钮。
  3. onButtonSelected 回调用于更新 selectedButtonIndex，当用户点击按钮时，会显示下一个按钮。
  4. 我们还添加了一个 FloatingActionButton，用于程序化地更改当前显示的按钮。

你可以根据需要自定义按钮的样式和行为。希望这个示例能帮助你理解如何在 Flutter 中使用 get_buttons_stack 插件。

回到顶部