Card inside a card - flutter

Question

Creating an app in Flutter for a local resturant/pub/bistro and I want to display a card above all other cards in the menu to show temporary messages/deals. My implementation relies on a menu_screen and a "handler" of sorts (not fully developed mind you).
But there's two problems
It displays as a card within a card
the information is displayed twice when it should only be shown once at the top of the screen
Here's what it looks like when run on a device for testing:
Pastebin for menu_screen: enter link description here
// sets up the menu screen for our program
// imports
import 'package:flutter/material.dart';
import 'package:elehouseapp/handlers/food_menu_handler.dart';
// set up class
class Menus extends StatelessWidget{
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: TabBar(
labelColor: Colors.black,
indicatorColor: Colors.black,
tabs: <Widget>[
Tab(
text: 'Food',
),
Tab(
text: 'Drink',
),
]
),
body: TabBarView(
children: <Widget>[
FoodHandler(),
//Text("Food"),
Text("Drink"),
],
),
),
);
}
}
Pastebin for food_menu_handler: enter link description here
import 'package:flutter/material.dart';
// Generates an 2D array of food items and places elements into cards
// Some data
final items = ['test','test2'];
final desc = ["Loreum Isplum","Other Test"];
final price = [2.20,20.00];
// Handles array data and puts into cards
class FoodHandler extends StatelessWidget{
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index){
return Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Visibility(
visible: true,
child: Card(
child: ListTile(
title: Text("COVID-19"),
subtitle: Text("Menu restrictions are in place"),
),
)
),
ListTile(
title: Text(items[index]),
subtitle: Text(desc[index]+"\n£"+price[index].toString()),
),
ButtonBar(
children: <Widget>[
FlatButton(
child: Text("Add to Basket"),
onPressed: null,
),
],
),
],
),
);
}
);
}
}
EDIT I've un-nested the card (as pointed out). Hopefully this may explain what I have with explanations of what I'm trying to do

Answer 1

You could change the ListView.builder in a normal ListView and generate the list of its children using conditions and loops inside the list as follow:
// Generates an 2D array of food items and places elements into cards
// Some data
final items = ['test', 'test2'];
final desc = ["Loreum Isplum", "Other Test"];
final price = [2.20, 20.00];
// Handles array data and puts into cards
class FoodHandler extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView(
children: [
if (1 == 1) // TODO your condition here
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Card(
child: ListTile(
title: Text("COVID-19"),
subtitle: Text("Menu restrictions are in place"),
),
),
],
),
),
for (int index = 0; index < items.length; index++)
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
title: Text(items[index]),
subtitle: Text(desc[index] + "\n£" + price[index].toString()),
),
ButtonBar(
children: <Widget>[
FlatButton(
child: Text("Add to Basket"),
onPressed: null,
),
],
),
],
),
),
],
);
}
}
I marked with a TODO the line where you have to insert the condition for the first "alert".
Also I suggest you to use a class to represent the list items instead of having three different lists and "joining" them with the index, it's a more convenient and elegant solution