Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@vishweshsoni

vishweshsoni/button_demo.dart

Last active March 31, 2020 08:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vishweshsoni/214eee8a820ba4bcff73279a93281a53 to your computer and use it in GitHub Desktop.
Save vishweshsoni/214eee8a820ba4bcff73279a93281a53 to your computer and use it in GitHub Desktop.
Download ZIP
Buttons
Raw
button_demo.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MyScreen();
}
}
class MyScreen extends StatefulWidget {
@override
_MyScreenState createState() => _MyScreenState();
}
class _MyScreenState extends State<MyScreen> {
bool up = false;
bool color = false;
@override
Widget build(BuildContext context) {
var w=MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: Colors.white,
body: w>=312.30?Padding(
padding: const EdgeInsets.all(30.0),
child: SingleChildScrollView(
child: Container(
height: 1500.0,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.4),
borderRadius: BorderRadius.circular(28.0)),
width: MediaQuery.of(context).size.width,
child: Padding(
padding: const EdgeInsets.all(22.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Flexible(
flex:1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
flex:1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Flexible(
flex:1,
child: Text(
"Button",
style: TextStyle(
color: Colors.indigoAccent,
fontSize: 26.0,
fontWeight: FontWeight.w600,
),
),
),
Flexible(
flex:1,
child: SizedBox(
height: 20.0,
),
),
Flexible(
flex:1,
child: Text(
"Buttons are fundamental part of your project,",
style: TextStyle(
color: Colors.black87,
fontSize: 17.0,
),
),
),
Flexible(
flex: 1,
child: Text(
"with this demo you can explore Active button,hover effect on second button and disabled button",
style: TextStyle(
color: Colors.black87,
fontSize: 17.0,
),
),
),
Flexible(
flex: 1,
child: SizedBox(
height: 20.0,
),
)
],
),
),
Flexible(
flex:1,
child: Container(
height: MediaQuery.of(context).size.height / 5,
width: MediaQuery.of(context).size.width / 1.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18.0),
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex:1,
child: AnimatedContainer(
duration: Duration(milliseconds: 0),
transform: Transform.translate(
offset: Offset(
0, -3), // Change -100 for the y offset
).transform,
child: Container(
height: 40.0,
width: 90.0,
decoration: BoxDecoration(
color: Color(0xff1a5cd0),
borderRadius: BorderRadius.circular(16.0),
boxShadow: [
BoxShadow(
color: Color(0xff1a5cd0)
.withOpacity(0.3),
blurRadius: 10.0,
// has the effect of softening the shadow
spreadRadius: -10.0,
// has the effect of extending the shadow
offset: Offset(
0.1, // horizontal, move right 10
19.0, // vertical, move down 10
),
)
],
),
child: Center(
child: Text(
"Active",
style: TextStyle(
color: Colors.white, fontSize: 15.0),
)),
)),
),
SizedBox(
width: 30.0,
),
Flexible(
flex:1,
child: InkWell(
onTap: () {},
onHover: (value) {
print(value);
if (value) {
setState(() {
up = !up;
});
} else if (!value) {
setState(() {
up = !up;
});
}
},
child: AnimatedContainer(
duration: Duration(milliseconds: 250),
transform: Transform.translate(
offset: Offset(
0,
up == true
? -3
: 0), // Change -100 for the y offset
).transform,
child: Container(
height: 40.0,
width: 90.0,
decoration: BoxDecoration(
color: Color(0xff1a5cd0),
borderRadius:
BorderRadius.circular(16.0),
boxShadow: [
up == true
? BoxShadow(
color: Color(0xff1a5cd0)
.withOpacity(0.3),
blurRadius: 10.0,
// has the effect of softening the shadow
spreadRadius: -10.0,
// has the effect of extending the shadow
offset: Offset(
0.1, // horizontal, move right 10
19.0, // vertical, move down 10
),
)
: BoxShadow()
],
),
child: Center(
child: Text(
"Default",
style: TextStyle(
color: Colors.white,
fontSize: 15.0),
)),
)),
),
),
SizedBox(
width: 30.0,
),
Flexible(
flex:1,
child: Container(
height: 40.0,
width: 90.0,
decoration: BoxDecoration(
color: Color(0xffaacaec),
borderRadius: BorderRadius.circular(16.0),
),
child: Center(
child: Text(
"Disabled",
style: TextStyle(
color: Colors.white, fontSize: 15.0),
)),
),
)
],
),
),
),
),
],
),
),
Flexible(
flex:1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
flex:1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Flexible(
flex:1,
child: Text(
"Flat button",
style: TextStyle(
color: Colors.indigoAccent,
fontSize: 26.0,
fontWeight: FontWeight.w600,
),
),
),
SizedBox(
height: 20.0,
),
Flexible(
flex:1,
child: Text(
"Flat button with the small animaton,",
style: TextStyle(
color: Colors.black87,
fontSize: 17.0,
),
),
),
Flexible(
flex:1,
child: Text(
"with this demo you can explore changing colors on button click",
style: TextStyle(
color: Colors.black87,
fontSize: 17.0,
),
),
),
Flexible(
flex:1,
child: SizedBox(
height: 20.0,
),
)
],
),
),
Flexible(
flex:1,
child: Container(
height: MediaQuery.of(context).size.height / 5,
width: MediaQuery.of(context).size.width / 1.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18.0),
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex:1,
child: ChangeRaisedButtonColor(
primaryColorString: 0xff1a5cd0,
secondaryColorString: 0xffb1c7db,
text: "Active",
textColor: Colors.white,
),
),
SizedBox(
width: 30.0,
),
Flexible(
flex:1,
child: ChangeRaisedButtonColor(
primaryColorString: 0xffb1c7db,
secondaryColorString: 0xff1a5cd0,
text: "Default",
textColor: Colors.white,
),
),
SizedBox(
width: 30.0,
),
Flexible(
flex:1,
child: Container(
height: 40.0,
width: 90.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18.0),
color: Color(0xffc4c9d5),
),
child: Center(
child: Text(
"Disabled",
style: TextStyle(
color: Colors.white.withOpacity(0.3),
fontSize: 15.0),
),
),
),
),
],
),
),
),
),
],
),
),
Flexible(
flex:1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
flex:1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Flexible(
flex:1,
child: Text(
"Border button",
style: TextStyle(
color: Colors.indigoAccent,
fontSize: 26.0,
fontWeight: FontWeight.w600,
),
),
),
Flexible(
flex:1,
child: SizedBox(
height: 20.0,
),
),
Flexible(
flex:1,
child: Text(
"Border flat button with the small animaton,",
style: TextStyle(
color: Colors.black87,
fontSize: 17.0,
),
),
),
Flexible(
flex:1,
child: Text(
"with this demo you can explore changing colors on button click,it shows the use of borders in buttons.",
style: TextStyle(
color: Colors.black87,
fontSize: 17.0,
),
),
),
Flexible(
flex: 1,
child: SizedBox(
height: 20.0,
),
)
],
),
),
Flexible(
flex:1,
child: Container(
height: MediaQuery.of(context).size.height / 5,
width: MediaQuery.of(context).size.width / 1.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18.0),
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex:1,
child: BorderedButton(
primaryColorString: 0xff1a5cd0,
secondaryColorString: 0xffb1c7db,
string: "Active",
text: false,
),
),
SizedBox(
width: 30.0,
),
Flexible(
flex:1,
child: BorderedButton(
primaryColorString: 0xffb1c7db,
secondaryColorString: 0xff1a5cd0,
string: "Default",
text: true,
),
),
SizedBox(
width: 30.0,
),
Flexible(
flex:1,
child: BorderedButton(
primaryColorString: 0xffb1c7db,
secondaryColorString: 0xff1a5cd0,
string: "Disabled",
text: false,
),
),
],
),
),
),
),
],
),
),
Flexible(
flex:1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
flex:1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Flexible(
flex:1,
child: Text(
"Transperent button",
style: TextStyle(
color: Colors.indigoAccent,
fontSize: 26.0,
fontWeight: FontWeight.w600,
),
),
),
Flexible(
flex:1,
child: SizedBox(
height: 20.0,
),
),
Flexible(
flex:1,
child: Text(
"Hover transperent button with the animaton,",
style: TextStyle(
color: Colors.black87,
fontSize: 17.0,
),
),
),
Flexible(
flex: 1,
child: Text(
"with this demo you can explore changing colors on button hover,it shows the use of transperent color in buttons.",
style: TextStyle(
color: Colors.black87,
fontSize: 17.0,
),
),
),
Flexible(
flex:1,
child: SizedBox(
height: 20.0,
),
)
],
),
),
Flexible(
flex:1,
child: Container(
height: MediaQuery.of(context).size.height / 5,
width: MediaQuery.of(context).size.width / 1.5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18.0),
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
flex:1,
child: TransparentButton(text:"Active")),
SizedBox(
width: 30.0,
),
Flexible(
flex:1,
child: TransparentButton(text:"Default")),
SizedBox(
width: 30.0,
),
Flexible(
flex:1,
child: Container(
height: 40.0,
width: 90.0,
decoration: BoxDecoration(
color: Color(0xffaacaec),
borderRadius: BorderRadius.circular(16.0),
),
child: Center(
child: Text(
"Disabled",
style: TextStyle(
color: Colors.white, fontSize: 15.0),
)),
),
)
],
),
),
),
),
],
),
),
],
),
),
),
),
):Container(),
);
}
}
class ChangeRaisedButtonColor extends StatefulWidget {
final int primaryColorString;
final int secondaryColorString;
final String text;
final Color textColor;
const ChangeRaisedButtonColor(
{this.primaryColorString,
this.secondaryColorString,
this.text,
this.textColor});
@override
ChangeRaisedButtonColorState createState() => ChangeRaisedButtonColorState();
}
class ChangeRaisedButtonColorState extends State<ChangeRaisedButtonColor>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _colorTween;
@override
void initState() {
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 300));
_colorTween = ColorTween(
begin: Color(widget.primaryColorString),
end: Color(widget.secondaryColorString))
.animate(_animationController);
super.initState();
}
@override
void dispose() {
super.dispose();
_animationController.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _colorTween,
builder: (context, child) => GestureDetector(
onTap: () {
if (_animationController.status == AnimationStatus.completed) {
_animationController.reverse();
} else {
_animationController.forward();
}
},
child: Container(
height: 40.0,
width: 90.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18.0),
color: _colorTween.value,
),
child: Center(
child: Text(
widget.text,
style: TextStyle(color: widget.textColor, fontSize: 15.0),
)),
),
),
);
}
}
// ignore: must_be_immutable
class BorderedButton extends StatefulWidget {
final int primaryColorString;
final int secondaryColorString;
bool text;
String string;
BorderedButton(
{this.primaryColorString,
this.secondaryColorString,
this.text,
this.string});
@override
_BorderedButtonState createState() => _BorderedButtonState();
}
class _BorderedButtonState extends State<BorderedButton>
with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _colorTween;
@override
void initState() {
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 300));
_colorTween = ColorTween(
begin: Color(widget.primaryColorString),
end: Color(widget.secondaryColorString))
.animate(_animationController);
_colorTween = ColorTween(
begin: Color(widget.primaryColorString),
end: Color(widget.secondaryColorString))
.animate(_animationController);
super.initState();
}
@override
void dispose() {
super.dispose();
_animationController.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _colorTween,
builder: (context, child) => GestureDetector(
onTap: () {
setState(() {
widget.text = !widget.text;
});
if (_animationController.status == AnimationStatus.completed) {
if (widget.string == "Disabled") {
} else {
_animationController.reverse();
}
} else {
if (widget.string == "Disabled") {
} else {
_animationController.forward();
}
}
},
child: Container(
height: 40.0,
width: 90.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18.0),
border: Border.all(
color: widget.string == "Disabled"
? Color(0xffc49edb)
: Color(0xff1a5cd0),
),
color: _colorTween.value),
child: Center(
child: Text(
widget.string,
style: TextStyle(
color: widget.string == "Disabled"
? Colors.white.withOpacity(0.8)
: widget.text == true ? Colors.blueAccent : Colors.white,
),
),
),
),
),
);
}
}
// ignore: must_be_immutable
class TransparentButton extends StatefulWidget {
String text;
TransparentButton({this.text});
@override
_TransparentButtonState createState() => _TransparentButtonState();
}
class _TransparentButtonState extends State<TransparentButton> {
bool st = false;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {},
onHover: (value) {
if (value) {
setState(() {
st = !st;
});
}
},
child: Stack(
children: <Widget>[
AnimatedContainer(
curve: Curves.ease,
width: 90.0,
height: 40.0,
duration: Duration(seconds: 2),
decoration: BoxDecoration(
color: st == true ? Color(0xffB3D6F3 ) : Colors.white,
borderRadius: BorderRadius.circular(19.0),
),
child: Center(
child: Text(widget.text,style:TextStyle(color: Colors.indigoAccent,fontSize: 15.0)),
),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment