Today we will take a look at a new banking app, the design is really cool and very easy to replicate in flutter!

Source code is available here: https://github.com/cybdom/payment_app so if you want to follow along feel free to download it.

Then Pay a tip:

options Option 1 $1.00 USD Option 2 $5.99 USD Option 3 $10.00 USD

The home page is divided into three sections, first container is a combination of a column inside a row inside another column, plus the draggable style button.

As it’s the fanciest option here let’s start with that button:

Flutter makes it very easy to create draggable widgets, just wrap your widget inside a Draggable, add a few options and you are set !

class SendReceiveSwitch extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(25), color: Colors.white54, ), padding: EdgeInsets.all(21.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ DragTarget( builder: (context, List<int> candidateData, rejectedData) { return Container( padding: EdgeInsets.all(15.0), child: Text( "Receive", style: TextStyle(color: Colors.white), ), ); }, onWillAccept: (data) { return true; }, onAccept: (data) { Scaffold.of(context).showSnackBar( SnackBar( content: Text("Receive!"), ), ); }, ), Draggable( data: 5, child: Container( width: 51, height: 51, padding: EdgeInsets.all(15.0), decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.white54, Theme.of(context).primaryColor], begin: Alignment.topCenter, end: Alignment.bottomCenter, stops: [0.3, 1]), shape: BoxShape.circle, ), child: Icon( Icons.attach_money, color: Theme.of(context).primaryColor, ), ), feedback: Container( width: 51, height: 51, padding: EdgeInsets.all(15.0), decoration: BoxDecoration( gradient: LinearGradient( colors: [Colors.white54, Theme.of(context).primaryColor], begin: Alignment.topCenter, end: Alignment.bottomCenter, stops: [0.3, 1]), shape: BoxShape.circle, ), child: Icon( Icons.attach_money, color: Theme.of(context).primaryColor, ), ), axis: Axis.horizontal, childWhenDragging: Container( width: 51, height: 51, ), ), DragTarget( builder: (context, List<int> candidateData, rejectedData) { return Container( padding: EdgeInsets.all(15.0), child: Text( "Send", style: TextStyle(color: Colors.white), ), ); }, onWillAccept: (data) { return true; }, onAccept: (data) { Navigator.push( context, MaterialPageRoute( builder: (context) { return SendScreen(); }, ), ); }, ), ], ), ); } }

After that we may take a look at the transaction history, which is just a ListView of transactionContainer

class Transaction extends StatelessWidget { final TransactionType transactionType; final String transactionAmout, transactionInfo, transactionDate, receptient; const Transaction( {Key key, this.transactionType, this.transactionAmout, this.transactionInfo, this.transactionDate, this.receptient}) : super(key: key); @override Widget build(BuildContext context) { String transactionName; IconData transactionIconData; Color color; switch (transactionType) { case TransactionType.sent: transactionName = "Sent"; transactionIconData = Icons.arrow_upward; color = Theme.of(context).primaryColor; break; case TransactionType.received: transactionName = "Received"; transactionIconData = Icons.arrow_downward; color = Colors.green; break; case TransactionType.pending: transactionName = "Pending"; transactionIconData = Icons.arrow_downward; color = Colors.orange; break; } return Container( margin: EdgeInsets.all(9.0), padding: EdgeInsets.all(9.0), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( blurRadius: 5.0, color: Colors.grey[350], offset: Offset(0, 3), ), ], ), child: Row( children: <Widget>[ Flexible( flex: 1, child: Stack( children: <Widget>[ ClipRRect( borderRadius: BorderRadius.circular(15.0), child: Image.network( "https://cdn.pixabay.com/photo/2015/01/08/18/29/entrepreneur-593358_960_720.jpg", ), ), Positioned( bottom: 0, right: 0, child: Container( width: 15.0, height: 15.0, decoration: BoxDecoration( color: color, shape: BoxShape.circle, ), child: FittedBox( child: Icon( transactionIconData, color: Colors.white, ), ), ), ) ], ), ), SizedBox(width: 5.0), Flexible( flex: 4, child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( receptient, style: TextStyle(fontWeight: FontWeight.bold), ), Text( "\$ $transactionAmout", style: TextStyle(fontWeight: FontWeight.bold), ), ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( "$transactionInfo - $transactionDate", style: TextStyle(color: Colors.grey[700]), ), Text( "$transactionName", style: TextStyle( fontWeight: FontWeight.bold, color: color, ), ), ], ), ], ), ), ], ), ); } }

In the middle of the home screen we have a four custom buttons:

class CustomButton extends StatelessWidget { final ButtonType buttonType; const CustomButton({Key key, this.buttonType}) : super(key: key); @override Widget build(BuildContext context) { String buttonText = "", buttonImage; switch (buttonType) { case ButtonType.payBills: buttonText = "Pay Bills"; buttonImage = "assets/receipt.png"; break; case ButtonType.donate: buttonText = "Donate"; buttonImage = "assets/donation.png"; break; case ButtonType.receiptients: buttonText = "Receipients"; buttonImage = "assets/users.png"; break; case ButtonType.offers: buttonText = "Offers"; buttonImage = "assets/discount.png"; break; } return Material( color: Colors.transparent, child: InkWell( onTap: () {}, child: Container( padding: EdgeInsets.all(5.0), child: Column( children: <Widget>[ Container( padding: EdgeInsets.all(17), decoration: BoxDecoration( borderRadius: BorderRadius.circular(7.0), gradient: LinearGradient( colors: [Colors.white10, Colors.black12], begin: Alignment.topCenter, end: Alignment.bottomCenter, ), boxShadow: [ BoxShadow( color: Colors.black12, blurRadius: 5.0, offset: Offset(0, 3), ), ], ), child: Image.asset( buttonImage, ), ), SizedBox( height: 5.0, ), FittedBox( child: Text(buttonText), ), ], ), ), ), ); } }

The send screen is very simple all I did is I created another Scaffold containing a column and an expanded ListView and the contacts are represented by ListTiles.