I have an layout with dummy data
body: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 15.0),
width: MediaQuery.of(context).size.width - 30.0,
height: MediaQuery.of(context).size.height - 50.0,
child: GridView.count(
crossAxisCount: 2,
primary: false,
crossAxisSpacing: 10.0,
mainAxisSpacing: 15.0,
childAspectRatio: 0.8,
children: <Widget>[
_buildCard('Cookie mint', '\Rp.3.99',
'assets/cookiemint.jpg', false, false, context),
_buildCard('Cookie cream', '\Rp.25.500',
'assets/cookiecream.jpg', true, false, context),
_buildCard('Cookie classic', '\Rp.35.000',
'assets/cookieclassic.jpg', false, true, context),
_buildCard('Cookie choco', '\Rp.51.500',
'assets/cookiechoco.jpg', false, false, context),
],
),
)
],
),
Result
But when I use real data from firestore, my layout is broken. I use ListView.builder to loop this data
body: ListView(
children: <Widget>[
Container(
padding: EdgeInsets.only(right: 15.0),
width: MediaQuery.of(context).size.width - 30.0,
height: MediaQuery.of(context).size.height - 50.0,
child: GridView.count(
crossAxisCount: 2,
primary: false,
crossAxisSpacing: 10.0,
mainAxisSpacing: 15.0,
childAspectRatio: 0.8,
children: <Widget>[
ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) => _buildCardItem(
context,
snapshot.data.documents[index],
false,
'assets/burger.jpg',
false,
),
)
],
),
)
],
),
And result is
I think maybe ListView.builder create a new layout inside my layout? I new with Flutter. Is there a way to repeat the data in another way besides using ListView.builder? Or still have to use it in what way? Need advice. Thanks
Where you have:
children: <Widget>[
ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) => _buildCardItem(
context,
snapshot.data.documents[index],
false,
'assets/burger.jpg',
false,
),
)
]
You have to place a list of widgets. On your attempt, you have put a listView which is a single widget that represents a list of scrollable itens. They are different.
Your itens are based on the snapshot.data.documents list. You can use it with a .map function to create another widget list based on that:
children: snapshot.data.documents.map(
(item) => _buildCardItem(
context,
item,
false,
'assets/burger.jpg',
false,
)
).toList(),
What is the purpose of the outer most ListView you have 3 scrollable widgets nested together this doesn't seem necessary to me and a lot of people have been having issues with ListView firestore and StreamBuilder if its not adding anything I'd try removing it.
snapshot.data.documents.map((DocumentSnapshot document) => document.data['//Youlabels']);
After browsing, I fixed with my sample code
children: snapshot.data.documents.map<Widget>((document) {
return ListTile(
title: Text(document['item_name']),
subtitle: Text(document['item_price']),
);
}).toList(),
Related
So I'm trying to implement a flex listview similar to the google FlexLayoutManager to the horizontal axis with wrap, you can see an example in the wrap section
https://github.com/google/flexbox-layout/raw/main/assets/flex-wrap.gif
here is my code:
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: categories.length,
padding: EdgeInsetsDirectional.only(start: 16, end: 12),
itemBuilder: (context, index) {
return InkWell(
onTap: (){
},
child: Container(
height: 24,
alignment: Alignment.center,
child: Text(
categories[index].name,
),
),
);
},
)
what I have to add to my listview to make the items wrap and move to the next row if they exceeded the screen width?
Not tested, but as I indicated in my comment, I'd use something like:
Wrap(
children: [
for (final c in categories)
InkWell(child: Text(c.name)),
]);
adding of course all your parameters, and the extra container.
As an alternative, you can use a GridView.builder instead of ListView.builder:
Creates a scrollable, 2D array of widgets that are created on demand.
result:
I have made my window very small and the children still wrap:
With the window maximized:
code:
GridView.builder(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20),
itemCount: _categories.length,
padding: EdgeInsetsDirectional.only(start: 16, end: 12),
itemBuilder: (context, index) {
return InkWell(
onTap: () {},
child: Container(
height: 24,
alignment: Alignment.center,
child: Text(
categories[index].name,
),
),
);
},
)
I was tryiing to use double row in a single Listview which should scroll together in a single ListView Widget when i added double rows in a column inside the listview wigdget I combine both rows instead of creating a new row. Image is attached.Marked Section
You can use GridView instead, Here is the sample code
Container(
height: 150,
width: MediaQuery.of(context).size.width,
child: GridView.builder(
itemCount: 20,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
childAspectRatio: 1,
),
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.ac_unit),
Text('data $index'),
],
),
);
},
),
);
I'm building my first Flutter app and I have some performance issues.
I have a screen with a CustomScrollView, to especially get a custom AppBar, with a Hero image. Next, I have some fields/filters and then I have my GridView.builder because I can have between 25 to 400 elements in this list, and I want to build them only when the user is scrolling.
But after checking, I saw that all of my elements (400) are built immediately, and makes the app very laggy.
Can you please tell me what I've done wrong?
EDIT: You can test it via this Pastebin: Just simply copy-paste it into a new flutter project https://pastebin.com/xhd9CdUp
Basically, this is the structure of my code:
CustomScrollView
SliverAppBar
SliverPadding
SliverChildListDelegate
SearchField
SizedBox
ValueListenableBuilder // hive package
GridView.builder
CardWithMenuWidget(index)
And here is my code:
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
body: SafeArea(
child: LayoutBuilder(builder: (context, constraints) {
return CustomScrollView(
slivers: [
SliverAppBar(
elevation: 0,
backgroundColor: Colors.transparent,
expandedHeight: 300,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.symmetric(vertical: 4),
title: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: constraints.maxWidth * 0.5),
child: Hero(
tag: "extension-logo-${extension.uuid}",
child: CachedImage(imageUrl: extension.logoMediumUrl!),
),
),
background: Align(
alignment: Alignment.topCenter,
child: Hero(
tag: "extension-spotlight-${extension.uuid}",
child: CachedImage(
imageUrl: extension.spotlightMediumUrl!,
fit: BoxFit.fitWidth,
height: 240,
width: double.infinity,
alignment: Alignment.topCenter,
),
),
),
),
),
SliverPadding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
sliver: SliverList(
delegate: SliverChildListDelegate(
[
SearchField(
controller: this._searchController,
labelText: "Search into ${extension.name}",
cancelText: 'Cancel',
),
SizedBox(height: 32),
// Dynamic item list
ValueListenableBuilder(
valueListenable:
ExtensionBox.box.listenable(keys: [_uuid]),
builder: (context, Box<Extension> box, child) {
var cardUuidList = box.get(_uuid)!.cards?.keys;
return _buildCardListGrid(cardUuidList);
},
),
FakeBottomBarPadding(),
],
),
),
),
],
);
}),
),
);
}
Widget _buildCardListGrid(cardUuidList) {
return LoadingContainer(
isLoading: _isSyncing,
child: cardUuidList == null
? Center(
child: Text('No data.'),
)
: GridView.builder(
addAutomaticKeepAlives: true,
shrinkWrap: true,
physics: ScrollPhysics(),
itemCount: cardUuidList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 16.0,
crossAxisSpacing: 16.0,
childAspectRatio: CardModel.ratio,
),
itemBuilder: (context, cardIndex) {
String cardUuid = cardUuidList.elementAt(cardIndex);
return CardWithMenuWidget(
uuid: cardUuid,
);
},
),
);
}
Thank you!
My solution, based on my pastebin code:
CustomScrollView(
SliverAppBar(),
...
ValueListenableBuilder(
valueListenable: _list,
builder: (context, listBuilder, child) {
return SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 16.0,
crossAxisSpacing: 16.0,
childAspectRatio: 635 / 889,
),
delegate: SliverChildBuilderDelegate(
(c, i) {
return ItemWidget(listBuilder[i]);
},
childCount: _list.value.length,
),
);
},
),
)
I cannot figure out how to create a Scrolling Wrap Widget inside my app that displays a number of items over 2 lines and is scrollable Horizontally to reveal the lines content:
return
SafeArea(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Wrap(
direction: Axis.horizontal,
runAlignment: WrapAlignment.center,
children:[
for (var i=0;i<10;i++) Card(
elevation: 6,
color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(title,),
),
),
]
),
),
);
The result for this is :
I tired to wrap the Wrap with a Container with fixed height and every other combination imaginable and have not found a way to do this correctly, Basically I want to achieve a grid like functionality where the children are not all constrained to a fixed sized cell but are maintaining their variable width .
Expected result as requested would be a scroll-able list that looks like this:
This Answer Will Help You.
List<String> list = ['Long text', 'Even longer text', 'Long text', 'Even longer text', 'Text', 'Text', 'Short text', 'Text', 'Short text', 'Long text', 'Even longer text'];
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 50,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (context, index) {
return index.isEven ? CardWidget(list[index]) : Container();
},
),
),
SizedBox(
height: 50,
child: ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: list.length,
itemBuilder: (context, index) {
return index.isOdd ? CardWidget(list[index]) : Container();
},
),
)
],
),
)
I refer from this solution.
Output like this
I was have similar problem and I fixed with constrained box. And can you try this;
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.25,
maxWidth: MediaQuery.of(context).size.width * 1.5,
),
child: Wrap(
direction: Axis.horizontal,
crossAxisAlignment: WrapCrossAlignment.end,
alignment: WrapAlignment.start,
spacing: 10,
runSpacing: 2,
children: List.generate(
myList.length,
(index) {
return ChoiceChip(
onSelected: (bool isSelected) {
//when selected it works code
},
label: SizedBox(
height: 20,
child: Text(name),
),
selected: false);
},
).toList(),
),
),
);
I can't scroll to see my lower grid view. Why is that? What should I change to make this work? Please help!!!
Thank you in advance.
Scaffold(
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Text('GridView 1'),
GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
children: List.generate(
9,
(index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
);
},
),
),
Text('GridView 2'),
GridView.builder(
itemCount: list_item.length,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
// width: 150,
// height: 150,
);
},
),
],
),
),
),
);
Thank you for helping me in flutter.
It actually does work, just not the way you need it.
The problem is that GridView itself is a scrollable widget too. So when you try to scroll the page, it actually tries to scroll those GridViews and not the SingleChildScrollView.
To disable GridView scrolling ability - you need to add one more parameter.
GridView.count(
physics: NeverScrollableScrollPhysics(),
...
),
Try this:
Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[]
multiple gridview scrollable
Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('GridView 1'),
Container(
height: 400,
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
primary: false,
children: List.generate(
20,
(index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
);
},
),
),
),
Text('GridView 2'),
Container(
height: 400,
child: GridView.builder(
itemCount: 20,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (BuildContext context, int index) {
return TouchableImageCard(
imagePath: 'assets/images/view_${index + 1}.jpg',
// width: 150,
// height: 150,
);
},
),
),
],
),
),
);