Skip to content

Instantly share code, notes, and snippets.

@westdabestdb

westdabestdb/MeatProject.dart

Created January 10, 2019 17:18
Show Gist options
  • Save westdabestdb/051a9736981ebd90be0a6ff4174fc6fd to your computer and use it in GitHub Desktop.
Save westdabestdb/051a9736981ebd90be0a6ff4174fc6fd to your computer and use it in GitHub Desktop.
Download ZIP
This gist includes two different Scaffolds for two different pages.
Raw
MeatProject.dart
import 'package:flutter/material.dart';
import 'package:bubble_tab_indicator/bubble_tab_indicator.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.deepOrange,
),
home: Checkout(),
);
}
}
class AddressBook extends StatefulWidget {
@override
_AddressBookState createState() => _AddressBookState();
}
class _AddressBookState extends State<AddressBook> {
final Color bg = Color(0xfff2f2f2);
final Color primary = Color(0xffFF5F44);
Widget listItemWidget(
int id, bool isDefault, String name, String address, String phone) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: Colors.white,
),
height: 248,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
height: 64,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
isDefault
? Container(
height: 42,
width: 124,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
Icons.star,
color: Colors.white,
),
Text(
"Default",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 16),
)
],
),
color: primary,
)
: Container(),
InkWell(
highlightColor: Colors.grey,
splashColor: Colors.grey,
onTap: () {},
child: Container(
height: 42,
width: 56,
child: Center(
child: Text(
"EDIT",
style: TextStyle(
color: primary,
fontWeight: FontWeight.w700,
fontSize: 16),
),
),
),
),
],
),
),
Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 25),
child: Text(
name,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25, vertical: 10),
child: Text(
address,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25),
child: Text(
phone,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16,
color: Colors.grey,
fontWeight: FontWeight.w400),
),
)
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 48, vertical: 5),
child: Divider(
color: Colors.black54,
height: 5,
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: FlatButton(
onPressed: () {},
child: Center(
child: Text(
"SELECT THIS ADDRESS",
style: TextStyle(
color: primary,
fontWeight: FontWeight.w700,
fontSize: 16),
),
),
),
)
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: bg,
appBar: AppBar(
centerTitle: false,
title: Text(
"Address book",
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(
Icons.close,
color: Colors.black,
),
),
),
body: Container(
child: ListView(
children: <Widget>[
listItemWidget(
1,
true,
"MR SALAMI OKAY",
"16, Bishop Kaale Alli dadas \n Lagos, Nigeria",
"+234 81 026 4589"),
listItemWidget(
2,
false,
"MR SALAMI OKAY",
"16, Bishop Kaale Alli dadas \n Lagos, Nigeria",
"+234 81 026 4589"),
listItemWidget(
3,
false,
"MR SALAMI OKAY",
"16, Bishop Kaale Alli dadas \n Lagos, Nigeria",
"+234 81 026 4589")
],
),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 48,
child: MaterialButton(
height: 48,
onPressed: () {},
color: primary,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
Icons.add_circle_outline,
color: Colors.white,
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
),
Text(
"ADD NEW ADDRESS",
style: TextStyle(color: Colors.white),
)
],
),
),
),
),
);
}
}
class Checkout extends StatefulWidget {
@override
_CheckoutState createState() => _CheckoutState();
}
class _CheckoutState extends State<Checkout>
with SingleTickerProviderStateMixin {
final Color bg = Color(0xfff2f2f2);
final Color primary = Color(0xffFF5F44);
TabController tabController;
@override
void initState() {
// TODO: implement initState
super.initState();
tabController = TabController(length: 3, vsync: this);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
this.tabController.dispose();
}
Widget addressDetailWidget(
int id, bool isDefault, String name, String address, String phone) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
),
height: 116,
width: double.maxFinite,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 25)
.add(EdgeInsets.only(top: 10)),
child: Text(
name,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25, vertical: 5),
child: Text(
address,
textAlign: TextAlign.left,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 25),
child: Text(
phone,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16,
color: Colors.grey,
fontWeight: FontWeight.w400),
),
)
],
),
),
],
),
);
}
Widget deliverySelectorWidget() {
return Column(
children: <Widget>[
Container(
color: Colors.white,
padding: EdgeInsets.symmetric(vertical: 10),
margin: EdgeInsets.only(bottom: 10),
child: RadioListTile(
value: 1,
onChanged: (int index) {},
groupValue: 1,
title: Text("Standard Delivery"),
subtitle: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
),
),
Container(
color: Colors.white,
padding: EdgeInsets.only(top: 10),
margin: EdgeInsets.only(bottom: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
RadioListTile(
value: 2,
onChanged: (int index) {},
groupValue: 1,
title: Text("Standard Delivery"),
subtitle: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 48, vertical: 5),
child: Divider(
color: Colors.black54,
height: 1,
),
),
FlatButton(
onPressed: () {},
child: Center(
child: Text(
"SELECT THIS ADDRESS",
style: TextStyle(
color: primary,
fontWeight: FontWeight.w700,
fontSize: 16),
),
),
)
],
),
)
],
);
}
Widget subtotalWidget() {
return Container(
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text("Subtotal"), Text("63000")],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text("Delivery"), Text("Free")],
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
child: Divider(
color: Colors.black54,
height: 5,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[Text("Total"), Text("63000")],
),
],
),
);
}
Widget deliveryView() {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10),
child: Text("ADDRESS DETAILS"),
),
MaterialButton(
height: 24,
onPressed: () {},
child: Text(
"CHANGE",
style: TextStyle(color: primary),
)),
]),
addressDetailWidget(
1,
true,
"MR SALAMI OKAY",
"16, Bishop Kaale Alli dadas \n Lagos, Nigeria",
"+234 81 026 4589"),
Container(
height: 36,
padding: EdgeInsets.only(left: 10),
child: Align(
child: Text("DELIVERY METHOD"),
alignment: Alignment(-1, 0),
),
),
deliverySelectorWidget(),
subtotalWidget()
],
),
);
}
Widget paymentsView() {
return Container(
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 10),
child: Text("SELECT A PAYMENT METHOD"),
),
MaterialButton(
height: 24,
onPressed: () {},
child: Text(
"CHANGE",
style: TextStyle(color: primary),
)),
]),
Container(
color: Colors.white,
padding: EdgeInsets.symmetric(vertical: 10),
margin: EdgeInsets.only(bottom: 10),
child: RadioListTile(
value: 1,
onChanged: (int index) {},
groupValue: 1,
title: Text("Cards"),
subtitle: Container(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Image.network("https://via.placeholder.com/72x48"),
Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
Image.network("https://via.placeholder.com/72x48"),
],
),
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "),
],
),
),
isThreeLine: true,
),
),
Container(
color: Colors.white,
padding: EdgeInsets.symmetric(vertical: 10),
margin: EdgeInsets.only(bottom: 10),
child: RadioListTile(
value: 2,
onChanged: (int index) {},
groupValue: 1,
title: Text("Pay on Delivery"),
),
),
Spacer(),
subtotalWidget()
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: bg,
appBar: AppBar(
centerTitle: false,
title: Text(
"Checkout",
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
leading: IconButton(
icon: Icon(
Icons.close,
color: Colors.black,
),
),
bottom: TabBar(
indicatorSize: TabBarIndicatorSize.tab,
unselectedLabelColor: Colors.black87,
indicator: new BubbleTabIndicator(
indicatorHeight: 36.0,
indicatorColor: primary,
tabBarIndicatorSize: TabBarIndicatorSize.tab,
),
controller: tabController,
tabs: <Widget>[
Tab(
text: "DELIVERY",
),
Tab(
text: "PAYMENTS",
),
Tab(
text: "SUMMARY",
)
],
),
),
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: tabController,
children: <Widget>[
deliveryView(),
paymentsView(),
Container(
child: Icon(Icons.home),
)
],
),
bottomNavigationBar: BottomAppBar(
elevation: 0,
child: Container(
color: bg,
height: 56,
child: Padding(
padding: EdgeInsets.all(5),
child: MaterialButton(
height: 48,
onPressed: () {},
color: primary,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
Icons.add_circle_outline,
color: Colors.white,
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
),
Text(
"ADD NEW ADDRESS",
style: TextStyle(color: Colors.white),
)
],
),
),
),
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment