#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
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';
In order to use this widget you have to use a LoadingButtonController
to handler the different states.
final _controller = LoadingButtonController();
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),
),
),
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),
),
// 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),
),
),
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();
LoadingSignButton(
controller: _controller,
buttonType: ButtonType.google,
onPressed: () {
print('click');
})
- ButtonSize Removed in v 1.0.0
LoadingSignButton(
controller: _controller,
buttonType: ButtonType.google,
buttonSize: ButtonSize.large, // small(default), medium, large
onPressed: () {
print('click');
})
- use it in v 1.0.0
LoadingSignButton(
controller: _controller,
buttonType: ButtonType.google,
width: 100,
height:50,
fontSize: 20,
imageSize: 16,
onPressed: () {
print('click');
})
- ImagePosition
LoadingSignButton(
controller: _controller,
imagePosition: ImagePosition.left, // left or right
buttonType: ButtonType.google,
onPressed: () {
print('click');
})
- 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');
})
- Disabled Button
LoadingSignButton(
controller: _controller,
buttonType: ButtonType.facebook,
onPressed: null,
),
Mini Button
LoadingSignButton.mini(
buttonType: ButtonType.github,
onPressed: () {},
),