Child already specified | Flutter container with headline and subheadline - flutter

Question

When there are no results loaded on the app, there is a headline and subheadline explaining how to work the application.
However, when results are loaded into the app the Headline and subheadline disappear, and then show the imageArray in place of both
I am unable to group the headline and subheadline together because I am following a specific UI, and thus they require different font styles, but adding them both in a separate child seems to throw an error as the child is already specified.
What's the best way to rectify this?
Container(
margin: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 0),
height: MediaQuery.of(context).size.height * .8,
child: imageArray.isEmpty
? Center(
child: Text(
‘HEADLINE’,
style: TextStyle(
fontSize: 19,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
child: Text(
‘SUBHEADLINE’,
style: TextStyle(
fontSize: 16,
fontFamily: 'Avenir',
fontWeight: FontWeight.w500,
),
),
)
: GridView.count(
crossAxisCount: 2,
children: List.generate(imageArray.length, (index) {
var img = imageArray[index];
return Container(child: Image.file(img));
})))
]),
)
]));
}
}

Answer 1

According to the official documentation:
All layout widgets have either of the following:
A child property if they take a single child—for example, Center or Container
A children property if they take a list of widgets—for example, Row, Column, ListView, or Stack.
The problem with the code is that Center only takes a single widget as its child. In order to display both of your Text, you'll need to use something such as Column with children property. This should work:
Container(
margin: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 0),
height: MediaQuery.of(context).size.height * .8,
child: imageArray.isEmpty
? Column( // Use the Column here instead of Center
children: [
Text(
'TITLE',
style: TextStyle(
fontSize: 19,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Text( // Remove the `child:` property
'SUBTITLE',
style: TextStyle(
fontSize: 16,
fontFamily: 'Avenir',
fontWeight: FontWeight.w500,
),
),
],
)
: GridView.count(
crossAxisCount: 2,
children: List.generate(
imageArray.length,
(index) {
var img = imageArray[index];
return Container(child: Image.file(img));
},
),
),
);

Answer 2

Change your Center to a Column this can take a List<Widget> called children as opposed to a singular child
Container(
margin: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 0),
height: MediaQuery.of(context).size.height * .8,
child: imageArray.isEmpty
? Column(
children: [ Text(
‘HEADLINE’,
style: TextStyle(
fontSize: 19,
fontFamily: 'Avenir',
fontWeight: FontWeight.w900,
),
),
Text(
‘SUBHEADLINE’,
style: TextStyle(
fontSize: 16,
fontFamily: 'Avenir',
fontWeight: FontWeight.w500,
),
),
]
)
: GridView.count(
crossAxisCount: 2,
children: List.generate(imageArray.length, (index) {
var img = imageArray[index];
return Container(child: Image.file(img));
})))
]),
)
]));
}
You could also add a Column to the child of your Center if you would prefer that styling.
But Column has the built in functionality to display its children where you want with mainAxisAlignment