I am trying to get rid of this blinking/flashing of the widget presented in the image below. This is an Alert Dialog opened. Below it's a GridView Builder which creates images. The images are refreshing when I am trying to drag and resize the height of the container. I know setState it's called multiple times, but it doesn't matter, the widget should be immutable.
I changed the Grid View to a Stateless Widget, after trying a while using AutomaticKeepAliveClientMixin, wantToKeepAlive, but nothing is changing.
class GridViewBuilderOutiftTabTapped extends StatelessWidget {
final List<CleverCloset> myClassVar;
const GridViewBuilderOutiftTabTapped(this.myClassVar);
#override
Widget build(BuildContext context) {
return GridView.builder(
physics: const ScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 5,
mainAxisSpacing: 5,
maxCrossAxisExtent: SizeConfig.screenWidth!/4,),
itemCount: myClassVar.length,
itemBuilder: (BuildContext ctx, index) {
return InkWell(
onTap: (){
},
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20))
),
width: SizeConfig.screenWidth!/4,
height: SizeConfig.screenWidth!/4,
child: FittedBox(
child:
FadeInImage(
placeholder: const AssetImage('assets/placeholder.gif'),
image: CleverCloset.imageFromBase64String(myClassVar[index].getImage!).image,
fit: BoxFit.fill,
),
fit: BoxFit.fill,
),
),
);
}
);
}
}
void addOutfitPlannerDialog(BuildContext context) async{
await showGeneralDialog(
barrierColor: Colors.black.withOpacity(0.5),
transitionBuilder: (context, a1, a2, widget) {
return SafeArea(
child: Transform.scale(
scale: a1.value,
child: Opacity(
opacity: a1.value,
child: AlertDialog(
actionsPadding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
contentPadding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
titlePadding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
buttonPadding: const EdgeInsets.all(0),
title: _getBackAndSaveButtons(context),
backgroundColor: Colors.white,
insetPadding: const EdgeInsets.all(0),
content: SizedBox(
width: 100.w,
height: 100.h,
child: Stack(
children: [
Positioned(
top: 0,
child: Container(
width: SizeConfig.screenWidth,
height: 82.h,
color: const Color(0xff393432),
child: Container(
margin: EdgeInsets.fromLTRB(45, 8, 45, 10.h),
color: Colors.white,
),
),
),
Positioned(
bottom: 0,
child: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Container(
height: heightBottomOutfitPlanner,
decoration: const BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide( // <--- top side
color: Colors.grey,
width: 1.0,
),
),
),
width: 100.w,
child: Column(
children: [
SizedBox(
width: 100.w,
height: 8.h,
child: Row(
children: [
Expanded(
flex:7,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: outfitPlanerOrganizerEntriesList.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: (){
getOutfitPlannerTabTappedImages(outfitPlanerOrganizerEntriesList[index], setState);
},
child: Container(
padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
decoration: (outfitPlanerOrganizerEntriesList[index]==myOutfitPlannerTabTappedImages[0].closetOrganizer) || (outfitPlanerOrganizerEntriesList[index]=="To Buy" && myOutfitPlannerTabTappedImages[0].closetOrganizer==null) ? const BoxDecoration(
border: Border(
bottom: BorderSide( // <--- top side
color: Color(0xffE4BCB4),
width: 3.0,
),
),
):null,
child: Center(child: Text(outfitPlanerOrganizerEntriesList[index],
style: const TextStyle(
fontSize: 16,
))),
),
);
}
),
),
const SizedBox(width: 30),
Expanded(
flex:1,
child: Container(
decoration: const BoxDecoration(
border: Border(
left: BorderSide( // <--- top side
color: Colors.black,
width: 1.0,
),
),
),
child: GestureDetector(
onPanStart:(details) => _handleDrag(details, setState),
onPanUpdate:(details) => _handleUpdate(details, setState),
child: const Icon(Icons.drag_indicator,
size: 35,
),
)
),
),
],
),
),
const SizedBox(height: 5),
!isLoadingOutfitPlannerTabTappedImages ? Container(
width: 100.w,
margin: const EdgeInsets.fromLTRB(5, 0, 5, 0),
height: heightBottomOutfitPlanner-10.h,
child: GridViewBuilderOutiftTabTapped(myOutfitPlannerTabTappedImages),
) : Container(),
],
),
);
},
),
)
],
),
)
),
),
),
);
},
transitionDuration: const Duration(milliseconds: 100),
barrierDismissible: true,
barrierLabel: '',
context: context,
pageBuilder: (context, animation1, animation2) {return Container();}
);
}
Related
i am working on this flutter app where i need to show the children in a grid view, so i used a column widget in side GridView.builder like shown below, i want to remove the sapcing where its marked in the red, and leave it to be responsive somehow...
GridView widget:
GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 10,
mainAxisSpacing: 10,
maxCrossAxisExtent: 450,
),
primary: false,
shrinkWrap: true,
padding: const EdgeInsets.only(
right: 25,
left: 25,
top: 20,
),
itemCount: data.length,
itemBuilder: (ctx, index) {
return VideoWidget(
oneVideoData: data[index],
);
},
),
VideoWidget:
Container(
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: double.infinity,
decoration: BoxDecoration(
...
),
child: Row(
children: [
...
],
),
),
Stack(
alignment: AlignmentDirectional.center,
children: [
_videoPlayerControllerFFrame.value.isInitialized
? AspectRatio(
aspectRatio:
_videoPlayerControllerFFrame.value.aspectRatio,
child: VideoPlayer(
_videoPlayerControllerFFrame,
),
)
: Container(
height: 250,
),
_isVideoLoading
? const CircularProgressIndicator(
color: Colors.yellow,
)
: IconButton(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return VideoPlayerWidget(
oneVideoData: widget.oneVideoData,
videoController: _videoPlayerController,
);
});
},
icon: Icon(
Icons.play_arrow,
color: Theme.of(context).colorScheme.tertiary,
size: 50,
),
),
],
),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 10,
),
...
),
),
],
),
);
this a screen shot of the output:
i want to get rid of the red space in the bottom.
Thanks in advance
Try below code hope its help to you.
GridView.builder(
shrinkWrap: true,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 6,
itemBuilder: (BuildContext context, int index) {
return Card(
elevation: 5,
shadowColor: Colors.grey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
10,
),
),
margin: EdgeInsets.all(5),
child: Container(
height: 200,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(2),
child: Row(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.black,
width: 1.0,
),
),
child: CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
SizedBox(
width: 10,
),
Text('Person ${index.toString()}'),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
),
),
),
),
),
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
),
child: Text(
'Awesome Product From Person ${index.toString()}',
),
),
],
),
),
);
},
),
Result Screen->
i have nested Listview.Builder inside my FutureBuilder one is scroll horizontally and one in vertically what i want is when i click on a button i want to scroll my horizontal listview i passed a ScrollController to horizontal listview but when i press the arrow all of horizontal listview scroll not of the index.
How Can i achieve that...
here i my code...
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 10),
child: FutureBuilder<List<Catagory>>(
future: categoryList,
builder: (context, snapshot) {
if (snapshot.hasData) {
List<Catagory> model = snapshot.data!;
return ListView.builder(
itemCount: model.length,
itemBuilder: (context, index) {
List<Product> product =
model[index].products;
List<bool> scroll=List.generate(model.length, (index) => false);
return Column(
children: [
Row(
children: [
SizedBox(width: width * 0.5,
child: Text(model[index].name,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
style: const TextStyle(
color: Colors.red,
fontSize: 16,
)),
),
SizedBox(width: 30),
Expanded(
child: Container(
height: 1,
color: Colors.grey,
)),
SizedBox(width: 40),
],
),
SizedBox(
height: 10,
),
Row(
children: [
Expanded(
child: Container(
width: width,
height: 140,
child: ListView.builder(
controller: _controller ,
scrollDirection: Axis.horizontal,
itemCount: model[index].products.length,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 80,
height: 130,
padding: EdgeInsets.only(right: 5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(5),
color: primaryColor),
child: CachedNetworkImage(
imageUrl: product[index].img,
placeholder: (context, url) => const Center(
child: SizedBox(
width: 25,
height: 25,
child: CircularProgressIndicator())),
imageBuilder: (context, imageProvider) =>
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover),
),
),
errorWidget: (context, url, error) => Icon(Icons.error),
),
),
const SizedBox(height: 3,),
Text(product[index].name,
overflow: TextOverflow.fade,
maxLines: 1,
softWrap: false,
),
const SizedBox(height: 2,),
MyText(title: (product[index].salePrice != '') &&
(double.parse(product[index].salePrice) <
double.parse(product[index].regularPrice))
? product[index].salePrice
: product[index].regularPrice,
textColor: Colors.black54,
),
const SizedBox(height: 3,),
MyTextButton(
width: 55,
height: 24,
title: 'AƱadir',
fontSize: 8,
textColor: Colors.white,
backgroundColor: primaryColor,
cornerRadius: 5,
onPress: () {
Navigator.push(context, MaterialPageRoute(builder: (context) =>
ProductType(product: product[index])));
})
],
),
);
}))),
InkWell(
onTap: () {
_animateToIndex(5);
// here when i press this i want to make horizontal list of specific index to scroll
},
child: Container(
height: 140,
width: 40,
child: Icon(
Icons.arrow_forward_ios,
color: Colors.grey),
),
)
],
),
SizedBox(
height: 10,
),
],
);
});
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
return Center(child: CircularProgressIndicator());
},
)))
My Animation Code...
final ScrollController _controller = ScrollController();
final double _height = 100.0;
void _animateToIndex(int index) {
_controller.animateTo(
index * _height,
duration: Duration(seconds: 5),
curve: Curves.fastOutSlowIn,
);
}
i'm new to flutter i research too much but i didn't found any solution i have to submit this project please help me as soon as possible thanks in advance...
I am trying to remove the blinking/flashing effect after the widgets are rebuild. I read about keys, but it's not working, I added a unique key to every GridView builder element as you see in the code below.
Now when I resize, the widgets are rebuilt because the setState function is called but I can not preserve their state.
void addOutfitPlannerDialog(BuildContext context) async{
await showGeneralDialog(
barrierColor: Colors.black.withOpacity(0.5),
transitionBuilder: (context, a1, a2, widget) {
return SafeArea(
child: Transform.scale(
scale: a1.value,
child: Opacity(
opacity: a1.value,
child: AlertDialog(
actionsPadding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
contentPadding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
titlePadding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
buttonPadding: const EdgeInsets.all(0),
title: _getBackAndSaveButtons(context),
backgroundColor: Colors.white,
insetPadding: const EdgeInsets.all(0),
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return SizedBox(
width: 100.w,
height: 100.h,
child: Stack(
children: [
Positioned(
top: 0,
child:
Container(
width: 100.w,
height: 82.h,
color: const Color(0xff393432),
child: FittedBox(
fit: BoxFit.fill,
child: Container(
width: 100.w,
height: 100.h,
margin: EdgeInsets.fromLTRB(45, 10, 45, 15.h),
child: Screenshot(
controller: screenshotController,
child: Container(
color: Colors.white,
child: Stack(
children: stackChildren,
),
),
),
),
),
),
),
Positioned(
bottom: 0,
child: Container(
height: heightBottomOutfitPlanner,
decoration: const BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide( // <--- top side
color: Colors.grey,
width: 1.0,
),
),
),
width: 100.w,
child: Column(
children: [
SizedBox(
width: 100.w,
height: 8.h,
child: Row(
children: [
Expanded(
flex: 7,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: outfitPlanerOrganizerEntriesList
.length,
itemBuilder: (BuildContext context,
int index) {
return InkWell(
onTap: () {
getOutfitPlannerTabTappedImages(
outfitPlanerOrganizerEntriesList[index],
setState);
},
child: Container(
padding: const EdgeInsets.fromLTRB(
30, 0, 30, 0),
decoration: (outfitPlanerOrganizerEntriesList[index] ==
myOutfitPlannerTabTappedImages[0]
.closetOrganizer) ||
(outfitPlanerOrganizerEntriesList[index] ==
"To Buy" &&
myOutfitPlannerTabTappedImages[0]
.closetOrganizer ==
null)
? const BoxDecoration(
border: Border(
bottom: BorderSide( // <--- top side
color: Color(0xffE4BCB4),
width: 3.0,
),
),
)
: null,
child: Center(child: Text(
outfitPlanerOrganizerEntriesList[index],
style: TextStyle(
fontSize: SizerUtil
.deviceType ==
DeviceType.mobile
? 16
: 25,
))),
),
);
}
),
),
const SizedBox(width: 30),
Expanded(
flex: 1,
child: Container(
decoration: const BoxDecoration(
border: Border(
left: BorderSide( // <--- top side
color: Colors.black,
width: 1.0,
),
),
),
child: GestureDetector(
onPanStart: (details) =>
_handleDrag(details, setState),
onPanUpdate: (details) =>
_handleUpdate(details, setState),
child: Icon(Icons.drag_indicator,
size: SizerUtil.deviceType ==
DeviceType.mobile ? 35 : 45,
),
)
),
),
],
),
),
const SizedBox(height: 5),
!isLoadingOutfitPlannerTabTappedImages ? Container(
width: 100.w,
margin: const EdgeInsets.fromLTRB(5, 0, 5, 0),
height: heightBottomOutfitPlanner - 10.h,
child: GridView.builder(
physics: const ScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 5,
mainAxisSpacing: 5,
maxCrossAxisExtent: SizeConfig.screenWidth! /
4,),
itemCount: myOutfitPlannerTabTappedImages
.length,
itemBuilder: (BuildContext ctx, index) {
return InkWell(
key: Key(index.toString()),
onTap: () {
try {
removeBackground(ctx, setState, CleverCloset.dataFromBase64String(myOutfitPlannerTabTappedImages[index].getImage!));
}
catch (e) {
stackChildren.add(MoveableStackItem(CleverCloset.imageFromBase64String(myOutfitPlannerTabTappedImages[index].getImage!).image));
}
},
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20))
),
width: SizeConfig.screenWidth! / 4,
height: SizeConfig.screenWidth! / 4,
child: FittedBox(
child:
FadeInImage(
placeholder: const AssetImage(
'assets/placeholder.gif'),
image: CleverCloset
.imageFromBase64String(
myOutfitPlannerTabTappedImages[index]
.getImage!)
.image,
fit: BoxFit.fill,
),
fit: BoxFit.fill,
),
),
);
}
),
) : Container(),
],
),
),
),
],
),
);
}
)
),
),
),
);
},
transitionDuration: const Duration(milliseconds: 100),
barrierDismissible: false,
barrierLabel: '',
context: context,
pageBuilder: (context, animation1, animation2) {return Container();}
);
}
You can add the below logic to your code. It basically gets executed when the widget has build.
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) => function(context));
}
And now you can implement the function(context) to do what you need to do after the build.
I leave the entire code fragment, the main idea is to have a textfield that, by using the keyboard, shows me a series of elements, in the description variable, I have that element to select, this works well, the only issue is, how to keep my alertdialog with all the correct notes.
return await Get.generalDialog(
barrierLabel: "Barrier",
barrierDismissible: false,
transitionBuilder: (context, a1, a2, widget) {
return StatefulBuilder(builder: (context, setState) {
return Transform.scale(
scale: a1.value,
child: Opacity(
opacity: a1.value,
child: Dialog(
insetAnimationCurve: Curves.bounceOut,
insetPadding: EdgeInsets.only(right: 20, left: 20),
//backgroundColor: colorFour(),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: SingleChildScrollView(
child: Container(
height: 340,
child: Column(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
height: 50,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
padding: EdgeInsets.all(5),
child: Center(
child: Text(
title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600),
maxLines: 2,
textAlign: TextAlign.center,
),
),
),
SingleChildScrollView(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.only(top: 10),
child: TextFormField(
controller: controller,
decoration: InputDecoration(
border: OutlineInputBorder(
gapPadding: 5.0)),
keyboardType: TextInputType.text,
maxLines: 1,
onChanged: (String cadena) async {
listado = pivote
.where((x) => x.descripcion
.split("/")[value]
.toLowerCase()
.contains(
cadena.toLowerCase()))
.toList();
setState(() {});
},
),
),
Container(
height: 200,
margin: EdgeInsets.only(
top: 10, bottom: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5)),
border: Border.all(
color: Colors.grey, width: 1)),
child: ListView.builder(
padding: const EdgeInsets.all(0.0),
physics: BouncingScrollPhysics(),
itemCount: listado.length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Container(
height: 34,
child: InkWell(
child: SizedBox.expand(
child: Align(
alignment:
Alignment.centerLeft,
child: Padding(
padding:
EdgeInsets.only(
right: 5,
left: 5),
child: Text(
listado[index]
.descripcion
.split(
"/")[value],
textAlign:
TextAlign.left),
),
),
),
onTap: () {
Get.back(result: {
"item": listado[index],
});
}),
);
}),
),
],
)),
],
),
),
),
),
));
});
},
pageBuilder: (context, animation1, animation2) {
return Container();
});
I need to overlay my alertdialog, that is to say that the size does not break my design, this happens after focusing on the textfield
Show us some code to help you out.
In any case, it might make sense to wrap the layout in a SingleChildScrollView.
Here is a very good explanation.
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
yourAlertDialog(
context: context,
builder: (BuildContext context) {
return SingleChildScrollView(child: yourchild);
},
);
Your layout should be wrapped in Scrollview , I didn't replicate or run this code but it should be like this:
AlertDialog(
title: Text("title", style: TextStyle(color: ThemeColors.colorPrimary),),
content: Container(
width: double.maxFinite,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: StatefulBuilder(builder: (BuildContext context1, StateSetter setState) {
this.setState = setState;
return Container(
height: 340,
child: Column(
children: <Widget>[
//your container
],
),
),
}),
)),
);
this is the first page
return StreamProvider<List<User>>.value(
value: DatabaseServ().usersData,
child: Profiledata(),
);
this is the second page
final users = Provider.of<List<User>>(context);
return Scaffold(
appBar: AppBar(),
body: ListView.builder(
itemCount: users.length,
itemBuilder: (context, index) {
return ProfileDatau(
user: users[index],
);
},
),
);
this the third page and it's to show the data of user
final AuthService _auth = AuthService();
final User user;
ProfileDatau({this.user});
#override
Widget build(BuildContext context) {
return Card(
child: Column(
children: <Widget>[
// this container for icon of the profile
Container(
// this for the icon to change the image
child: Container(
margin: EdgeInsets.fromLTRB(100, 110, 20, 10),
width: 50,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.grey[500],
),
child: FlatButton(
padding: EdgeInsets.all(0),
onPressed: () {
print('to change image');
},
child: Icon(
Icons.add,
),
),
),
// this is for the image it self
margin: EdgeInsets.fromLTRB(130, 35, 130, 35),
width: 200,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage('images/angel.png'),
fit: BoxFit.fill,
),
),
),
// this container for the filed under the image like name , information etc..
FlatButton(
padding: EdgeInsets.all(0),
child: Container(
height: 50,
width: 400,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[400]),
margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Center(
child: Text(
user.name,
style: TextStyle(),
),
),
),
onPressed: () {
print('pressed');
},
),
Container(
height: 50,
width: 400,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[400]),
margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Center(
child: Text(
'hello there',
style: TextStyle(),
),
),
),
Container(
height: 50,
width: 400,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[400]),
margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Center(
child: Text(
'hello there',
style: TextStyle(),
),
),
),
Container(
child: FlatButton(
onPressed: () async {
await _auth.signOut();
},
child: Icon(Icons.highlight_off),
),
)
],
),
);
}
}
the problem is when i navigate to the first page it show me red page then shows me the data normally
and it gives me this error .
The following NoSuchMethodError was thrown building Profiledata(dirty, dependencies: [_InheritedProviderScope<List>], state: _ProfiledataState#ed00b):
The getter 'length' was called on null.
Receiver: null
Tried calling: length
Sometimes it takes time to fetch data. Change your second page code like below
final users = Provider.of<List<User>>(context);
return Scaffold(
appBar: AppBar(),
body: (users.length > 0) ? ListView.builder(
itemCount: users.length,
itemBuilder: (context, index) {
return ProfileDatau(
user: users[index],
);
},
) : CircularProgressIndicator();
);