I have to explain a bit the current structure:
news_view.dart has got FutureBuilder and fetching all necessary items from API and sending to another page Widget: customListTile3(articles, index, context)
hallo.dart has got above Widget:
Widget customListTile3(List<Datum> articles, int index, BuildContext context) {
final urlImages = [
articles[index].imageUrl!,
];
final urlImage = urlImages[index];
and
child: Column(
children: <Widget>[
Center(
child: CarouselSlider.builder(
options: CarouselOptions(height: 200),
itemCount: 10,
itemBuilder: (context, index, realIndex) {
return buildImage(urlImage, index);
},
),
bottom there is buildImage class:
child: Column(
children: <Widget>[
Center(
child: CarouselSlider.builder(
options: CarouselOptions(height: 200),
itemCount: 10,
itemBuilder: (context, index, realIndex) {
return buildImage(urlImage, index);
},
),
Slider works but it show only single image with multiple times. What is problem here?
You are only returning a single image in your function. Passing an index into a list would give you a single element at that particular index.
final urlImages = [
articles[index].imageUrl!,
];
final urlImage = urlImages; //remove [index];
I solved:
final urlImages = [
articles[0].imageUrl!,
articles[1].imageUrl!,
articles[2].imageUrl!,
articles[3].imageUrl!,
articles[4].imageUrl!,
articles[5].imageUrl!,
articles[6].imageUrl!,
articles[7].imageUrl!,
articles[8].imageUrl!,
articles[9].imageUrl!,
];
Center(
child: CarouselSlider.builder(
options: CarouselOptions(
),
itemCount: 10,
itemBuilder: (context, idx, realIndex) {
return buildImage(articles, urlImages[idx], idx, context);
},
),
),
Related
I'm creating a chat feature in flutter but noticed this behavior on IOS that doesnt shrink the list so you can see the last sent message. How can I have the listview builder shrink to show the last message when the keyboard appears?
Note: This issue doesn't happen on Android
Scaffold(
resizeToAvoidBottomInset: true,
body: Stack(
children: <Widget>[
StreamBuilder(
stream: _chats,
builder: (context, snapshot) {
if (!snapshot.hasData) return Container();
return snapshot.hasData
? GestureDetector(
onPanDown: (_) {
FocusScope.of(context).requestFocus(FocusNode());
},
child: ListView.builder(
shrinkWrap: true,
controller: _scrollController,
padding: EdgeInsets.only(top: 10, bottom: 100),
itemCount: snapshot.data.docs.length,
itemBuilder: (context, index) {
return MessageWidget(
tripId: widget.docId,
uid: snapshot.data.docs[index].data()["uid"],
messageId: snapshot.data.docs[index].id,
message: snapshot.data.docs[index].data()["message"],
sender: snapshot.data.docs[index].data()["senderName"],
sentByMe: widget.uid ==
snapshot.data.docs[index].data()["uid"],
mediaFileUrl:
snapshot.data.docs[index].data()["mediaFileUrl"],
);
}),
)
: Container();
},
);
]
)
)
I think you can try the 'reverse' property from the ListView.builder.
Tell me if this example didn't fit your needs, can you share us your code ? (I didn't see why you use a Stack and what could be the issue around that).
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
StreamBuilder<dynamic>(
builder: (context, dynamic snapshot) {
return GestureDetector(
onPanDown: (_) {
FocusScope.of(context).unfocus();
},
child: ListView.builder(
reverse: true,
shrinkWrap: true,
itemCount: 100,
padding: const EdgeInsets.only(top: 10, bottom: 10),
itemBuilder: (context, index) {
return ListTile(title: Text(index.toString()));
},
),
);
},
),
],
),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.black12,
child: const TextField(),
),
],
),
);
}
}
I currently have a StreamBuilder nested inside a SingleChildScrollView that returns a Row of widgets, which is scrollable along the horizontal axis. I want to change this to a GridView with crossAxisCount: 2, that is scrollable along the vertical axis instead. Any ideas about how to do this please?
Here's my current code:
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: StreamBuilder<QuerySnapshot> (
stream: _firestore
.collection('recipes')
.where('favouritedBy', arrayContains: widget.userEmail)
.snapshots(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.lightBlueAccent,
),
);
}
if (snapshot.data == null) {
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.lightBlueAccent,
),
);
}
final recipes = snapshot.data.documents;
List<Widget> recipeWidgets = [];
for (var recipe in recipes) {
final recipeTitle = recipe.data['recipeTitle'];
final ingredients = recipe.data['ingredients'];
final videoID = recipe.data['videoID'];
final youtubeURL = recipe.data['youtubeURL'];
final method = recipe.data['method'];
final thumbnail = recipe.data['thumbnail'];
final recipeID = recipe.data['recipeID'];
final favouritedBy = recipe.data['favouritedBy'];
final recipeWidget = FavouritesRecipeCard(
recipeTitle: recipeTitle,
videoID: videoID,
youtubeURL: youtubeURL,
recipeID: recipeID,
favouritedBy: favouritedBy,
method: method,
ingredients: ingredients,
thumbnail: thumbnail,
);
recipeWidgets.add(recipeWidget);
}
return Row(
children: recipeWidgets,
); //This is the Row I would like to change to be a GridView instead
}),
),
Problem solved! Here's the solution:
I just changed the Row to be a GridView.count widget:
return GridView.count(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 2,
crossAxisSpacing: 10.0,
mainAxisSpacing: 10.0,
children: recipeWidgets,
);
Hope this helps someone in the future!
return Row(
GridView.builder(
itemCount: snapshot.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3),
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new GridTile(
footer: new Text(snapshot.data.documentsp[index].data()[key]),
child: new Text(snapshot.data.documentsp[index].data()[key]),
),
);
},
),
);
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() + ' ');
},
),
)
],
)),
I want to change the status of checkbox via use Mobx, after the click the value have changed but not update on UI, Observer don't see change action that it is rebuilding this Widget
In file Mobx:
#observable
List<bool> statusCheckbox = List<bool>();
#computed
List<bool> get getStatusCheckBox {
return statusCheckbox;
}
#action
changeStatusItem(bool val, int index) {
statusCheckbox[index] = val;
}
In file contain Widget:
Observer(
name: 'ListHomePage',
builder: (BuildContext context) {
return child: GridView.builder(
gridDelegate:
new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: (itemWidth / itemHeight),
),
itemCount:
_userManagementStore.userAPI.users.length,
itemBuilder: (context, index) {
UserManagement user =
_userManagementStore.getUser(index: index);
return AnimationConfiguration.staggeredGrid(
position: index,
duration:
const Duration(milliseconds: 375),
columnCount: 2,
child: Container(
child: ScaleAnimation(
child: GestureDetector(
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Checkbox(
value: _userManagementStore.getStatusCheckBox[index],
onChanged: (bool val) {
_userManagementStore.changeStatusItem(val, index);
},
),
),
],
),
},
)
I can't find the root cause of the issue
As said Antoan Elenkov, you should remove the #computed property.
But you main problem is that you should not using a List but an ObservalbleList, it works like a List.
So, you have to replace
List<bool> statusCheckbox = List<bool>();
by
#observable
ObservableList<bool> statusCheckbox = ObservableList();
How can we implement Separator/Divider in SliverList. ListView.separated is handy way to create separators in list but i do not see any docs or examples about SliverList
Similar as ListView.separated
import 'dart:math' as math;
List<String> values = List();
for (int i = 1; i <= 50; i++) {
values.add(i.toString());
}
return CustomScrollView(
semanticChildCount: values.length,
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
final int itemIndex = index ~/ 2;
if (index.isEven) {
return Padding(
child: Text(values[itemIndex]),
padding: EdgeInsets.all(16));
}
return Divider(height: 0, color: Colors.grey);
},
semanticIndexCallback: (Widget widget, int localIndex) {
if (localIndex.isEven) {
return localIndex ~/ 2;
}
return null;
},
childCount: math.max(0, values.length * 2 - 1),
),
),
],
);
Simple ways,
Using SliverFillRemaining
return CustomScrollView(
slivers: <Widget>[
SliverFillRemaining(
child: ListView.separated(
itemCount:value.length,
//shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
//padding: EdgeInsets.all(0),
separatorBuilder: (BuildContext context, int index){
return Divider();
},
itemBuilder: (BuildContext context, int index) {
//widget return
})
),
Using SliverList
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Column(
children: <Widget>[
SizedBox(height: 5),
//your main widget is here
SizedBox(height: 5),
Divider(height: 1)
],
);
},
childCount: model.length,
),
)
Although this question is very old, I will add my answer for future readers.
You simply wrap your widget with a Container and then you give the container a bottom border. Here is an example:
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.grey.shade300, width: 0.5))),
child: YourWidget(),
),
If you are wondering how to show Divider but not show on the last item. Try this.
Wrap your widget into Column then give a conditional for building Divider. The Divider Widget will show except on the last index. Example:
CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(_, int index) {
return Column(
children: <Widget>[
// Put your widget here
YourWidget(),
// This divider will not appears on last index
if(index != (item.length - 1))
const Divider(),
],
);
},
childCount: item.length,
),
),
],
),
You can use the Divider() Widget.
Here you can find the documentation.