Description:

tbib loading transition button and social

#TBIB Loading Transition button
A Customizable transition button for Flutter
Getting Started #
To use this package, add tbib_loading_transition_button_and_social as a dependency in your pubspec.yaml file.
dependencies:
...
tbib_loading_transition_button_and_social: ^1.0.0
copied to clipboard
How to use #
In your project add the following import:
import 'package:tbib_loading_transition_button_and_social/tbib_loading_transition_button_and_social.dart';
copied to clipboard
In order to use this widget you have to use a LoadingButtonController to handler the different states.
final _controller = LoadingButtonController();
copied to clipboard
This widget starts a loading animation once it's tapped or by using the controller. You can the launcher to
init an error animation or stop the loading animation.
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),
),
),
copied to clipboard
To support the transition to a different page to have to call the moveToScreen method
_controller.moveToScreen(
context: context,
page: SearchPage(),
stopAnimation: true,
navigationCallback: (route) =>
Navigator.of(context).push(route),
),
copied to clipboard
// available widget success
LoadingButton(
// v1.0.1
borderSize:8
boarderSide: BoarderSide.none, // Default
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),
),
),
copied to clipboard
Login Button #
Now in your Dart code, you can use:
Usage Example #
It very simple!
In order to use this widget you have to use a LoadingSignButtonController to handler the different states.
final _controller = LoadingSignButtonController();
copied to clipboard
LoadingSignButton(
controller: _controller,
buttonType: ButtonType.google,

onPressed: () {
print('click');
})
copied to clipboard

ButtonSize Removed in v 1.0.0

LoadingSignButton(
controller: _controller,
buttonType: ButtonType.google,
buttonSize: ButtonSize.large, // small(default), medium, large
onPressed: () {
print('click');
})
copied to clipboard

use it in v 1.0.0

LoadingSignButton(
controller: _controller,
buttonType: ButtonType.google,
width: 100,
height:50,
fontSize: 20,
imageSize: 16,
onPressed: () {
print('click');
})
copied to clipboard

ImagePosition

LoadingSignButton(
controller: _controller,
imagePosition: ImagePosition.left, // left or right
buttonType: ButtonType.google,
onPressed: () {
print('click');
})
copied to clipboard

Customized Button

LoadingSignButton(
controller: _controller,
buttonType: ButtonType.pinterest,
imagePosition: ImagePosition.right,
//[buttonSize] You can also use this in combination with [width]. Increases the font and icon size of the button.
buttonSize: ButtonSize.large,
btnTextColor: Colors.grey,
btnColor: Colors.white,
//[width] Use it to change width button.
//[height] Use it to change height button.

btnText: 'Pinterest',
onPressed: () {
print('click');
})
copied to clipboard

Disabled Button

LoadingSignButton(
controller: _controller,
buttonType: ButtonType.facebook,
onPressed: null,
),
copied to clipboard
Mini Button #
LoadingSignButton.mini(
buttonType: ButtonType.github,
onPressed: () {},
),
copied to clipboard
TBIB Loading Transition button #

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter