change the home page design
Mohammad Aljmma
4 years ago
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 445 B |
|
Before Width: | Height: | Size: 47 KiB After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 244 KiB |
|
Before Width: | Height: | Size: 644 B After Width: | Height: | Size: 475 B |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 475 B |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 606 B |
@ -0,0 +1,117 @@
|
||||
import 'package:diplomaticquarterapp/widgets/data_display/text.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hexcolor/hexcolor.dart';
|
||||
|
||||
/// Button widget
|
||||
/// [label] button label
|
||||
/// [icon] button icon its optional
|
||||
/// [onTap] button function
|
||||
/// [loading] show the progress indicator
|
||||
/// [elevation] color elevation value
|
||||
class FloatingButton extends StatefulWidget {
|
||||
FloatingButton(
|
||||
{Key key,
|
||||
this.onTap,
|
||||
this.elevation: true})
|
||||
: super(key: key);
|
||||
|
||||
final VoidCallback onTap;
|
||||
final bool elevation;
|
||||
|
||||
|
||||
@override
|
||||
_FloatingButtonState createState() => _FloatingButtonState();
|
||||
}
|
||||
|
||||
class _FloatingButtonState extends State<FloatingButton>
|
||||
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();
|
||||
}
|
||||
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return (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: 4),
|
||||
padding: EdgeInsets.symmetric(vertical: 22, horizontal: 22),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.all(Radius.circular(45.0)),
|
||||
color: Theme.of(context).primaryColor,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Color.fromRGBO(
|
||||
120, 71, 80, widget.elevation ? 0.28 : 0.0),
|
||||
spreadRadius:
|
||||
_buttonSize < 1.0 ? -(1 - _buttonSize) * 50 : 0.0,
|
||||
offset: Offset(0, 7.0),
|
||||
blurRadius: 55.0)
|
||||
]),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
child: Center(
|
||||
child: Column(
|
||||
children: [
|
||||
//TODO change the icon
|
||||
Image.asset("assets/images/blood-drop.png", fit: BoxFit.cover),
|
||||
Texts('BOOK',bold: true,color: Colors.white,),
|
||||
Texts('APPPINTEMNT',color: Colors.white,fontSize: 7,),
|
||||
],
|
||||
),
|
||||
),
|
||||
width: 50,
|
||||
height: 50,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)),
|
||||
));
|
||||
}
|
||||
}
|
||||