Skip to content

Instantly share code, notes, and snippets.

@rohan20
Created July 27, 2018 10:07
Show Gist options
  • Save rohan20/fc56fb7da8f1aef5e6cbf1a5a65e8aa1 to your computer and use it in GitHub Desktop.
Save rohan20/fc56fb7da8f1aef5e6cbf1a5a65e8aa1 to your computer and use it in GitHub Desktop.
ProductDetailPage (Static)
import 'package:flutter/material.dart';
class ProductDetailPage extends StatefulWidget {
@override
_ProductDetailPageState createState() => _ProductDetailPageState();
}
class _ProductDetailPageState extends State<ProductDetailPage>
with TickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
leading: IconButton(
icon: Icon(
Icons.chevron_left,
size: 40.0,
color: Colors.black,
),
onPressed: () {
Navigator.of(context).pop();
},
),
backgroundColor: Colors.white,
title: Text(
"PRODUCT DETAIL",
style: TextStyle(
color: Colors.black,
),
),
),
body: _buildProductDetailsPage(context),
bottomNavigationBar: _buildBottomNavigationBar(),
);
}
_buildProductDetailsPage(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return ListView(
children: <Widget>[
Container(
padding: const EdgeInsets.all(4.0),
child: Card(
elevation: 4.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildProductImagesWidgets(),
_buildProductTitleWidget(),
SizedBox(height: 12.0),
_buildPriceWidgets(),
SizedBox(height: 12.0),
_buildDivider(screenSize),
SizedBox(height: 12.0),
_buildFurtherInfoWidget(),
SizedBox(height: 12.0),
_buildDivider(screenSize),
SizedBox(height: 12.0),
_buildSizeChartWidgets(),
SizedBox(height: 12.0),
_buildDetailsAndMaterialWidgets(),
SizedBox(height: 12.0),
_buildStyleNoteHeader(),
SizedBox(height: 6.0),
_buildDivider(screenSize),
SizedBox(height: 4.0),
_buildStyleNoteData(),
SizedBox(height: 20.0),
_buildMoreInfoHeader(),
SizedBox(height: 6.0),
_buildDivider(screenSize),
SizedBox(height: 4.0),
_buildMoreInfoData(),
SizedBox(height: 24.0),
],
),
),
),
],
);
}
_buildDivider(Size screenSize) {
return Column(
children: <Widget>[
Container(
color: Colors.grey[600],
width: screenSize.width,
height: 0.25,
),
],
);
}
_buildProductImagesWidgets() {
TabController imagesController = TabController(length: 3, vsync: this);
return Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: 250.0,
child: Center(
child: DefaultTabController(
length: 3,
child: Stack(
children: <Widget>[
TabBarView(
controller: imagesController,
children: <Widget>[
Image.network(
"https://assets.myntassets.com/h_240,q_90,w_180/v1/assets/images/1304671/2016/4/14/11460624898615-Hancock-Men-Shirts-8481460624898035-1_mini.jpg",
),
Image.network(
"https://n1.sdlcdn.com/imgs/c/9/8/Lambency-Brown-Solid-Casual-Blazers-SDL781227769-1-1b660.jpg",
),
Image.network(
"https://images-na.ssl-images-amazon.com/images/I/71O0zS0DT0L._UX342_.jpg",
),
],
),
Container(
alignment: FractionalOffset(0.5, 0.95),
child: TabPageSelector(
controller: imagesController,
selectedColor: Colors.grey,
color: Colors.white,
),
)
],
),
),
),
),
);
}
_buildProductTitleWidget() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Center(
child: Text(
//name,
"Nakkana",
style: TextStyle(fontSize: 16.0, color: Colors.black),
),
),
);
}
_buildPriceWidgets() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
"\$899",
style: TextStyle(fontSize: 16.0, color: Colors.black),
),
SizedBox(
width: 8.0,
),
Text(
"\$1299",
style: TextStyle(
fontSize: 12.0,
color: Colors.grey,
decoration: TextDecoration.lineThrough,
),
),
SizedBox(
width: 8.0,
),
Text(
"30% Off",
style: TextStyle(
fontSize: 12.0,
color: Colors.blue[700],
),
),
],
),
);
}
_buildFurtherInfoWidget() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Row(
children: <Widget>[
Icon(
Icons.local_offer,
color: Colors.grey[500],
),
SizedBox(
width: 12.0,
),
Text(
"Tap to get further info",
style: TextStyle(
color: Colors.grey[500],
),
),
],
),
);
}
_buildSizeChartWidgets() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.straighten,
color: Colors.grey[600],
),
SizedBox(
width: 12.0,
),
Text(
"Size",
style: TextStyle(
color: Colors.grey[600],
),
),
],
),
Text(
"SIZE CHART",
style: TextStyle(
color: Colors.blue[400],
fontSize: 12.0,
),
),
],
),
);
}
_buildDetailsAndMaterialWidgets() {
TabController tabController = new TabController(length: 2, vsync: this);
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TabBar(
controller: tabController,
tabs: <Widget>[
Tab(
child: Text(
"DETAILS",
style: TextStyle(
color: Colors.black,
),
),
),
Tab(
child: Text(
"MATERIAL & CARE",
style: TextStyle(
color: Colors.black,
),
),
),
],
),
Container(
padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 6.0),
height: 40.0,
child: TabBarView(
controller: tabController,
children: <Widget>[
Text(
"76% acrylic, 19% polyster, 5% metallic yarn Hand-wash cold",
style: TextStyle(
color: Colors.black,
),
),
Text(
"86% acrylic, 9% polyster, 1% metallic yarn Hand-wash cold",
style: TextStyle(
color: Colors.black,
),
)
],
),
),
],
),
);
}
_buildStyleNoteHeader() {
return Padding(
padding: const EdgeInsets.only(
left: 12.0,
),
child: Text(
"STYLE NOTE",
style: TextStyle(
color: Colors.grey[800],
),
),
);
}
_buildStyleNoteData() {
return Padding(
padding: const EdgeInsets.only(
left: 12.0,
),
child: Text(
"Boys dress",
style: TextStyle(
color: Colors.grey[600],
),
),
);
}
_buildMoreInfoHeader() {
return Padding(
padding: const EdgeInsets.only(
left: 12.0,
),
child: Text(
"MORE INFO",
style: TextStyle(
color: Colors.grey[800],
),
),
);
}
_buildMoreInfoData() {
return Padding(
padding: const EdgeInsets.only(
left: 12.0,
),
child: Text(
"Product Code: 410\nTax info: Applicable GST will be charged at the time of chekout",
style: TextStyle(
color: Colors.grey[600],
),
),
);
}
_buildBottomNavigationBar() {
return Container(
width: MediaQuery.of(context).size.width,
height: 50.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Flexible(
fit: FlexFit.tight,
flex: 1,
child: RaisedButton(
onPressed: () {},
color: Colors.grey,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.list,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Text(
"SAVE",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
Flexible(
flex: 2,
child: RaisedButton(
onPressed: () {},
color: Colors.greenAccent,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.card_travel,
color: Colors.white,
),
SizedBox(
width: 4.0,
),
Text(
"ADD TO BAG",
style: TextStyle(color: Colors.white),
),
],
),
),
),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment