Flutter按钮展示插件buttons_showcase的使用

Flutter按钮展示插件buttons_showcase的使用

安装

在pubspec.yaml文件中添加依赖：

dependencies:
...
buttons_showcase: ^0.0.4

使用示例

首先，导入buttons_showcase包：

import 'package:buttons_showcase/buttons_showcase.dart';

BaseButton类定义如下：

class BaseButton extends StatelessWidget {
  BaseButton(
    {
      this.textCaps = false,
      this.showLogo = true,
      this.customText,
      this.size = "M",
      this.iconType = 0,
      this.customShape,
      this.function,
      required this.social,
    }) : super(key: key);

  // 其他属性和方法
}

各种不同的实现方式：

BaseButton(size: "S", social: listSocial[keyword]!),
BaseButton(size: "M", social: listSocial[keyword]!),
BaseButton(size: "L", social: listSocial[keyword]!),

// 控制图标部分
BaseButton(showLogo: false, social: listSocial[keyword]!),

// 控制文本部分
BaseButton(customText: "你的自定义文本", social: listSocial[keyword]!),

// 控制形状部分
BaseButton(customShape: "circle", social: listSocial[keyword]!),
BaseButton(customShape: "square", iconType: 1, social: listSocial[keyword])

Social类定义如下：

class Social {
  Social(this.name, this.color, this.textColor, this.logoPaths);

  String name;
  Color color, textColor;
  List<String> logoPaths;
}

Social实例示例：

Color githubColor = const Color(0xFF333333);
Color whiteColor = Colors.white;

Social(
  "GitHub",
  githubColor,
  whiteColor,
  [
    "assets/icons/github.png",
    "assets/icons/github_full.png",
    "assets/icons/github_outline.png"
  ]
)

Socials枚举包含以下按钮：

enum Socials {
  Amazon,
  Apple,
  Discord,
  Facebook,
  GitHub,
  Instagram,
  LinkedIn,
  Microsoft,
  Pinterest, 
  Snapchat,
  Spotify,
  Telegram,
  TikTok,
  Twitch,
  Twitter,
  WhatsApp,
  Yahoo
}

示例代码

以下是完整的示例代码，展示了如何使用buttons_showcase插件。

主页 (homepage.dart)

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

class Homepage extends StatelessWidget {
  final List<Social> listSocial = [
    Social("GitHub", const Color(0xFF333333), Colors.white, ["assets/icons/github.png"]),
    Social("Facebook", Colors.blue, Colors.white, ["assets/icons/facebook.png"]),
    Social("Twitter", Colors.blue, Colors.white, ["assets/icons/twitter.png"])
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buttons Showcase'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: listSocial.map((social) {
            return BaseButton(
              size: "M",
              showLogo: true,
              customText: null,
              textCaps: false,
              iconType: 0,
              customShape: null,
              function: () {},
              social: social,
            );
          }).toList(),
        ),
      ),
    );
  }
}

应用程序入口 (main.dart)

import 'package:flutter/material.dart';
import 'package:example/pages/homepage.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Buttons Showcase',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: const Homepage(),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter中使用buttons_showcase插件来展示按钮的示例代码。首先，你需要确保你的Flutter项目中已经添加了buttons_showcase依赖。你可以通过在你的pubspec.yaml文件中添加以下依赖来做到这一点：

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

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

接下来，你可以在你的Flutter应用中使用buttons_showcase来展示各种按钮。以下是一个简单的示例代码，展示了如何使用该插件：

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

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

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

class ButtonsShowcaseScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buttons Showcase Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Flutter Buttons Showcase:', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            // 使用ButtonsShowcaseWidget展示按钮
            ButtonsShowcaseWidget(
              // 配置按钮展示的参数
              buttonConfig: [
                {
                  'title': 'Flat Button',
                  'widget': FlatButton(
                    child: Text('Flat'),
                    onPressed: () {},
                  ),
                },
                {
                  'title': 'Elevated Button',
                  'widget': ElevatedButton(
                    child: Text('Elevated'),
                    onPressed: () {},
                  ),
                },
                {
                  'title': 'Outlined Button',
                  'widget': OutlinedButton(
                    child: Text('Outlined'),
                    onPressed: () {},
                  ),
                },
                {
                  'title': 'Text Button',
                  'widget': TextButton(
                    child: Text('Text'),
                    onPressed: () {},
                  ),
                },
                // 可以继续添加更多按钮配置
              ],
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，并在其中使用ButtonsShowcaseWidget来展示不同类型的按钮。ButtonsShowcaseWidget的buttonConfig参数是一个包含按钮配置的列表，每个配置包括按钮的标题和按钮的Widget。

请注意，buttons_showcase插件的实际API可能会有所不同，因此你可能需要参考该插件的官方文档来获取最新的使用方法和API。如果插件提供了更丰富的配置选项或自定义功能，你也可以根据文档进行进一步的配置和自定义。

回到顶部