How can I insert an initial element into Listview.builder - flutter

Question

I want to show the defaultUserContainer() in case the stream is empty but also in case it's not, as an initial element of the list.
Currently. I can't seem to make either scenarios work. How can I design this better?
Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 16.0, top: 8.0),
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"users",
style: TextStyle(fontSize: 20.0, color: Colors.black87),
)
),
),
),
],
),
SizedBox(
height: 120,
child: FutureBuilder(
builder: (context, snapshot) {
return StreamBuilder(
stream: _firestore.collection('ts').where('userid', isEqualTo: widget.user.id).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
defaultUserContainer(); //If there's no users. tried returning it, or doing like it is here. never shows
return Text("");
} else {
return ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
DocumentSnapshot userDoc = snapshot.data.documents[index];
if(index < snapshot.data.documents.length){
return Padding(
padding: const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
child: GestureDetector(
onTap: () => {},
child: Container(
child: FittedBox(
child: Material(
color: Colors.white,
elevation: 4.0,
borderRadius: BorderRadius.circular(8.0),
shadowColor: Colors.grey,
child: Row(
children: <Widget>[
Container(
child: myDetailsContainer(userDoc), //This guy works. it's just a more complicated defaultuserContainer()
),
],
),
)
)
),
),
);
}
return ListTile(leading:defaultuserContainer()); //Doesn't show when there's users users (my goal is to always have this as an initial item)
}
);
}
},
);
},
),
)
]
);
Widget defaultUserContainer() {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Container(
height: 120,
width: 120,
color: myColors.blue,
child: Center(
child: Icon(Icons.add, size: 65, color: Colors.white),
),
),
);
}

Answer 1

You can define it as the first/last element of your ListView/GridView/Column/etc.
Here is a simple example with a GridView:
Full source code
import 'dart:math' show Random;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Random Generator',
home: RandomGeneratorPage(),
),
);
}
class RandomGeneratorPage extends HookWidget {
final int max;
final random = Random();
RandomGeneratorPage({Key key, this.max = 20}) : super(key: key);
#override
Widget build(BuildContext context) {
final numbers = useState<List<int>>([]);
return Scaffold(
appBar: AppBar(title: Text('Random Generator')),
body: GridView.count(
crossAxisCount: 5,
childAspectRatio: 1,
children: [
InkWell(
onTap: () =>
numbers.value = [...numbers.value, random.nextInt(max)],
child: Card(
color: Colors.blue.shade100,
child: Icon(Icons.add),
),
),
...numbers.value
.map(
(number) => InkWell(
onTap: () => numbers.value =
numbers.value.where((x) => x != number).toList(),
child: Card(
child: Center(child: Text(number.toString())),
),
),
)
.toList(),
],
),
);
}
}
In your case:
For your particular case, it would probably look like this: [NOT TESTED]
FutureBuilder(
builder: (context, snapshot) {
return StreamBuilder(
stream: _firestore
.collection('ts')
.where('userid', isEqualTo: widget.user.id)
.snapshots(),
builder: (context, snapshot) => ListView(
scrollDirection: Axis.horizontal,
children: [
InkWell(
onTap: () {},
child: Card(
color: Colors.blue.shade100,
child: Icon(Icons.add),
),
),
...snapshot.data.documents.map(
(doc) => Padding(
padding:
const EdgeInsets.only(bottom: 8.0, left: 8.0, right: 8.0),
child: GestureDetector(
onTap: () => {},
child: Container(
child: FittedBox(
child: Material(
color: Colors.white,
elevation: 4.0,
borderRadius: BorderRadius.circular(8.0),
shadowColor: Colors.grey,
child: Row(
children: <Widget>[
Container(
child: myDetailsContainer(
doc), //This guy works. it's just a more complicated defaultuserContainer()
),
],
),
),
),
),
),
),
)
],
),
);
},
)