Related
Is there a way how can I create a time in / out in flutterflow? What actions do I need to add? Thank you here's a screenshot of my app created in flutterflow.
I've created a complete widget, according to your screenshot and question. You have to implement your own logic to save time in/out somewhere and fix layout as you want but here is:
import 'package:flutter/material.dart';
class TimeScreen extends StatefulWidget {
const TimeScreen({Key? key}) : super(key: key);
#override
TimeScreenState createState() => TimeScreenState();
}
class TimeScreenState extends State<TimeScreen> {
String timeIn = '', timeOut = '';
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 30.0),
Row(
children: const [
Text(
'Atendance',
style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
),
),
Expanded(
child: Align(
alignment: Alignment.center,
child: Icon(
Icons.flutter_dash,
size: 40.0,
color: Colors.orange,
),
),
),
],
),
const SizedBox(height: 16.0),
const Text(
'[Display Name]',
style: TextStyle(
color: Colors.grey,
),
),
const SizedBox(height: 32.0),
Center(
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.8,
child: Card(
color: Colors.white,
elevation: 2,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 32.0,
),
child: Row(
children: [
Expanded(
child: Column(
children: [
const Text(
'Time In',
style: TextStyle(
fontSize: 18.0,
),
),
Text(
timeIn.isEmpty ? '--/--' : timeIn,
style: const TextStyle(
fontSize: 24.0,
color: Colors.orange,
fontWeight: FontWeight.bold,
),
),
],
),
),
Expanded(
child: Column(
children: [
const Text(
'Time Out',
style: TextStyle(
fontSize: 18.0,
),
),
Text(
timeOut.isEmpty ? '--/--' : timeIn,
style: const TextStyle(
fontSize: 24.0,
color: Colors.orange,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
),
),
),
),
const SizedBox(height: 32.0),
const Center(
child: Text(
'Time Time Widget',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
const SizedBox(height: 32.0),
Center(
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
height: 45.0,
child: OutlinedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.orange),
side: MaterialStateProperty.all(
const BorderSide(
color: Colors.orange,
style: BorderStyle.solid,
),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
),
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Time In',
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
),
onPressed: () => createStartTime(),
),
),
),
const SizedBox(height: 32.0),
Center(
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
height: 45.0,
child: OutlinedButton(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.orange),
side: MaterialStateProperty.all(
const BorderSide(
color: Colors.orange,
style: BorderStyle.solid,
),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
),
),
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Time Out',
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
),
onPressed: () => createEndTime(),
),
),
),
],
),
),
),
);
}
createStartTime() {
/** Implement your logic to save time data */
setState(() {
timeIn = TimeOfDay.now().format(context);
});
}
createEndTime() {
/** Implement your logic to save time data */
setState(() {
timeOut = TimeOfDay.now().format(context);
});
}
}
resulting in:
My goal is to achieve the dialog like the below image. I want that when I press the cancel or confirm button in the dialog, the background color of the cancel and confirm buttons should change.
I have designed this dialog the same as but only I am not able to change the cancel or confirm container background color when I click on it. my designed dialog is below here.
Please help me, anyone, how can I achieve this.
class MyHomePage1 extends StatefulWidget {
#override
State createState() {
return MyHomePage1State();
}
}
class MyHomePage1State extends State<MyHomePage1> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: InkWell(
onTap: (){
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)), //this right here
child: Container(
height: 200,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.only(left: 20,right: 20),
child: Center(
child: Text(
Strings.confirmation,
style: TextStyle(
color: AppColors.orange.withOpacity(.65),
//fontSize: DeviceSize.width(context) / 26,
fontSize: 24,
fontFamily: "Poppins",
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.center,
),
),
),
Container(
padding: EdgeInsets.only(left: 20,right: 20),
child: Center(
child: Text(
Strings.youAreAboutTO,
style: TextStyle(
color: AppColors.grey30,
//fontSize: DeviceSize.width(context) / 26,
fontSize: 12,
fontFamily: "Gilroy-Bold"),
textAlign: TextAlign.center,
),
),
),
Container(
padding: EdgeInsets.only(left: 20,right: 20),
child: Center(
child: Text(
Strings.add1Stamp,
style: TextStyle(
color: AppColors.grey50,
//fontSize: DeviceSize.width(context) / 26,
fontSize: 12,
fontFamily: "Poppins"),
textAlign: TextAlign.center,
),
),
),
Container(
padding: EdgeInsets.only(left: 20,right: 20),
child: Center(
child: Text(
Strings.redeem1FreeSet,
style: TextStyle(
color: AppColors.grey50,
//fontSize: DeviceSize.width(context) / 26,
fontSize: 12,
fontFamily: "Poppins"),
textAlign: TextAlign.center,
),
),
),
Container(
padding: EdgeInsets.only(left: 25,right: 25,top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap:(){
setState(() {
});
},
child: Container(
alignment: Alignment.center,
//color: AppColors.blueColorNew,
//margin: EdgeInsets.only(bottom: 20),
width: 100,
height: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: AppColors.white,
border: Border.all(color: AppColors.orange)
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
"Cancel",
style: TextStyle(
fontFamily: "Gilroy-Bold",
color:AppColors.orange),
),
),
),
),
InkWell(
onTap:(){
setState(() {
});
},
child: Container(
alignment: Alignment.center,
//color: AppColors.blueColorNew,
//margin: EdgeInsets.only(bottom: 20),
width: 100,
height: 32,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: AppColors.white,
border: Border.all(color: AppColors.orange,
)
),
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
"Confirm",
style: TextStyle(
fontFamily: "Gilroy-Bold",
color:AppColors.orange),
),
),
),
)
],
),
),
],
),
),
),
);
});
},
child: Container(
height: 50,
width: 100,
color: Colors.orange,
child: Center(
child: Text("Click on",
style: TextStyle(
color: Colors.white
),),
),
),
),
)
);
}
}
You need to use StatefulBuilder to update on dialog.
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
bool isCancelBtnTappeed = false;
bool isConfirmBtnTappeed = false;
return StatefulBuilder(
builder: (context, setStateSB) {
return Dialog(
shape: RoundedRectangleBorder(
/// ........
GestureDetector(
onTap: () {
setStateSB(() {
isCancelBtnTappeed = true;
});
},
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(5),
color: isCancelBtnTappeed
? Colors.red
: Colors.white,
I want to navigate to the previous page using the arrow icon I have added in this code. to where I want to add that code and tell me how to code that part. want to navigate from detail_screen.dart to home_page.dart using the arrow icon I have added. can someone please provide a proper answer for this?
detail_screen.dart
import 'package:flutter/material.dart';
class DetailsScreen extends StatelessWidget {
const DetailsScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
//shadowColor: Colors.transparent,
leading: Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: const [
CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child:
Icon(Icons.favorite_border_outlined, color: Colors.black),
),
CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child: Icon(Icons.shopping_bag_outlined, color: Colors.black),
)
],
),
),
],
),
body: Column(
children: <Widget>[
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 0),
child: Container(
height: MediaQuery.of(context).size.height * 0.9,
width: MediaQuery.of(context).size.width * 0.9,
padding: const EdgeInsets.only(left: 20),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image23.png"),
fit: BoxFit.contain,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.grey.shade100,
),
alignment: const Alignment(1, 1),
height: 310,
width: 375,
child: Column(
children: [
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
"Crop Top",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.blueAccent,
child: null),
),
),
SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.amber,
child: null),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.lightGreen,
child: null),
),
),
]),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 270, 10),
child: Text(
"Sizes",
style: TextStyle(
fontSize: 16,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
// SizedBox(
// height: 30,
// ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XS');
},
child: Text('XS'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('X');
},
child: Text('S'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('M');
},
child: Text('M'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('L');
},
child: Text('L'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XL');
},
child: Text('XL'),
),
],
),
SizedBox(
height: 30,
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"30% off",
style: TextStyle(
fontSize: 25,
color: Colors.purple,
fontWeight: FontWeight.w700),
),
),
],
),
SizedBox(
height: 30,
),
Row(
children: const [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Rs.2950",
style: TextStyle(
fontSize: 18,
color: Color(0xff8399A9),
fontWeight: FontWeight.w700,
decoration: TextDecoration.lineThrough),
),
),
Text(
"Rs.2750",
style: TextStyle(
fontSize: 24,
color: Color(0xff0DA75F),
fontWeight: FontWeight.w700,
),
),
],
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 0),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Add to Cart ",
),
style: ElevatedButton.styleFrom(
primary: Colors.pinkAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20),
),
),
padding: const EdgeInsets.all(28),
),
),
),
],
),
],
),
);
}
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:fashion_app/details_screen.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//final double _borderRadious = 24;
#override
#override
void initState() {
// TODO: implement initState
super.initState();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pinkAccent,
),
body: ListView(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
children: [
HelloText(),
Name(),
SizedBox(
height: 10,
),
buildSearchInput(),
SizedBox(
height: 10,
),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 45, 10, 0),
child: TextButton(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Summer Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.justify,
),
),
],
)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen()));
},
),
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dressone.png"),
),
),
]),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 45, 10, 0),
child: TextButton(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Winter Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.justify,
),
),
],
)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen()));
},
),
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dresstwo.png"),
),
),
]),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(5, 20, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.blue.shade50,
),
height: 137,
width: 327,
child: Row(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(150, 40, 0, 40),
child: Text(
"Get",
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Text(
"30%",
style: TextStyle(
fontSize: 24,
color: Colors.purple,
fontWeight: FontWeight.w700),
),
),
Text(
"Off",
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w700),
),
],
)),
),
const Padding(
padding: EdgeInsets.fromLTRB(15, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dressthree.png"),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 40),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Know More",
),
style: ElevatedButton.styleFrom(
primary: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20))),
padding: const EdgeInsets.all(15)),
),
),
]),
],
),
);
}
Widget HelloText() => Container(
child: Row(children: [
Text(
'Hello,',
style: TextStyle(
fontSize: 28,
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
]),
);
Widget Name() => Container(
child: Row(children: [
Text(
'Nirasha',
style: TextStyle(
fontSize: 28,
color: Colors.amber,
fontWeight: FontWeight.w500,
),
),
]),
);
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.grey[300], borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}
use following Structure in detail_screen.dart scaffold:
body : SafeArea(
child: Column(
children: <Widget>[
Container(child: IconButton(
icon: Icon(
Icons.chevron_left_sharp, //backIcon
color: Colors.indigo,
size: 30,
),
onPressed: () {
Navigator.pop(context);
},
),
-------------------- //other Elements Of body
]
),
)
Please use this : Navigator.of(context).pop();
In your detail_screen.dart, use this code in Appbar leading.
IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () => Navigator.pop(context),
),
Used this code now it is working.
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () {Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage()));
},
),
In your DetailScreen, your leading widget should be IconButton and handle onpressed event of that IconButton to pop the activity from stack.
Here it is:
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () => Navigator.pop(context),
),
ListView is not working here, Firstly instead of padding I used Positioned() but there is a similar issue on github and there I got to know that scrollable widget shouldn't be placed inside Positioned() so i replaced it with Padding(), but got no success.
here is my code
import 'package:flutter/material.dart';
import 'package:cpblog/webview.dart';
import 'package:flutter/rendering.dart';
class DetailsPage extends StatefulWidget {
final heroTag;
final foodName;
final url;
final text;
DetailsPage({this.heroTag, this.foodName,this.url,this.text});
#override
_DetailsPageState createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
var selectedCard = 'WEIGHT';
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF7A9BEE),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text('Here You Go!!',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 18.0,
color: Colors.white)),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
color: Colors.white,
)
],
),
body: ListView(children: [
Stack(children: [
Container(
height: MediaQuery.of(context).size.height - 82.0,
width: MediaQuery.of(context).size.width,
color: Colors.transparent),
Padding(
padding: const EdgeInsets.only(top: 75.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45.0),
topRight: Radius.circular(45.0),
),
color: Colors.white),
height: MediaQuery.of(context).size.height - 100.0,
width: MediaQuery.of(context).size.width),
),
Padding(
padding: EdgeInsets.only(top: 30.0,
left: (MediaQuery.of(context).size.width / 2) - 100.0,),
child: Hero(
tag: widget.heroTag,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(widget.heroTag),
fit: BoxFit.cover)),
height: 200.0,
width: 200.0)),
),
Padding(
padding: const EdgeInsets.only(top:250.0,right:25.0,left: 25.0),
child: ListView(
shrinkWrap: true,
children: <Widget>[
Text(widget.foodName,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 22.0,
fontWeight: FontWeight.bold)),
SizedBox(height: 20.0),
Text(widget.text,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
)),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 125.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17.0),
color: Color(0xFF7A9BEE)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => WebView(widget.url, widget.foodName)));
},
child:Text('View More',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat',
fontSize: 15.0)),
)
],
),
)
],
),
SizedBox(height: 20.0),
Container(
height: 150.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_buildInfoCard('WEIGHT', '300', 'G'),
SizedBox(width: 10.0),
_buildInfoCard('CALORIES', '267', 'CAL'),
SizedBox(width: 10.0),
_buildInfoCard('VITAMINS', 'A, B6', 'VIT'),
SizedBox(width: 10.0),
_buildInfoCard('AVAIL', 'NO', 'AV')
],
)
),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.only(bottom:5.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0), bottomLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
color: Colors.black
),
height: 50.0,
child:
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Center(
child: Text(
'Back',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat'
)
),
),
)
),
)
],
),
)
])
]));
}
Widget _buildInfoCard(String cardTitle, String info, String unit) {
return InkWell(
onTap: () {
selectCard(cardTitle);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.easeIn,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: cardTitle == selectedCard ? Color(0xFF7A9BEE) : Colors.white,
border: Border.all(
color: cardTitle == selectedCard ?
Colors.transparent :
Colors.grey.withOpacity(0.3),
style: BorderStyle.solid,
width: 0.75
),
),
height: 100.0,
width: 100.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 15.0),
child: Text(cardTitle,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color:
cardTitle == selectedCard ? Colors.white : Colors.grey.withOpacity(0.7),
)),
),
Padding(
padding: const EdgeInsets.only(left: 15.0, bottom: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(info,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 14.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
fontWeight: FontWeight.bold)),
Text(unit,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
))
],
),
)
]
)
)
);
}
selectCard(cardTitle) {
setState(() {
selectedCard = cardTitle;
});
}
}
I tried physics, listView.builder(),but everytime I get the same result.
Thank you in advance!!!!
Surround you ListView with Expanded widget.
You can't have a scrollable widget inside another scrollable widget without setting a proper height for the inner one. Or use ConstrainedBox
I am new to flutter, and working on a shopping cart project. i don't know how exatly i am suppose to ask this question but, here is what i wanted.
I am trying to update my UI when the cart item and prices changes, which means to display sum amount of products from ListView (Stateful widget) to main OrderPage Stateful widget. I know about setState() method, but i think i should use some callback methods here, dont know exactly.
I have explained in short in Image - see below img
What i have done: when user modify cart products, I have saved the value (price/product/count) in to constant value , i calculate the value and save in constant value, and later use that const var in Main widget (Main Ui), which does update when i close and reopen the page, but could not able to update when button pressed (product +/-buttons)
What i want to do is,
Update my total value when +/- buttons are pressed.
Here is my full code:
class cartConstant{
static int packageCount;
static List<int> list;
}
class OrderPage extends StatefulWidget {
#override
_OrderPageState createState() => _OrderPageState();
}
class _OrderPageState extends State<OrderPage> {
int data = 3;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(
color: Colors.black54, //change your color here
),
backgroundColor: Colors.white,
elevation: 1,
title: Text("Your order Summery",style: TextStyle(color: Colors.black54),),
centerTitle: true,
),
body: Container(
child:
FutureBuilder(
builder: (context, snapshot){
// var datas = snapshot.data;
return
ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: data,
itemBuilder: (BuildContext context, int index){
// Cart cart = datas[index];
return CartListView();
},
padding: EdgeInsets.symmetric(horizontal: 10.0),
scrollDirection: Axis.vertical,
);
},
),
),
bottomNavigationBar: _buildTotalContainer(),
);
}
Widget _buildTotalContainer() {
return Container(
height: 220.0,
padding: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
child: Column(
children: <Widget>[
SizedBox(
height: 10.0,
),
Padding(
padding: const EdgeInsets.only(top: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Subtotal",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
cartConstant.packageCount.toString(),
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
),
SizedBox(
height: 15,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Discount",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
"0.0",
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 10.0,
),
Divider(
height: 2.0,
),
SizedBox(
height: 20.0,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Cart Total",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
cartConstant.packageCount.toString(),
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 20.0,
),
GestureDetector(
onTap: () {
// Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => SignInPage()));
},
child: Container(
height: 50.0,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(35.0),
),
child: Center(
child: Text(
"Proceed To Checkout",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
SizedBox(
height: 20.0,
),
],
),
);
}
}
class CartListView extends StatefulWidget {
#override
_CartListViewState createState() => _CartListViewState();
}
class _CartListViewState extends State<CartListView> {
int _counter = 1;
int getPrice(int i,int priceC){
cartConstant.packageCount = i*priceC;
return cartConstant.packageCount;
}
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xFFD3D3D3), width: 2.0),
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 10.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: (){
setState(() {
_counter++;
if (_counter > 20) {
_counter = 20;
}
});
},
child: Icon(Icons.add, color: Color(0xFFD3D3D3))),
Text(
"$_counter",
style: TextStyle(fontSize: 18.0, color: Colors.grey),
),
InkWell(
onTap:(){
setState(() {
_counter--;
if (_counter < 2) {
_counter = 1;
}
});
},
child: Icon(Icons.remove, color: Color(0xFFD3D3D3))),
],
),
),
),
SizedBox(
width: 20.0,
),
Container(
height: 70.0,
width: 70.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/food.jpg"),
fit: BoxFit.cover),
borderRadius: BorderRadius.circular(35.0),
boxShadow: [
BoxShadow(
color: Colors.black54,
blurRadius: 5.0,
offset: Offset(0.0, 2.0))
]),
),
SizedBox(
width: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Employee Package",
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
SizedBox(height: 5.0),
Container(
height: 25.0,
width: 120.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Row(
children: <Widget>[
Text("Price",
style: TextStyle(
color: Color(0xFFD3D3D3),
fontWeight: FontWeight.bold)),
SizedBox(
width: 5.0,
),
InkWell(
onTap: () {},
child: Text(
getPrice(_counter, 2000).toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
),
SizedBox(
width: 10.0,
),
],
),
],
),
),
],
),
Spacer(),
GestureDetector(
onTap: () {
},
child: Icon(
Icons.cancel,
color: Colors.grey,
),
),
],
),
),
);
}
}
you can also check from my cart screen shot below:
You can copy paste run full code below
You can use callback refresh() and pass callback to CartListView
code snippet
class _OrderPageState extends State<OrderPage> {
int data = 3;
void refresh() {
setState(() {});
}
...
itemBuilder: (BuildContext context, int index) {
// Cart cart = datas[index];
return CartListView(refresh);
},
...
class CartListView extends StatefulWidget {
VoidCallback callback;
CartListView(this.callback);
...
InkWell(
onTap: () {
setState(() {
_counter++;
if (_counter > 20) {
_counter = 20;
}
});
widget.callback();
},
working demo
full code
import 'package:flutter/material.dart';
class cartConstant {
static int packageCount;
static List<int> list;
}
class OrderPage extends StatefulWidget {
#override
_OrderPageState createState() => _OrderPageState();
}
class _OrderPageState extends State<OrderPage> {
int data = 3;
void refresh() {
setState(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: true,
iconTheme: IconThemeData(
color: Colors.black54, //change your color here
),
backgroundColor: Colors.white,
elevation: 1,
title: Text(
"Your order Summery",
style: TextStyle(color: Colors.black54),
),
centerTitle: true,
),
body: Container(
child: FutureBuilder(
builder: (context, snapshot) {
// var datas = snapshot.data;
return ListView.builder(
physics: ClampingScrollPhysics(),
shrinkWrap: true,
itemCount: data,
itemBuilder: (BuildContext context, int index) {
// Cart cart = datas[index];
return CartListView(refresh);
},
padding: EdgeInsets.symmetric(horizontal: 10.0),
scrollDirection: Axis.vertical,
);
},
),
),
bottomNavigationBar: _buildTotalContainer(),
);
}
Widget _buildTotalContainer() {
return Container(
height: 220.0,
padding: EdgeInsets.only(
left: 10.0,
right: 10.0,
),
child: Column(
children: <Widget>[
SizedBox(
height: 10.0,
),
Padding(
padding: const EdgeInsets.only(top: 10),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Subtotal",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
cartConstant.packageCount.toString(),
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
),
SizedBox(
height: 15,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Discount",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
"0.0",
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 10.0,
),
Divider(
height: 2.0,
),
SizedBox(
height: 20.0,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Cart Total",
style: TextStyle(
color: Color(0xFF9BA7C6),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
Text(
"8000",
style: TextStyle(
color: Color(0xFF6C6D6D),
fontSize: 16.0,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 20.0,
),
GestureDetector(
onTap: () {
// Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) => SignInPage()));
},
child: Container(
height: 50.0,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(35.0),
),
child: Center(
child: Text(
"Proceed To Checkout",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
),
),
SizedBox(
height: 20.0,
),
],
),
);
}
}
class CartListView extends StatefulWidget {
VoidCallback callback;
CartListView(this.callback);
#override
_CartListViewState createState() => _CartListViewState();
}
class _CartListViewState extends State<CartListView> {
int _counter = 1;
int getPrice(int i, int priceC) {
cartConstant.packageCount = i * priceC;
return cartConstant.packageCount;
}
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Color(0xFFD3D3D3), width: 2.0),
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: 10.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
InkWell(
onTap: () {
setState(() {
_counter++;
if (_counter > 20) {
_counter = 20;
}
});
widget.callback();
},
child: Icon(Icons.add, color: Color(0xFFD3D3D3))),
Text(
"$_counter",
style: TextStyle(fontSize: 18.0, color: Colors.grey),
),
InkWell(
onTap: () {
setState(() {
_counter--;
if (_counter < 2) {
_counter = 1;
}
});
widget.callback();
},
child: Icon(Icons.remove, color: Color(0xFFD3D3D3))),
],
),
),
),
SizedBox(
width: 20.0,
),
Container(
height: 70.0,
width: 70.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/food.jpg"),
fit: BoxFit.cover),
borderRadius: BorderRadius.circular(35.0),
boxShadow: [
BoxShadow(
color: Colors.black54,
blurRadius: 5.0,
offset: Offset(0.0, 2.0))
]),
),
SizedBox(
width: 20.0,
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"Employee Package",
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
SizedBox(height: 5.0),
Container(
height: 25.0,
width: 120.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Row(
children: <Widget>[
Text("Price",
style: TextStyle(
color: Color(0xFFD3D3D3),
fontWeight: FontWeight.bold)),
SizedBox(
width: 5.0,
),
InkWell(
onTap: () {},
child: Text(
getPrice(_counter, 2000).toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
),
SizedBox(
width: 10.0,
),
],
),
],
),
),
],
),
Spacer(),
GestureDetector(
onTap: () {},
child: Icon(
Icons.cancel,
color: Colors.grey,
),
),
],
),
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: OrderPage(),
);
}
}
When the button is tapped, you just need to update the Subtotal amount and cart total.
Step 1 : Replace the harcoded value by a variable. So, something like :
Row(
children: <Widget>[
Text(
"Subtotal",
style: ...
),
Text(
"$subTotal",
style: ....
),
],
),
Step 2 : Now, add a code to calcualte subTotal and cartTotal. You already have code which increments and decrements the variable _counter. You just need to tweak that part like :
setState( (){
_counter++;
// So, the quantity is increased. Just get the price of current item and add in the sub total.
subTotal += priceC;
cartTotal = subTotal - discount;
} );