Widget build(BuildContext context) {
return Container(
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: data[1].store.length,
itemBuilder: (BuildContext context, int index) {
return Wrap(
children: [
Text(data[1].store[index].number.toString()),
],
);
},
),
);
}
I used ListView.builder, I want to wrap Horizontal & scroll Vertical,.
I spend a lot of time on this stack...
My data from local JSON, with Future Builder and return to ListView.builder...
please see attach..
Thanks All...
Replace your Container with the below code.
SingleChildScrollView(
child: Column(
children: [
Wrap(
children: List<Widget>.generate(
1000,
(int index) {
return Text(index.toString() + ' ');
},
),
)
],
)),
Related
In my code I use nested listview.builder with shrinkWrap: true and NeverScrollableScrollPhysics().
The problem is that the items are not loaded lazily because they are nested in a SingleChildScrollView().
However I need a way to have two (or more) listview.builder among themselves with only the full screen to be scrollable.
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildListView(list1),
buildListView(list2),
],
));
}
Widget buildListView(List list) {
return ListView.builder(
itemCount: list.length,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => ListTile(title: list[index].toString()),
);
}
You can use CustomScrollViews they are more flexible and powerful than SingleChildScrollViews. Also use Slivers instead ListViews.
CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(title: list1[index]);
},
childCount: list1.length,
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(title: list2[index]);
},
childCount: list2.length,
),
),
],
);
You can also create the same build method for Slivers:
Widget build(BuildContext) {
return CustomScrollView(
slivers: [
buildListView(list1),
buildListView(list2),
],
);
}
Widget buildListView(List list) {
return SliverList(...);
}
All items will be lazy loaded and everything will be available in a single full-screen scrollable area.
See also SliverGrid.
I am trying to build a Nested listview but getting "RenderFlex children have non-zero flex but incoming height constraints are unbounded" error with below code.
Layers are like this...
Each item of a horizontal ListView has a Text widget and a ListView widget.
At the second level, each item of vertical ListView contains again a Text widget and a ListView.
At the third level, each item of the ListView contains a Text widget.
-Horizontal ListView
- Person's Name
- ListView
- Relation Name
- ListView
- Person's Name
Thanks in advance.
person.relations is a Map<String, List<Person>>
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Relationship Explorer"),
),
body: SafeArea(
child: BlocBuilder<RelationCubit, CubitState>(
bloc: _cubit,
builder: (_, state) {
if (state is RelationSuccessState) {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (_, outerIndex) =>
_relationTreeView(context, outerIndex),
itemCount: _cubit.people.length,
);
} else {
return WaitWidget();
}
},
),
),
);
}
Widget _relationTreeView(BuildContext context, int outerIndex) {
var person = _cubit.people[outerIndex];
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(person.displayName ?? ''),
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: person.relations?.length,
itemBuilder: (_, index) {
var persons = person.relations?[index];
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(person.relations!.keys.elementAt(index)),
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
child: ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: persons.length,
itemBuilder: (_, index) {
var innerPerson = persons[index];
return Text(innerPerson.displayName ?? '');
},
),
),
)
],
);
},
),
),
),
],
);
}
Wrap the list view with a container and give a height.
I have a listview builder widget inside another list view. Inner listview listener is not firing when scrolling position reaches to its end.
initState() {
super.initState();
_scrollController.addListener(() {
if (_scrollController.position.maxScrollExtent ==
_scrollController.position.pixels) {function();}
}
Container(
child: Listview(
children: <Widget>[
Container(),
ListView.builder(
controller: _scrollController,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return Container();
},
),
]
)
)
You might have SingleChildScrollView attached before any widget :
so attach _scrollController to singleChildScrollView not listview
body: SingleChildScrollView(
controller: _scrollController,
child: Column(
children: [
_chips(),
SizedBox(
height: 10,
),
_slider(),
_showGrid(),
],
),
),
the list view must scroll otherwise it won't work. Not only you have to remove the NeverScrollableScrollPhysics() but also add that list view into some container and set its height smaller then overall height of your ListView. Then the listView begin to scroll and the function will be triggered
ScrollController _scrollController = ScrollController();
List<int> list = [1, 2, 3, 4, 5];
initState() {
super.initState();
_scrollController.addListener(() {
if (_scrollController.position.maxScrollExtent ==
_scrollController.position.pixels) {
print('firing');
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: ControlBar(
title: Text('Home'),
),
),
body: ListView(
children: <Widget>[
Container(
height: 150,
child: ListView.builder(
controller: _scrollController,
shrinkWrap: true,
itemCount: list.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text(list[index].toString()));
},
),
),
],
),
);
}
So I'm working on a tarot app and I can't figure out how to make this page scrollable.
I'm currently using the element SingleChildScrollView to wrap my elements.
Right now it scrolls down part way and then gets stuck, and it bounces back up and I can't see the rest of my screen down below.
I'm thinking I should probably use a multi child scroll view widget but not sure how to get that to work.
What I'm looking for is to be able to display a list of elements and have them scroll on the page.
I'm sure I'm doing this wrong if someone could me out that would be awesome! :) Thanks in advance for your help and advice
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: getSpread(widget.selected),
),
ListView.builder(
itemCount: widget.selected.length,
itemBuilder: (context, index) {
final int cardNumber = widget.selected[index];
final TarotCard tarotCard = tarotMaster.tarotDeck[cardNumber];
return TarotCardDetails(tarotCard: tarotCard);
},
scrollDirection: Axis.vertical,
shrinkWrap: true,
),
BottomButton(
onTap: () {
Navigator.pushNamed(context, '/home');
print(widget.selected);
},
buttonTitle: 'BACK TO HOME',
),
],
),
),
),
);
}
}
Use physics in ListView.builder() this issue happens because flutter does not know what to scroll because it found two scrollable widget. You can specify a empty ScrollPhysics so flutter will know ListView will not need to be scrolled instead the entire page which is SingleChildScrollView widget items to be scroll
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: getSpread(widget.selected),
),
ListView.builder(
physics: ScrollPhysics(),
itemCount: widget.selected.length,
itemBuilder: (context, index) {
final int cardNumber = widget.selected[index];
final TarotCard tarotCard = tarotMaster.tarotDeck[cardNumber];
return TarotCardDetails(tarotCard: tarotCard);
},
scrollDirection: Axis.vertical,
shrinkWrap: true,
),
BottomButton(
onTap: () {
Navigator.pushNamed(context, '/home');
print(widget.selected);
},
buttonTitle: 'BACK TO HOME',
),
],
),
),
),
);
}
}
Hope this will help you.
I am following https://github.com/devefy/Flutter-Story-App-UI to build some UI components but I can't seem to make the cards clickable.
The PageView builder is supposed to manipulate the currentPage value to change the page, but the PageView builder is on top of the stack and blocks all GestureDetectors under it.
I can't think of any solutions atm, any help is appreciated.
PageController cardController =
PageController(initialPage: images.length - 1);
cardController.addListener(() {
setState(() {
currentPage = cardController.page;
});
});
Stack(
children: <Widget>[
StackedCards(currentPage,postList),
Positioned.fill(
child: PageView.builder(
itemCount: images.length,
controller: cardController,
reverse: true,
itemBuilder: (context, index) {
return Container();
},
),
)
],
)
Some clickable widgets : GestureDetector, InkWell, InkResponse
GestureDetector(
onTap: ...,
child: Stack(
children: <Widget>[
StackedCards(currentPage,postList),
Positioned.fill(
child: PageView.builder(
itemCount: images.length,
controller: cardController,
reverse: true,
itemBuilder: (context, index) {
return Container();
},
),
)
],
));