Using FutureBuilder with SliverAppBar - flutter

Question

I am newbie and I am still trying to get Widgets and wrapping concept. For me it is probably hardest part of to learn Flutter.
I have Sliver AppBar and I have to get fetch some data and using FutureBuilder. Here is code
#override
Widget build(BuildContext context) => Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
backgroundColor: Colors.red,
expandedHeight: 200,
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
'https://source.unsplash.com/random?monochromatic+dark',
fit: BoxFit.cover,
),
title: Text('Flexible Title'),
centerTitle: true,
),
//title: Text('My App Bar'),
leading: Icon(Icons.arrow_back),
actions: [
Icon(Icons.settings),
SizedBox(width: 12),
],
),
],
),
);
}
so my problem is how can I integrate my FutureBuilder snippet to this code.
Here is FutureBuilder:
FutureBuilder<Article>(
future: _futureArticle,
builder: (BuildContext context, AsyncSnapshot<Article> snapshot) {
if (snapshot.hasData) {
final article = snapshot.data?.data;
any help

Answer 1

The correct wrapping:
Widget build(BuildContext context) => Scaffold(
body: FutureBuilder<Article>(
future: _futureArticle,
builder: (BuildContext context, AsyncSnapshot<Article> snapshot) {
if (snapshot.hasData) {
final article = snapshot.data?.data;
return CustomScrollView(
slivers: [
SliverAppBar(
// backgroundColor: Colors.red,
expandedHeight: 200,
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(article == null
? 'https://www.tonymacx86.com/attachments/2019-02-05-07-50-43-jpeg.385401/'
: article.imageUrl!),
title: Text('${article!.title}'),
centerTitle: true,
),
leading: const Icon(Icons.arrow_back),
actions: const [
Icon(Icons.settings),
SizedBox(width: 12),
],
),
],
);
}
return const Center(
child: CircularProgressIndicator(),
);
},
),
);
}