List builder : how to make the first element different? - flutter

Question

I am building a list (dynamically, throught the result of an HTTP request to an API) but I want to add a 'add' card first, before the others elements.
Like this :
I'm building this with a builder
But the way I do it is not good, there's a problem.
Here, account.trips is a list of Trip object and AddNewTrip is the 'add' card.
Because of my if, the first element of the list is always not displayed
So, is there another way to put my 'add' card as the first element of the list, without hiding one element ?
return Builder(
builder: (BuildContext context) {
if (account.trips.indexOf(i) == 0) {
return new AddNewTrip(account);
}
return Padding(
padding: const EdgeInsets.only(
top: 20.0, bottom: 40.0, left: 5.0, right: 5.0),
child: Stack(
...
EDIT : here is the full code :
Expanded(
child: ScopedModelDescendant<Account>(
builder: (context, child, _account){
print(_account.profile);
return new CarouselSlider(
enableInfiniteScroll: false,
enlargeCenterPage: true,
height: MediaQuery.of(context).size.height,
initialPage: 1,
items: itemBuilder(_account)
);
},
),
)
List<Widget> itemBuilder(Account account) {
if (account.trips != null)
return account.trips.map((i) {
return Builder(
builder: (BuildContext context) {
if (account.trips.indexOf(i) == 0) {
return new AddNewTrip(account);
}
return Padding(
padding: const EdgeInsets.only(
top: 20.0, bottom: 40.0, left: 5.0, right: 5.0),
child: Stack(
children: <Widget>[
Hero(
tag: i.id,
child: Material(
type: MaterialType.transparency,
child: InkWell(
child: Container(
height: 200,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: cardImage(i.imageUrl),
),
borderRadius: BorderRadius.circular(20.0),
onTap: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) {
return TripDetails(i);
}));
},
),
),
),
Positioned(
width: MediaQuery.of(context).size.width * 0.7,
height: MediaQuery.of(context).size.height * 0.48,
top: MediaQuery.of(context).size.height * 0.2,
left: MediaQuery.of(context).size.width * 0.035,
child: Hero(
tag: i.id + 'container', //should be an ID
child: Material(
type: MaterialType.transparency,
child: Container(
decoration: cardDecoration,
child: new TripContent(i, true),
),
),
),
)
],
),
);
},
);
}).toList();
else
return [
new AddNewTrip(account)
];
}

Answer 1

The previous answers already provide a good general advice on how to do this.
For your specific example you would have to do something like this:
When looping over your accounts, prepend the result with your "Add" card like this:
List<Widget> itemBuilder(Account account) {
return [
new AddNewTrip(account),
...(account.trips?.map((i) {/** same as before without your index check **/}) ?? []),
];
}

Answer 2

return account.trips.map((i) {
change to:
return [[null], account.trips].expand((x) => x).toList().map((i) {

Answer 3

how about this you build the card first then build rest of your list..
List<Widget> itemBuilder(Account account) {
return [
AddNewTrip(account),
if (account.trips != null)
return account.trips.map((i) {
return Builder(
builder: (BuildContext context) {
return Padding(
//rest of your code
);
});
);
}];}

Answer 4

You can add a dummy list item in your list at 0th index and later you can perform your logic.
Below is sample code can help you out:
var list = ["1","3","4"];
list.insert(0,"5");
Output:5 1 3 4