Flutter自定义组件插件jio_widget的使用

jio_widget 是一个适用于Android和iOS平台的Flutter插件，它提供了自定义组件。

截图

使用方法

要使用此插件，请将其添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  jio_widget:

如何使用

以下是一个简单的示例，展示了如何使用 jio_widget 插件中的按钮组件：

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

void main() => runApp(const MainApp());

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        iconTheme: const IconThemeData(color: Colors.white),
        hintColor: Colors.red,
      ),
      home: const Test(),
    );
  }
}

class Test extends StatelessWidget {
  const Test({super.key});

  void _handleButtonClick(BuildContext context, String btn) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('$btn Button Pressed!'),
      backgroundColor: Colors.black26,
      duration: const Duration(milliseconds: 500),
    ));
    
    // 显示自定义弹窗
    if (btn == 'Alert') {
      JioAlertbox.showCustomAlertBox(
          context: context, 
          willDisplayWidget: Text('$btn Button Pressed!')
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black54,
      appBar: const JioAppbar(title: 'Home'),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              // Google 按钮
              JioButton(
                Buttons.google,
                onPressed: () {
                  _handleButtonClick(context, 'Google');
                },
                shape: const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(20)),
                ),
              ),
              const SizedBox(height: 10),

              // Facebook 按钮
              JioButton(
                Buttons.facebook,
                onPressed: () {
                  _handleButtonClick(context, 'Facebook');
                },
              ),
              const SizedBox(height: 10),

              // Apple 按钮
              JioButton(
                Buttons.apple,
                onPressed: () {
                  _handleButtonClick(context, 'Apple');
                },
              ),
              const SizedBox(height: 10),

              // Microsoft 按钮
              JioButton(
                Buttons.microsoft,
                onPressed: () {
                  _handleButtonClick(context, 'Microsoft');
                },
              ),
              const SizedBox(height: 10),

              // GitHub 按钮
              JioButton(
                Buttons.gitHub,
                text: "Sign up with GitHub",
                onPressed: () {
                  _handleButtonClick(context, 'Github');
                },
              ),
              const SizedBox(height: 10),

              // Twitter 按钮
              JioButton(
                Buttons.twitter,
                text: "Sign In with Twitter",
                onPressed: () {
                  _handleButtonClick(context, 'Twitter');
                },
              ),
              const SizedBox(height: 10),

              // Alert 按钮
              JioButton(
                Buttons.alert,
                text: "Click to show Alert!",
                onPressed: () {
                  _handleButtonClick(context, 'Alert');
                },
              ),
              const SizedBox(height: 10),

              // Empty Widget 按钮
              JioButton(
                Buttons.emptywidget,
                text: "Click to show Empty Widget",
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => JioEmptyWidget(
                              ontap: () => Navigator.of(context).pop())));
                },
              ),
              const SizedBox(height: 10),
            ],
          ),
        ),
      ),
    );
  }
}

按钮列表

• Buttons.google
• Buttons.facebook
• Buttons.microsoft
• Buttons.apple
• Buttons.gitHub
• Buttons.twitter
• Buttons.alert
• Buttons.emptywidget

许可证

版权 © 2024 Jiocoders

许可协议如下：

版权所有 (c) 2024 Jiocoders

特此免费授予获得本软件及相关文档文件（以下简称“软件”）副本的任何人无限制地使用该软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件的副本，并允许被许可人向其提供软件的人员这样做，但须遵守以下条件：

上述版权声明及本许可声明应包含在所有副本或实质性部分的软件中。

本软件按“原样”提供，不附带任何明示或暗示的保证，包括但不限于适销性、特定用途适用性和非侵权性的保证。在任何情况下，作者或版权持有人均不对因使用本软件或与本软件相关的其他行为而引起的任何索赔、损害或其他责任负责。