working on buttons widgets
mosazaid
4 years ago
parent
9f61c7eaa0
commit
b8f6c35e75
@ -1,150 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hexcolor/hexcolor.dart';
|
||||
|
||||
class Button extends StatefulWidget {
|
||||
final String title;
|
||||
final Widget icon;
|
||||
final VoidCallback onTap;
|
||||
final bool loading;
|
||||
final Color color;
|
||||
|
||||
Button({
|
||||
Key key,
|
||||
this.title = "",
|
||||
this.icon,
|
||||
this.onTap,
|
||||
this.loading= false,
|
||||
this.color,
|
||||
}) : super(key: key);
|
||||
|
||||
|
||||
|
||||
@override
|
||||
_ButtonState createState() => _ButtonState();
|
||||
}
|
||||
|
||||
class _ButtonState extends State<Button> with TickerProviderStateMixin {
|
||||
double _buttonSize = 1.0;
|
||||
AnimationController _animationController;
|
||||
Animation _animation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_animationController = AnimationController(
|
||||
vsync: this,
|
||||
lowerBound: 0.7,
|
||||
upperBound: 1.0,
|
||||
duration: Duration(milliseconds: 120));
|
||||
_animation = CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.easeOutQuad,
|
||||
reverseCurve: Curves.easeOutQuad);
|
||||
_animation.addListener(() {
|
||||
setState(() {
|
||||
_buttonSize = _animation.value;
|
||||
});
|
||||
});
|
||||
super.initState();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Widget _buildIcon() {
|
||||
if (widget.icon != null && (widget.title != null && widget.title != "")) {
|
||||
return Container(
|
||||
margin: EdgeInsets.only(right: 12.0),
|
||||
height: 24.0,
|
||||
child: widget.icon);
|
||||
} else if (widget.icon != null) {
|
||||
return Container(
|
||||
height: 18.0,
|
||||
width: 18.0,
|
||||
child: widget.icon,
|
||||
);
|
||||
} else {
|
||||
return Container();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return IgnorePointer(
|
||||
ignoring: widget.loading,
|
||||
child: GestureDetector(
|
||||
onTapDown: (TapDownDetails tap) {
|
||||
_animationController.reverse(from: 1.0);
|
||||
},
|
||||
onTapUp: (TapUpDetails tap) {
|
||||
_animationController.forward();
|
||||
},
|
||||
onTapCancel: () {
|
||||
_animationController.forward();
|
||||
},
|
||||
onTap: Feedback.wrapForTap(widget.onTap, context),
|
||||
behavior: HitTestBehavior.opaque,
|
||||
child: Transform.scale(
|
||||
scale: _buttonSize,
|
||||
child: AnimatedContainer(
|
||||
duration: Duration(milliseconds: 150),
|
||||
margin:
|
||||
EdgeInsets.only(bottom: widget.title.isNotEmpty ? 14.0 : 0.0),
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: widget.title != null && widget.title.isNotEmpty
|
||||
? 12.0
|
||||
: 15.0,
|
||||
horizontal: widget.title != null && widget.title.isNotEmpty
|
||||
? 22.0
|
||||
: 19),
|
||||
decoration: BoxDecoration(
|
||||
color: widget.color ?? HexColor('#515b5d'),
|
||||
borderRadius: BorderRadius.all(Radius.circular(10.0)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Color.fromRGBO(70, 70, 70, 0.28),
|
||||
spreadRadius:
|
||||
_buttonSize < 1.0 ? -(1 - _buttonSize) * 50 : 0.0,
|
||||
offset: Offset(0, 7.0),
|
||||
blurRadius: 24.0)
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
_buildIcon(),
|
||||
widget.loading
|
||||
? Padding(
|
||||
padding: const EdgeInsets.all(2.7),
|
||||
child: SizedBox(
|
||||
height: 19.0,
|
||||
width: 19.0,
|
||||
child: CircularProgressIndicator(
|
||||
backgroundColor: Colors.white,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
HexColor('#FFDDD9'),
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: EdgeInsets.only(bottom: 3.0),
|
||||
child: Text(widget.title,
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 17.0,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontFamily: "Poppins")),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
import 'package:doctor_app_flutter/config/size_config.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hexcolor/hexcolor.dart';
|
||||
|
||||
import 'app_texts_widget.dart';
|
||||
|
||||
class AppButton extends StatefulWidget {
|
||||
final GestureTapCallback onPressed;
|
||||
final String title;
|
||||
final IconData icon;
|
||||
final Color color;
|
||||
final double fontSize;
|
||||
final double padding;
|
||||
final Color fontColor;
|
||||
final bool loading;
|
||||
final bool disabled;
|
||||
final FontWeight fontWeight;
|
||||
|
||||
AppButton(
|
||||
{@required this.onPressed,
|
||||
this.title,
|
||||
this.icon,
|
||||
this.color,
|
||||
this.fontSize = 2,
|
||||
this.padding = 13,
|
||||
this.loading = false,
|
||||
this.disabled = false,
|
||||
this.fontColor = Colors.white,
|
||||
this.fontWeight});
|
||||
|
||||
_AppButtonState createState() => _AppButtonState();
|
||||
}
|
||||
|
||||
class _AppButtonState extends State<AppButton> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return IgnorePointer(
|
||||
ignoring: widget.loading,
|
||||
child: RawMaterialButton(
|
||||
fillColor: widget.color != null ? widget.color : HexColor("#B8382C"),
|
||||
splashColor: widget.color,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
top: widget.padding,
|
||||
bottom: widget.padding,
|
||||
//right: SizeConfig.widthMultiplier * widget.padding,
|
||||
//left: SizeConfig.widthMultiplier * widget.padding
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
if (widget.icon != null)
|
||||
Icon(
|
||||
widget.icon,
|
||||
color: Colors.white,
|
||||
),
|
||||
if (widget.icon != null)
|
||||
SizedBox(
|
||||
width: 5.0,
|
||||
),
|
||||
widget.loading
|
||||
? Padding(
|
||||
padding: EdgeInsets.all(2.6),
|
||||
child: SizedBox(
|
||||
height: 19.0,
|
||||
width: 19.0,
|
||||
child: CircularProgressIndicator(
|
||||
backgroundColor: Colors.white,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
Colors.grey[300],
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: AppText(
|
||||
widget.title,
|
||||
color: widget.fontColor,
|
||||
fontSize: SizeConfig.textMultiplier * widget.fontSize,
|
||||
fontWeight: widget.fontWeight,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
onPressed: widget.onPressed,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.all(Radius.circular(6))),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
import 'package:doctor_app_flutter/config/size_config.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class BorderedButton extends StatelessWidget {
|
||||
final String text;
|
||||
final Function handler;
|
||||
final Color textColor;
|
||||
final bool hasBorder;
|
||||
final Color borderColor;
|
||||
final Color backgroundColor;
|
||||
final double vPadding;
|
||||
final double hPadding;
|
||||
final double radius;
|
||||
final double lPadding;
|
||||
final double tPadding;
|
||||
final double rPadding;
|
||||
final double bPadding;
|
||||
final double fontSize;
|
||||
final String fontFamily;
|
||||
final Widget icon;
|
||||
final FontWeight fontWeight;
|
||||
|
||||
BorderedButton(
|
||||
this.text, {
|
||||
this.handler,
|
||||
this.textColor,
|
||||
this.hasBorder = false,
|
||||
this.borderColor,
|
||||
this.backgroundColor,
|
||||
this.vPadding = 0,
|
||||
this.hPadding = 0,
|
||||
this.radius = 4.0,
|
||||
this.lPadding = 4.0,
|
||||
this.tPadding = 0.0,
|
||||
this.rPadding = 4.0,
|
||||
this.bPadding = 0.0,
|
||||
this.fontSize = 0,
|
||||
this.fontFamily = 'WorkSans',
|
||||
this.icon,
|
||||
this.fontWeight,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
handler();
|
||||
},
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.rectangle,
|
||||
color: backgroundColor ?? Colors.white,
|
||||
borderRadius: BorderRadius.circular(radius),
|
||||
border: Border.fromBorderSide(BorderSide(
|
||||
color: hasBorder ? borderColor : Colors.white,
|
||||
width: 0.8,
|
||||
)),
|
||||
),
|
||||
child: Container(
|
||||
padding: (hPadding > 0 || vPadding > 0)
|
||||
? EdgeInsets.symmetric(
|
||||
vertical: vPadding, horizontal: hPadding)
|
||||
: EdgeInsets.fromLTRB(
|
||||
lPadding, tPadding, rPadding, bPadding),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
icon != null ? icon : Container(),
|
||||
Container(
|
||||
margin: EdgeInsets.symmetric(horizontal: 2),
|
||||
child: Text(
|
||||
text,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: fontSize == 0 ? SizeConfig.textMultiplier * 1.6 : fontSize,
|
||||
fontWeight: fontWeight != null ? fontWeight : FontWeight.normal,
|
||||
fontFamily: fontFamily,
|
||||
color: textColor ?? Color(0xffc4aa54)),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,117 @@
|
||||
import 'package:doctor_app_flutter/config/size_config.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hexcolor/hexcolor.dart';
|
||||
|
||||
import '../app_texts_widget.dart';
|
||||
|
||||
class AppButton extends StatefulWidget {
|
||||
final GestureTapCallback onPressed;
|
||||
final String title;
|
||||
final IconData iconData;
|
||||
final Widget icon;
|
||||
final Color color;
|
||||
final double fontSize;
|
||||
final double padding;
|
||||
final Color fontColor;
|
||||
final bool loading;
|
||||
final bool disabled;
|
||||
final FontWeight fontWeight;
|
||||
final bool hasBorder;
|
||||
final Color borderColor;
|
||||
final double radius;
|
||||
final double vPadding;
|
||||
final double hPadding;
|
||||
|
||||
AppButton({
|
||||
@required this.onPressed,
|
||||
this.title,
|
||||
this.iconData,
|
||||
this.icon,
|
||||
this.color,
|
||||
this.fontSize = 2,
|
||||
this.padding = 13,
|
||||
this.loading = false,
|
||||
this.disabled = false,
|
||||
this.fontColor = Colors.white,
|
||||
this.fontWeight = FontWeight.normal,
|
||||
this.vPadding = 0,
|
||||
this.hPadding = 0,
|
||||
this.radius = 8.0,
|
||||
this.hasBorder = false,
|
||||
this.borderColor,
|
||||
});
|
||||
|
||||
_AppButtonState createState() => _AppButtonState();
|
||||
}
|
||||
|
||||
class _AppButtonState extends State<AppButton> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return IgnorePointer(
|
||||
ignoring: widget.loading,
|
||||
child: RawMaterialButton(
|
||||
fillColor: widget.color != null ? widget.color : HexColor("#B8382C"),
|
||||
splashColor: widget.color,
|
||||
child: Padding(
|
||||
padding: (widget.hPadding > 0 || widget.vPadding > 0)
|
||||
? EdgeInsets.symmetric(
|
||||
vertical: widget.vPadding, horizontal: widget.hPadding)
|
||||
: EdgeInsets.only(
|
||||
top: widget.padding,
|
||||
bottom: widget.padding,
|
||||
//right: SizeConfig.widthMultiplier * widget.padding,
|
||||
//left: SizeConfig.widthMultiplier * widget.padding
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
if (widget.icon != null)
|
||||
Container(width: 25, height: 25, child: widget.icon),
|
||||
if (widget.iconData != null)
|
||||
Icon(
|
||||
widget.iconData,
|
||||
color: Colors.white,
|
||||
),
|
||||
if (widget.icon != null || widget.iconData != null)
|
||||
SizedBox(
|
||||
width: 5.0,
|
||||
),
|
||||
widget.loading
|
||||
? Padding(
|
||||
padding: EdgeInsets.all(2.6),
|
||||
child: SizedBox(
|
||||
height: 19.0,
|
||||
width: 19.0,
|
||||
child: CircularProgressIndicator(
|
||||
backgroundColor: Colors.white,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(
|
||||
Colors.grey[300],
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
: Container(
|
||||
child: AppText(
|
||||
widget.title,
|
||||
color: widget.fontColor,
|
||||
fontSize: SizeConfig.textMultiplier * widget.fontSize,
|
||||
fontWeight: widget.fontWeight,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
onPressed: widget.onPressed,
|
||||
shape: RoundedRectangleBorder(
|
||||
side: BorderSide(
|
||||
color:
|
||||
widget.hasBorder ? widget.borderColor : HexColor("#B8382C"),
|
||||
width: 0.8,
|
||||
),
|
||||
borderRadius: BorderRadius.all(Radius.circular(widget.radius))),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class ButtonBottomSheet extends StatelessWidget {
|
||||
|
||||
final Widget child;
|
||||
|
||||
ButtonBottomSheet({this.child});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue