Flutter加载过渡按钮及社交功能插件tbib_loading_transition_button_and_social的使用

Flutter加载过渡按钮及社交功能插件tbib_loading_transition_button_and_social的使用

TBIB Loading Transition Button

一个可自定义的过渡按钮插件，用于Flutter。

开始使用

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  tbib_loading_transition_button_and_social: ^1.0.0

如何使用

在项目中添加以下导入语句：

import 'package:tbib_loading_transition_button_and_social/tbib_loading_transition_button_and_social.dart';

为了使用此小部件，您需要使用 LoadingButtonController 来处理不同的状态：

final _controller = LoadingButtonController();

此小部件在被点击时会启动加载动画，或者可以通过控制器来启动加载动画。您可以使用控制器来初始化错误动画或停止加载动画。

LoadingButton(
  color: Colors.blue,
  onSubmit: () => print('onSubmit'),
  controller: _controller,
  errorColor: Colors.red,
  transitionDuration: Duration(seconds: 1),
  child: Text(
    'Hit me!',
    style: Theme.of(context)
        .textTheme
        .bodyText1!
        .copyWith(color: Colors.white),
  ),
),

要支持页面跳转，必须调用 moveToScreen 方法：

_controller.moveToScreen(
  context: context,
  page: SearchPage(),
  stopAnimation: true,
  navigationCallback: (route) =>
      Navigator.of(context).push(route),
),

可用的小部件成功示例

LoadingButton(
  // v1.0.1
  borderSize: 8,
  boarderSide: BoarderSide.none, // 默认
  color: Colors.blue,
  onSubmit: () => print('onSubmit'),
  controller: _controller,
  errorColor: Colors.red,
  progressIndicatorColor: Colors.grey,
  durationSuccess: const Duration(seconds: 1),
  duration: const Duration(milliseconds: 500),
  successWidget: FaIcon(FontAwesomeIcons.checkCircle),
  transitionDuration: Duration(seconds: 1),
  child: Text(
    'Hit me!',
    style: Theme.of(context)
        .textTheme
        .bodyText1!
        .copyWith(color: Colors.white),
  ),
),

登录按钮

现在可以在Dart代码中使用登录按钮。

使用示例

它非常简单！

为了使用此小部件，您需要使用 LoadingSignButtonController 来处理不同的状态。

final _controller = LoadingSignButtonController();

LoadingSignButton(
  controller: _controller,
  buttonType: ButtonType.google,

  onPressed: () {
   print('click');
  })
  • ButtonSize 已在v 1.0.0中移除
LoadingSignButton(
  controller: _controller,
  buttonType: ButtonType.google,
  buttonSize: ButtonSize.large, // small(default), medium, large
  onPressed: () {
   print('click');
  })
  • 在v 1.0.0中使用
LoadingSignButton(
  controller: _controller,
  buttonType: ButtonType.google,
  width: 100,
  height: 50,
  fontSize: 20,
  imageSize: 16,
  onPressed: () {
   print('click');
  })
  • 图片位置
LoadingSignButton(
  controller: _controller,
  imagePosition: ImagePosition.left, // left or right
  buttonType: ButtonType.google,
  onPressed: () {
   print('click');
  })
  • 自定义按钮
LoadingSignButton(
  controller: _controller,
  buttonType: ButtonType.pinterest,
  imagePosition: ImagePosition.right,
  //[buttonSize] 您也可以与[width]结合使用，增加按钮的字体和图标大小。
  buttonSize: ButtonSize.large,
  btnTextColor: Colors.grey,
  btnColor: Colors.white,
  //[width] 用于更改按钮宽度。
  //[height] 用于更改按钮高度。
  btnText: 'Pinterest',
  onPressed: () {
   print('click');
  })
  • 禁用按钮
LoadingSignButton(
  controller: _controller,
  buttonType: ButtonType.facebook,
  onPressed: null,
),

微型按钮

LoadingSignButton.mini(
  buttonType: ButtonType.github,
  onPressed: () {},
),

TBIB 加载过渡按钮

AnimatedButton

完整示例代码

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:tbib_loading_transition_button_and_social/tbib_loading_transition_button_and_social.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(
      debugShowCheckedModeBanner: false,
      title: 'Sign in Button Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Loading Button Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String _buttonClick = "click sign in button";
  final _controllerSign = LoadingSignButtonController();
  final _controller = LoadingButtonController();
  bool signInAnimPage = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: !signInAnimPage
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    LoadingButton(
                      controller: _controller,
                      color: Colors.blue,
                      errorColor: Colors.red,
                      child: const Text("Test"),
                      durationSuccess: const Duration(seconds: 1),
                      duration: const Duration(milliseconds: 500),
                      successWidget: const FaIcon(FontAwesomeIcons.checkCircle),
                      onSubmit: () {
                        print('onSubmit');
                      },
                    ),
                    const SizedBox(height: 5.0),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        ElevatedButton(
                          onPressed: () => _controller.startLoadingAnimation(),
                          child: const Text('Start'),
                        ),
                        const SizedBox(width: 8),
                        ElevatedButton(
                          onPressed: () => _controller.stopLoadingAnimation(),
                          child: const Text('Stop'),
                        ),
                        const SizedBox(width: 8),
                        ElevatedButton(
                          onPressed: () => _controller.onError(),
                          child: const Text('Error'),
                        ),
                        const SizedBox(width: 8),
                        ElevatedButton(
                          onPressed: () => _controller.onSuccess(),
                          child: const Text('success'),
                        ),
                      ],
                    ),
                    const SizedBox(height: 5.0),
                    ElevatedButton(
                      onPressed: () => setState(() {
                        signInAnimPage = true;
                      }),
                      child: const Text('Sign Button'),
                    ),
                  ],
                )
              : Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      _buttonClick,
                      style: Theme.of(context).textTheme.headline4,
                    ),
                    const SizedBox(height: 5.0),
                    LoadingSignButton(
                      controller: _controllerSign,
                      buttonType: ButtonType.google,
                      progressIndicatorColor: Colors.grey,
                      durationSuccess: const Duration(seconds: 1),
                      duration: const Duration(milliseconds: 500),
                      successWidget: const FaIcon(FontAwesomeIcons.checkCircle),
                      onSubmit: () {
                        _controllerSign.startLoadingAnimation();
                        //  _buttonClick = "google";
                      },
                      fontSize: 20,
                      imageSize: 16,
                    ),
                    const SizedBox(height: 5.0),
                    LoadingSignButton.mini(
                      controller: _controllerSign,
                      buttonType: ButtonType.google,
                      progressIndicatorColor: Colors.grey,
                      durationSuccess: const Duration(seconds: 1),
                      duration: const Duration(milliseconds: 500),
                      successWidget: const FaIcon(FontAwesomeIcons.checkCircle),
                      onSubmit: () {},
                    ),
                    const SizedBox(
                      height: 5.0,
                    ),
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        ElevatedButton(
                          onPressed: () =>
                              _controllerSign.startLoadingAnimation(),
                          child: const Text('Start'),
                        ),
                        const SizedBox(width: 8),
                        ElevatedButton(
                          onPressed: () =>
                              _controllerSign.stopLoadingAnimation(),
                          child: const Text('Stop'),
                        ),
                        const SizedBox(width: 8),
                        ElevatedButton(
                          onPressed: () => _controllerSign.onError(),
                          child: const Text('Error'),
                        ),
                        const SizedBox(width: 8),
                        ElevatedButton(
                          onPressed: () => _controllerSign.onSuccess(),
                          child: const Text('success'),
                        ),
                      ],
                    ),
                    const SizedBox(
                      height: 5.0,
                    ),
                    ElevatedButton(
                      onPressed: () => setState(() {
                        signInAnimPage = false;
                      }),
                      child: const Text('Normal Button'),
                    ),
                  ],
                ),
        ),
      ),
    );
  }
}

更多关于Flutter加载过渡按钮及社交功能插件tbib_loading_transition_button_and_social的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter加载过渡按钮及社交功能插件tbib_loading_transition_button_and_social的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tbib_loading_transition_button_and_social 是一个 Flutter 插件，它提供了一个带有加载过渡效果的按钮，并且支持社交功能（如 Facebook、Google 等登录）。这个插件可以帮助开发者在应用中快速实现带有加载动画的按钮，并且集成社交登录功能。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  tbib_loading_transition_button_and_social: ^latest_version

然后运行 flutter pub get 来安装插件。

使用 LoadingTransitionButton

LoadingTransitionButton 是一个带有加载过渡效果的按钮。你可以通过设置不同的参数来自定义按钮的外观和行为。

示例代码

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  void _onPressed() async {
    setState(() {
      _isLoading = true;
    });

    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Loading Transition Button'),
      ),
      body: Center(
        child: LoadingTransitionButton(
          isLoading: _isLoading,
          onPressed: _onPressed,
          child: Text('Submit'),
        ),
      ),
    );
  }
}

在这个例子中，LoadingTransitionButton 在点击后会进入加载状态，并在加载完成后恢复为正常状态。

使用社交登录按钮

tbib_loading_transition_button_and_social 还提供了社交登录按钮，如 Facebook 和 Google 登录按钮。

示例代码

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

class SocialLoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social Login'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SocialButton(
              onPressed: () {
                // 处理 Facebook 登录逻辑
              },
              type: SocialButtonType.facebook,
            ),
            SizedBox(height: 20),
            SocialButton(
              onPressed: () {
                // 处理 Google 登录逻辑
              },
              type: SocialButtonType.google,
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，SocialButton 提供了 Facebook 和 Google 登录按钮。你可以通过 type 参数来指定按钮的类型。

自定义按钮样式

你可以通过 LoadingTransitionButton 和 SocialButton 提供的参数来自定义按钮的样式，例如颜色、边框、圆角等。

示例代码

LoadingTransitionButton(
  isLoading: _isLoading,
  onPressed: _onPressed,
  child: Text('Submit'),
  backgroundColor: Colors.blue,
  progressColor: Colors.white,
  borderRadius: BorderRadius.circular(10),
)
回到顶部