Related
i am trying to update the state of the animated switcher in the middle area. i am trying to do this using a setstate in the lower area. but it does not work.
the first thing i did is to create a variable with a boolean data type in the home class.
then i passed the variable to both the middle area and the lower area
the idea was that if the same variable is passed to the class whose state i am trying to update, and the class with the set state, it would work. but it seems i am wrong. i would appreciate some assistance.
the boolean variable i am trying to make work is the _rep variable
This is the Home widget
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
late AnimationController _animationController;
late AnimationController _controller;
late Animation<Offset> _animation;
late Animation<Offset> _anime;
bool _rep = true;
#override
void initState() {
_animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 2)
);
_animation = Tween<Offset>(
begin:Offset (0.0, 0.0),
end: Offset (0.0,3.0),
).animate(CurvedAnimation(
parent: _animationController,
curve: Curves.easeIn));
_anime = Tween<Offset>(
begin:Offset (0.0, 0.0),
end: Offset (0.0,-0.55),
).animate(CurvedAnimation(
parent: _animationController,
curve: Curves.easeIn));
super.initState();
}
#override
void dispose() {
_animationController.dispose();
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
physics: const NeverScrollableScrollPhysics(),
child: Padding(
padding: EdgeInsets.only(top: 3.h),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TopIcon(icons: Icons.arrow_back, color:Colors.grey.shade300 ,),
SizedBox(
height: 13.h,
width: 13.w,
child: Image.asset('assets/images/download.png')
),
TopIcon(icons: Icons.shopping_bag_outlined, color: Colors.grey.shade300,),
],
),
SizedBox(
height: 3.h,
),
Text('Frappuccino',
style: TextStyle(
fontSize: 27.sp,
fontWeight: FontWeight.bold
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('White Chocolate',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey.shade400
),
),
),
MiddleArea(
controller: _animationController,
animation: _animation,
rep: _rep,
),
LowerArea(controller: _animationController, anime: _anime, rep = _rep),
],
),
),
),
);
}
}
This is the middle area
class MiddleArea extends StatefulWidget {
MiddleArea({Key? key, required this.controller, required this.animation, required this.rep}) : super(key: key);
AnimationController controller;
Animation<Offset> animation;
final bool rep;
#override
State<MiddleArea> createState() => _MiddleAreaState();
}
class _MiddleAreaState extends State<MiddleArea> {
bool _flag = true;
bool _favourite = true;
#override
Widget build(BuildContext context) {
print(widget.rep);
return SizedBox(
height: 52.h,
child: Stack(
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 135.0),
child: Text('STARBUCKS',
style: TextStyle(
fontFamily: 'Typette',
color: Colors.brown.shade200,
fontSize: 30.sp,
fontWeight: FontWeight.w400
),
),
),
Text('STARBUCKS',
style: TextStyle(
fontFamily: 'Typette',
color: Colors.brown.shade100,
fontSize: 30.sp,
fontWeight: FontWeight.w400
),
),
Text('STARBUCKS',
style: TextStyle(
fontFamily: 'Typette',
color: Colors.brown.shade50,
fontSize: 30.sp,
fontWeight: FontWeight.w400
),
),
],
),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
SizeAndFave(text: 'Preference'),
SizeAndFave(text: 'Fave!')
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: (){
setState(() {
_flag = !_flag;
});
},
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
transitionBuilder: (Widget child, Animation<double> animation){
return FadeTransition(opacity: animation, child: child,);
},
child: widget.rep == true?Padding(
padding: const EdgeInsets.all(14.0),
key: const Key('1'),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
border: Border.all(
color: Colors.brown.shade300,
width: 3
),
borderRadius: BorderRadius.circular(10)
),
child: const Center(
child: Icon(
Icons.coffee_outlined,
size: 20,
),
)
),
):null,
)
),
GestureDetector(
onTap: (){
setState(() {
_favourite = !_favourite;
});
},
child: _favourite? TopIcon(icons: Icons.favorite_border, color: Colors.brown.shade300)
:TopIcon(
icons: Icons.favorite, color: Colors.brown.shade300)
)
],
)
],
),
AnimatedSwitcher(
duration: Duration(seconds: 1),
transitionBuilder: (Widget child, Animation<double> animation) {
return FadeTransition( opacity: animation,
child: child);
},
child: _flag == true ? Center(
key: const Key('1'),
child: SlideTransition(
position: widget.animation,
child: SizedBox(
height: 80.h,
width: 80.w,
child: Image.asset('assets/images/starcup.png'),
),
),
):Center(
key: const Key('2'),
child: SlideTransition(
position: widget.animation,
child: SizedBox(
height: 80.h,
width: 80.w,
child: Image.asset('assets/images/greeen.png'),
),
),
),
),
Positioned(
child:
Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: EdgeInsets.only(top: 30.h),
child: TopIcon(
icons: Icons.car_crash_outlined, color: Colors.brown.shade300),
),
)),
const Positioned(
child:
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: EdgeInsets.only(top: 330.0, left: 14),
child: Text('\$ 5.99',
style: TextStyle(
fontSize: 27,
fontWeight: FontWeight.bold
),
),
),
))
],
),
);
}
}
and lastly, the lower area
class LowerArea extends StatefulWidget {
final AnimationController controller;
final Animation<Offset> anime;
bool rep;
LowerArea({Key? key, required this.controller, required this.anime, required this.rep}) : super(key: key);
#override
State<LowerArea> createState() => _LowerAreaState();
}
class _LowerAreaState extends State<LowerArea> {
bool _bigger = true;
bool _fade = true;
void move(){
}
#override
Widget build(BuildContext context) {
return Column(
children: [
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(1.h),
child: const Text('Tall Frappuccino',
style: TextStyle(
fontWeight: FontWeight.w500
),
),
),
Padding(
padding: EdgeInsets.only(right: 5.h),
child: const Text('Swipe Down',
style: TextStyle(
fontWeight: FontWeight.w500
),
),
),
Padding(
padding: EdgeInsets.all(2.h),
child: const Text('Pickup',
style: TextStyle(
fontWeight: FontWeight.w500
),
),
)
],
),
),
SlideTransition(
position: widget.anime,
child: AnimatedContainer(
// height: 11.h,
width: _bigger ? 35.h: 80.h,
duration: const Duration(milliseconds: 500),
child: Stack(
fit: StackFit.loose,
children: [
Center(child: Image.asset('assets/images/baggie.png')),
Center(
child: Padding(
padding: EdgeInsets.only(bottom: 4.h),
child: GestureDetector(
onTap: (){
widget.controller.forward();
setState(() {
_bigger = !_bigger;
_fade = !_fade;
widget.rep = !widget.rep;
print('this is fade $_fade ');
});
},
child: AnimatedSwitcher(
duration: Duration(milliseconds: 300),
transitionBuilder: (Widget child, Animation<double> animation){
return FadeTransition(opacity: animation, child: child,);
},
child: _fade? Container(
key: Key('1'),
height: 8.h,
width: 7.w,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(15)
),
child: Column(
children: [
Padding(
padding: EdgeInsets.all(0.3.h),
child: Icon(
Icons.lock_outline,
color: Colors.white54,
size: 2.5.h,
),
),
Icon(
Icons.arrow_drop_down,
color: Colors.white12,
size: 3.h,
),
],
),
):null,
),
),
),
)
],
),
),
)
],
);
}
use provider pacakges https://pub.dev/packages/provider
Create a class that inherits the functions of ChangeNotifyer to create a flag to control and create a setter.
provider class
class StateController extends ChangeNotifier{
bool _req = false;
bool get req => _req; //getter
setReqValue(){
_req = !_req;
notifyListener();
}
}
Declare the provider class in the main function. You can change the location of the declaration according to Wiget tree, but first declare it in main
Change main.dart
void main(){
runApp(
Multiprovider(
providers: [
ChangeNotifierProvider(create: (_) => StateController()),
],
child: HomePage(),
)
);
}
The UI is updated by notifyListener().
change UI
child: context.watch<StateController>().req == true ? Padding(
padding: const EdgeInsets.all(14.0),
key: const Key('1'),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
border: Border.all(
color: Colors.brown.shade300,
width: 3
),
borderRadius: BorderRadius.circular(10)
),
child: const Center(
child: Icon(
Icons.coffee_outlined,
size: 20,
),
)
),
):null,
Change State
onTap: (){
widget.controller.forward();
setState(() {
_bigger = !_bigger;
_fade = !_fade;
context.read<StateController>().setReqValue();
print('this is fade $_fade ');
});
},
I am too lazy to try understand your code. But if you want to update state of the page after you pop from Navigation to it.
In page you want to update
Navigation.push(context, /* Page that will change something */)
// Future will trigger then you return to this page.
.then((_) => setState(() {}))
I want when I click on the + Button it shows the next 3 containers that in the listVeiw it is horizontally direction.
Here is my code.
when I tap for the first time it works, but it doesn't work for the others taps
import 'package:flutter/material.dart';
class FindCars extends StatefulWidget {
const FindCars({Key? key}) : super(key: key);
#override
State<NewWayToFindCars> createState() => _NewWayToFindCarsState();
}
class _NewWayToFindCarsState extends State<NewWayToFindCars> {
var pricesListNumber = 10;
int counter = 1;
List months = [
'يناير',
'فبراير',
'مارس',
'ابريل',
'مايو',
'يونيو',
'يوليو',
'اغسطس',
'سبتمبر',
'اكتوبر',
'نوفمبر',
'ديسمبر'
];
var currentMonth = new DateTime.now().month;
var currentDay = new DateTime.now().day;
late ScrollController _scrollController;
#override
void initState() {
_scrollController = ScrollController();
super.initState();
}
#override
Widget build(BuildContext context) {
print(months[currentMonth - 1]);
print(currentDay);
print(DateTime.now());
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Directionality(
textDirection: TextDirection.rtl,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'${months[currentMonth - 1]} 2022',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
fontFamily: 'cairo',
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
InkWell(
onTap: () {
_scrollController.animateTo(-200,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: Container(
child: Icon(Icons.remove, size: 22),
width: 50,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFDCEDC8).withOpacity(0.5),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
),
),
),
InkWell(
onTap: () {
_scrollController.animateTo(200,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: Container(
child: Center(child: Icon(Icons.add_sharp, size: 22)),
width: 50,
height: 50,
decoration: BoxDecoration(
color: Color(0xFFDCEDC8).withOpacity(0.25),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.only(
topRight: Radius.circular(10),
bottomRight: Radius.circular(10),
),
),
),
),
],
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
child: ListView(
controller: _scrollController, // scroll contoller
scrollDirection: Axis.horizontal,
children: new List.generate(
pricesListNumber,
(index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Center(child: Text('${currentDay++}')),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
color: Color(0xFFDCEDC8).withOpacity(0.5),
border: Border.all(
color: Color(0xFFDDE7DD).withOpacity(0.5),
width: 2.5,
),
borderRadius: BorderRadius.circular(10),
),
height: 50,
width: MediaQuery.of(context).size.width * 0.25,
),
),
),
),
),
],
),
),
);
}
}
Here is my code for the UI, and now it is only works in the first click put it does not work until the end.
Can you please help me with that?
Attach a ScrollController to your scrollable widget and then use scrollController.animateTo(//offset) to reach where you want.
Do check the animateTo method on this page.
EDIT:
sample code:
ScrollController scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter'),
centerTitle: true,
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
scrollController.animateTo(0,
duration: Duration(seconds: 1), curve: Curves.easeIn);
},
child: Text("go top")),
Expanded(
flex: 1,
child: ListView.builder(
controller: scrollController,
itemCount: 100,
itemBuilder: (context, index) {
return Text('This is it.');
},
),
),
],
),
);
}
Try it in your IDE.
EDIT:
Here is the problem in your code, you need to decrease/increase the current offset of the scroll controller by subtracting/adding 200 from the scrollController.position. You are getting it moved for the first time because at that time offset is not at 200 and for the second time it is there at 200. That is why it is not moving which is obviously no error.
Just use a scrollController, attach it to your ListView builder,
then on your Button's onPress/onTap method, call _scrolController.animateTo(someOffset)
Copy the code below and run into your project. I have customized it based on your needs.
import 'package:flutter/material.dart';
class TestView extends StatefulWidget {
const TestView({Key? key}) : super(key: key);
#override
State<TestView> createState() => _TestViewState();
}
class _TestViewState extends State<TestView> {
late ScrollController _scrollController;
#override
void initState() {
_scrollController = ScrollController();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
onPressed: () {
_scrollController.animateTo(-500,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: const Text("-")),
ElevatedButton(
onPressed: () {
_scrollController.animateTo(500,
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut);
},
child: const Text("+"),
),
],
),
SizedBox(
height: 200,
child: ListView(
controller: _scrollController,
scrollDirection: Axis.horizontal,
children: List.generate(20, (index) {
return Container(
color: Colors.amber,
height: 100,
width: 100,
margin: const EdgeInsets.only(right: 10),
child: Center(child: Text("$index")),
);
}),
),
)
],
),
);
}
}
I'm new to Flutter and I just start coding the UI of a chat app so I figure out that my widget doesn't take all the space of the bottom navigation bar like the photo shows : shows
This is my camera widget code :
import 'package:flutter/material.dart';
import 'dart:io';
import 'package:image_picker/image_picker.dart';
class Camera extends StatefulWidget {
#override
_CameraState createState() => _CameraState();
}
class _CameraState extends State<Camera> {
File _image;
final imagePicker = ImagePicker();
Future getImage() async {
final image = await imagePicker.getImage(source: ImageSource.camera);
setState(() {
_image = File(image.path);
});
}
#override
Widget build(BuildContext context) {
return SizedBox(
height: 100,
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 80.0,
height: 80.0,
child: FloatingActionButton(
backgroundColor: Colors.white,
onPressed: getImage,
child: Icon(
Icons.camera_alt_rounded,
color: Colors.lightBlue[600],
size: 35.0,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
),
),
],
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.lightBlue[50],
boxShadow: [
BoxShadow(color: Colors.grey[100], spreadRadius: 3),
],
),
height: 50,
),
);
}
}
and this is the chat screen code :
import 'dart:io';
import 'package:mychat/services/auth.dart';
import 'package:flutter/material.dart';
import 'package:mychat/chat/chat.dart';
import 'package:mychat/widgets/Med_form.dart';
import 'package:mychat/widgets/bottomButtons.dart';
import 'package:mychat/widgets/camera.dart';
import 'package:mychat/widgets/incrementAndDecrement.dart';
import 'package:mychat/widgets/yesOrno.dart';
class ChatScreen extends StatefulWidget {
#override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
File _image;
final AuthService _auth = AuthService();
List<String> messages = [
'fizikefgzerpgr',
'fioezhfejzifojef',
'fvfzerfergnyolnkyokjy',
'rgop^l^lmf^prlgprgprp'
];
List<String> responses = [
'fizikefgzerpgr',
'fezfzefzefezff',
'ofpkoepzkfopkzef',
'fjeziofjiozejfozejf'
];
//final AuthService _auth = AuthService();
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(90),
child: AppBar(
title: new Text(
"لاباس ⸮",
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontWeight: FontWeight.bold),
),
centerTitle: true,
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomRight,
colors: [Colors.blueGrey[300], Colors.grey[50]])),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.arrow_forward_ios_outlined,
color: Colors.black,
),
onPressed: () async {
await _auth.signOut();
})
],
elevation: 0.0,
),
),
body: Chat_page(messages: messages, responses: responses),
bottomNavigationBar: Camera(),
),
));
}
}
and this is the code of the messages:
import 'package:bubble/bubble.dart';
import 'package:flutter/material.dart';
class Chat_page extends StatefulWidget {
List<String> messages;
List<String> responses;
Chat_page({this.messages, this.responses});
#override
_Chat_pageState createState() => _Chat_pageState();
}
class _Chat_pageState extends State<Chat_page> {
String message;
int data;
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
/* Container(
padding: EdgeInsets.only(top: 15, bottom: 10),
child: Text(
"Today, 10",
style: TextStyle(fontSize: 20, color: Colors.white),
),
), */
Flexible(
child: widget.messages.length > 0
? ListView.builder(
reverse: true,
shrinkWrap: true,
itemCount: widget.messages.length,
itemBuilder: (context, index) => Column(
children: [
widget.messages.length > 0
? chat(widget.messages[index].toString(), 1)
: Container(),
widget.responses.length > 0
? chat(widget.responses[index].toString(), 0)
: Container(),
],
))
: Container(),
),
SizedBox(
height: 20,
),
SizedBox(
height: 15.0,
)
],
));
}
}
Widget chat(String message, int data) {
return Container(
padding: EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment:
data == 1 ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
data == 0
? Container(
height: 60,
width: 60,
child: CircleAvatar(
child: Icon(Icons.account_circle),
),
)
: Container(),
Padding(
padding: EdgeInsets.all(10.0),
child: Bubble(
radius: Radius.circular(15.0),
color: data == 0 ? Color(0xFFf7ede2) : Color(0xFFf7ede2),
elevation: 0.0,
child: Padding(
padding: EdgeInsets.all(2.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
width: 10.0,
),
Flexible(
child: Container(
constraints: BoxConstraints(maxWidth: 200),
child: Text(
message,
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
))
],
),
)),
),
data == 1
? Container(
height: 60,
width: 60,
child: CircleAvatar(
child: Icon(Icons.account_circle),
),
)
: Container(),
],
),
);
}
so how can I fix this the make my camera widget take the full space
try to change
SizedBox(
height: 100,
child: Container(
to
Container(
height: 100,
width:double.infinty,
I have seen many same questions but they don't have answers yet, so I decided to put it again.
I am using rest API to load data in Gridview.count with ScrollController which is generally working fine but many times some images are not loading on the frame and i got this error:-
"Connection closed before full header was received, uri =IMAGE URL"
Here is my code
class CreateHome extends StatefulWidget {
_AppState state;
BuildContext context;
CreateHome(this.state, this.context);
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return new CreateHomeState(state, context);
}
}
class CreateHomeState extends State<CreateHome> {
_AppState state;
BuildContext context;
int _selectBuilder = 0;
List<ProductModel> productList = new List();
CreateHomeState(this.state, this.context);
ScrollController _controller;
String lasthit = "";
FutureBuilder<List<ProductModel>> _getFutureBuilder(int pos) {
switch (pos) {
case 0:
return new FutureBuilder(
future: Api.getProductList(context, '0'),
builder: (context, snapshot) {
if (snapshot.hasData) {
productList.addAll(snapshot.data);
return GridList(productList);
} else if (snapshot.hasError) {
Toast.show(snapshot.error, context,
duration: 3, backgroundColor: Colors.deepOrange);
}
return RoundProgress();
},
);
case 1:
return new FutureBuilder(
future: Api.getProductList(
context, productList[productList.length - 1].product_id),
builder: (context, snapshot) {
lasthit = productList[productList.length - 1].product_id;
if (snapshot.hasData) {
productList.addAll(snapshot.data);
//productList = productList.sublist(productList.length-7, productList.length-1);
var distinctIds = productList.toSet().toList();
return GridList(distinctIds);
} else if (snapshot.hasError) {
Toast.show(snapshot.error, context,
duration: 3, backgroundColor: Colors.deepOrange);
}
return RoundProgress();
},
);
}
}
#override
void initState() {
print('initstatecalled');
_controller = ScrollController();
_controller.addListener(_scrollListener);
super.initState();
}
_scrollListener() {
if (_controller.offset >= _controller.position.maxScrollExtent &&
!_controller.position.outOfRange) {
print(productList.length.toString());
String currentHit = productList[productList.length - 1].product_id;
if (currentHit != lasthit) {
setState(() {
_selectBuilder = 1;
});
}
}
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
controller: _controller,
child: Container(
color: Colors.black12,
//=========Main Container For Scrollview==============//
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
//================Container for Categories==================//
color: Colors.white,
child: Container(
height: 130,
child: FutureBuilder<List<CategoryModel>>(
future: Api.getDataCategories(context),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<CategoryModel> categoryListing = snapshot.data;
return ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: categoryListing.length,
itemBuilder: (BuildContext context, int index) {
return createList(
state,
categoryListing[index].url,
categoryListing[index].name,
1,
categoryListing[index].id);
},
);
} else if (snapshot.hasError) {
Toast.show("Error", context,
duration: 3,
gravity: Toast.BOTTOM,
backgroundColor: Colors.deepOrange);
}
return RoundProgress();
},
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 20, 0, 20),
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: SizedBox(
child: FutureBuilder<List<String>>(
future: Api.getBanners(context, "front"),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<String> images = snapshot.data;
return CarouselWithIndicator(images);
} else if (snapshot.hasError) {
Toast.show("Error", context,
duration: 3,
gravity: Toast.BOTTOM,
backgroundColor: Colors.deepOrange);
}
return RoundProgress();
},
),
),
),
),
),
Container(
color: Colors.white, child: _getFutureBuilder(_selectBuilder))
],
),
),
),
);
}
}
This is my code for making GridView
class GridList extends StatelessWidget {
List<ProductModel> list;
GridList(this.list);
#override
Widget build(BuildContext context) {
print('length from grid..'+list.length.toString());
IconData icon;
Color color;
String price;
bool boolean;
return Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Text(
'Popular Products',
style: TextStyle(
fontSize: 16,
fontFamily: 'SFProRegular',
color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
child: GridView.count(
shrinkWrap: true,
primary: false,
childAspectRatio: 0.6,
//(itemWidth / itemHeight),
crossAxisCount: 2,
children: List.generate(list.length, (index) {
if (list[index].wishlist == "1") {
icon = Icons.favorite;
color = Colors.red;
} else {
icon = Icons.favorite_border;
color = Colors.black38;
}
if (list[index].discounted_price != "0") {
price = "Rs " + list[index].discounted_price;
boolean = true;
} else {
price = "Rs " + list[index].price;
boolean = false;
}
return Wrap(
children: <Widget>[
Card(
elevation: 5,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
constraints: new BoxConstraints.expand(
height: 150.0,
),
padding:
new EdgeInsets.only(top: 8.0, right: 8.0),
decoration: new BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(4),
topRight: Radius.circular(4)),
image: new DecorationImage(
image:
new NetworkImage(list[index].image_url),
fit: BoxFit.cover,
),
),
child: new Stack(
children: <Widget>[
new Positioned(
right: 0.0,
top: 0.0,
child: Material(
borderRadius: BorderRadius.all(
Radius.circular(50)),
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Center(
child: new Icon(
icon,
color: color,
size: 16,
),
),
),
),
),
],
)),
Padding(
padding:
const EdgeInsets.fromLTRB(5.0, 10, 0, 10),
child: Text(
list[index].product_name,
style: TextStyle(
fontSize: 16,
fontFamily: 'SFProRegular',
color: Colors.black),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(5.0, 0, 0, 10),
child: Row(
children: <Widget>[
Icon(
Icons.person,
size: 23,
color: Colors.black38,
),
Padding(
padding:
const EdgeInsets.fromLTRB(5.0, 0, 0, 0),
child: Text(
list[index].designer,
style: TextStyle(
fontSize: 14,
fontFamily: 'SFProRegular',
color: Colors.black38,
decoration: TextDecoration.underline,
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(5.0, 2, 0, 10),
child: Row(
children: <Widget>[
Text(
price,
style: TextStyle(
fontSize: 13,
fontFamily: 'SFProRegular',
color: Colors.green),
),
Padding(
padding:
const EdgeInsets.fromLTRB(10, 0, 0, 0),
child: Visibility(
visible: boolean,
maintainSize: true,
maintainAnimation: true,
maintainState: true,
child: Text(
"Rs " + list[index].price,
style: TextStyle(
fontSize: 13,
fontFamily: 'SFProRegular',
color: Colors.grey,
decoration:
TextDecoration.lineThrough),
),
),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(5.0, 0, 0, 5),
child: Visibility(
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: boolean,
child: Text(
list[index].discount + '% OFF',
style: TextStyle(
fontSize: 13,
fontFamily: 'SFProRegular',
color: Colors.deepOrange),
),
),
),
],
),
),
),
],
);
}),
crossAxisSpacing: 3.0,
mainAxisSpacing: 5.0,
),
),
],
),
);
}
}
this issue will be solved by
Flutter Clean
run
I am building a food cart application and have a query on the menu item page.
My menu items page consists of a list view, which shows each item with description along with an option to specify the quantity of items( 1, 2, 3....)
Now I am able to increment or decrement item count for a single item, but not sure how to do that in a list view at a particular index where the user clicks.
Could some one please help me on this?
The code which I have done till now is as below :
FutureBuilder(
future: getItemList(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
}
var itemList = snapshot.data;
int itemlength = itemList.length;
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 100,
margin: EdgeInsets.only(left: 10, right: 10, top: 10),
decoration: BoxDecoration(
color: Colors.white70,
border: Border.all(width: 2.0, color: Colors.blueGrey),
borderRadius: BorderRadius.circular(6.0),
boxShadow: [
BoxShadow(
color: Color(0xFF6078ea).withOpacity(.3),
offset: Offset(0.0, 8.0),
blurRadius: 8.0),
],
),
child: Row(
children: < Widget > [
Container(
width: 75,
child: ClipRRect(
borderRadius: new BorderRadius.circular(10.0),
child: Image(
image: AssetImage(
'assets/images/loginbg3.jpg'),
fit: BoxFit.cover,
),
),
margin: EdgeInsets.only(left: 10),
),
Expanded(
child: Container(
child: Column(
children: < Widget > [
Row(
children: < Widget > [
Expanded(child: Container(margin: EdgeInsets.only(left: 10, top: 15, bottom: 5), child: Text(itemList[index]['itemname'], style: kClickableTextStyle, ))),
Container(color: Colors.white, width: 25, margin: EdgeInsets.only(left: 10, top: 15, bottom: 5), child: Image.asset(_itemtype)),
],
),
Row(
children: < Widget > [
Container(margin: EdgeInsets.only(left: 10, top: 15, bottom: 5), child: Text('Price : ', style: kListTitleTextStyle, )),
Container(margin: EdgeInsets.only(left: 10, top: 15, bottom: 5), child: Text(numberofitems.toString() + ' \u20B9 ', style: kListTitleTextStyle, )),
],
),
],
),
),
),
Container(
margin: EdgeInsets.only(left: 10),
child: Row(
children: < Widget > [
InkWell(
onTap: onClickDelete,
child: Container(
width: 30, child: Icon(
Icons.remove_circle_outline,
color: Colors.green,
size: 30,
), ),
),
Container(
width: 30,
child: Center(child: Text(_count.toString(), style: TextStyle(fontSize: 25), )),
),
InkWell(
onTap: onClickAdd,
child: Container(
margin: EdgeInsets.only(right: 5),
width: 30, child: Icon(
Icons.add_circle_outline,
color: Colors.green,
size: 30,
), ),
),
],
),
),
],
),
);
},
itemCount: itemList == null ? 0 : itemList.length,
);
})
You can copy paste run full code below
Step 1: create Item class
Step 2: change future builder call
Step 3: deal with Inkwell onTap
working demo
code snippet
Future callback;
#override
void initState() {
callback = _getItemList();
super.initState();
}
#override
Widget build(BuildContext context) {
var futureBuilder = FutureBuilder(
future: callback,
...
InkWell(
onTap: () {
if (itemList[index].numberofitems > 0) {
setState(() {
itemList[index].numberofitems =
itemList[index].numberofitems - 1;
});
}
},
...
InkWell(
onTap: () {
setState(() {
itemList[index].numberofitems =
itemList[index].numberofitems + 1;
print(
' ${itemList[index].itemname.toString()} ${itemList[index].numberofitems.toString()}');
});
},
full code
import 'dart:async';
import 'dart:collection';
import 'package:flutter/material.dart';
void main() => runApp( MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class Item {
String itemname;
String itemtype;
int numberofitems;
Item({this.itemname, this.itemtype, this.numberofitems});
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Future callback;
#override
void initState() {
callback = _getItemList();
super.initState();
}
#override
Widget build(BuildContext context) {
var futureBuilder = FutureBuilder(
future: callback,
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
case ConnectionState.waiting:
return Center(child: CircularProgressIndicator());
default:
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
else
return createListView(context, snapshot);
}
},
);
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: futureBuilder,
);
}
Future<List<Item>> _getItemList() async {
var values = List<Item>();
values.add(
Item(itemname: "A", itemtype: "assets/images/a.jpg", numberofitems: 0));
values.add(
Item(itemname: "B", itemtype: "assets/images/a.jpg", numberofitems: 1));
values.add(
Item(itemname: "C", itemtype: "assets/images/a.jpg", numberofitems: 2));
//throw Exception("Danger Will Robinson!!!");
await Future.delayed( Duration(seconds: 2));
return values;
}
Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
List<Item> itemList = snapshot.data;
return ListView.builder(
itemCount: itemList.length,
itemBuilder: (BuildContext context, int index) {
{
return Container(
height: 100,
margin: EdgeInsets.only(left: 10, right: 10, top: 10),
decoration: BoxDecoration(
color: Colors.white70,
border: Border.all(width: 2.0, color: Colors.blueGrey),
borderRadius: BorderRadius.circular(6.0),
boxShadow: [
BoxShadow(
color: Color(0xFF6078ea).withOpacity(.3),
offset: Offset(0.0, 8.0),
blurRadius: 8.0),
],
),
child: Row(
children: <Widget>[
Container(
width: 75,
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: Image(
image: AssetImage('assets/images/a.jpg'),
fit: BoxFit.cover,
),
),
margin: EdgeInsets.only(left: 10),
),
Expanded(
child: Container(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.only(
left: 10, top: 15, bottom: 5),
child: Text(
itemList[index].itemname,
))),
Container(
color: Colors.white,
width: 25,
margin: EdgeInsets.only(
left: 10, top: 15, bottom: 5),
child: Image.asset(itemList[index].itemtype)),
],
),
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
left: 10, top: 15, bottom: 5),
child: Text(
'Price : ',
)),
Container(
margin: EdgeInsets.only(
left: 10, top: 15, bottom: 5),
child: Text(
itemList[index].numberofitems.toString() +
' \u20B9 ',
)),
],
),
],
),
),
),
Container(
margin: EdgeInsets.only(left: 10),
child: Row(
children: <Widget>[
InkWell(
onTap: () {
if (itemList[index].numberofitems > 0) {
setState(() {
itemList[index].numberofitems =
itemList[index].numberofitems - 1;
});
}
},
child: Container(
width: 30,
child: Icon(
Icons.remove_circle_outline,
color: Colors.green,
size: 30,
),
),
),
Container(
width: 30,
child: Center(
child: Text(
itemList[index].numberofitems.toString(),
style: TextStyle(fontSize: 25),
)),
),
InkWell(
onTap: () {
setState(() {
itemList[index].numberofitems =
itemList[index].numberofitems + 1;
print(
' ${itemList[index].itemname.toString()} ${itemList[index].numberofitems.toString()}');
});
},
child: Container(
margin: EdgeInsets.only(right: 5),
width: 30,
child: Icon(
Icons.add_circle_outline,
color: Colors.green,
size: 30,
),
),
),
],
),
),
],
),
);
}
;
});
}
}
you need to create list of objects for your Item like.
class Item{
String name;
String description;
int quantity;
double price;
}
and on tap of item, get index of clicked item with new incremented/decremented value and update your list of objects inside setState().
You need to wrap your itemBuilder item, i.e the Container with a GestureDetector and then call the onTap() method inside that detector.
Before that, you'll have to convert your item into a stateful widget with a variable to maintain the count of quantity.