scale_button

Last updated:

0 purchases

scale_button Image
scale_button Images
Add to Cart

Description:

scale button

scale_button #
A customizable and easy-to-use animation button library for Flutter. Compatible with Android & iOS & Web. 😃


Showcase #


Getting Started #
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
scale_button : "^lastest_version"
copied to clipboard

Usage #
Need to include the import the package to the dart file where it will be used, refer the below command
import 'package:scale_button/scale_button.dart';
copied to clipboard

Complete example #
import 'package:flutter/material.dart';

import 'package:scale_button/scale_button.dart';

void main() {
runApp(MaterialApp(home: const MyApp()));
}

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Scale Button Example"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ScaleButton(
child: Container(
height: 48.0,
width: 300.0,
alignment: Alignment.center,
decoration: const BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.all(Radius.circular(24.0)),
),
child: Text(
"Basic",
style: TextStyle(color: Colors.white),
),
),
),
const SizedBox(height: 14.0),
ScaleButton(
reverse: true,
child: Container(
height: 48.0,
width: 300.0,
alignment: Alignment.center,
decoration: const BoxDecoration(
color: Colors.blueAccent,
borderRadius: BorderRadius.all(Radius.circular(24.0)),
),
child: Text(
"Basic (reverse)",
style: TextStyle(color: Colors.white),
),
),
),
const SizedBox(height: 36.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const ScaleButton(
bound: 0.5,
duration: Duration(milliseconds: 1500),
child: Text("Text Button"),
),
ScaleButton(
bound: 0.8,
reverse: true,
child: Container(
height: 100.0,
width: 150.0,
decoration: const BoxDecoration(
color: Colors.orangeAccent, shape: BoxShape.circle),
alignment: Alignment.center,
child: Text(
"Custom Button\n(reverse)",
style: TextStyle(
color: Colors.white,
fontSize: 11.0,
),
textAlign: TextAlign.center,
),
),
),
],
),
],
),
);
}
}

copied to clipboard

License:

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

Customer Reviews

There are no reviews.