Use a List of an async function in another class - firebase

Question

I’m basically creating a slideshow that contains texts from a list resulting from an async function.
This is the class that contains the homepage, async function and slideshow :
class HomePage extends StatefulWidget {
HomePage({Key key, this.auth, this.userId, this.logoutCallback, this.profile})
: super(key: key);
final Auth auth;
final VoidCallback logoutCallback;
final String userId;
final ProfilePage profile;
#override
State<StatefulWidget> createState() => new _HomePageState();
}
class HomePage extends StatefulWidget {
HomePage({Key key, this.auth, this.userId, this.logoutCallback, this.profile})
: super(key: key);
final Auth auth;
final VoidCallback logoutCallback;
final String userId;
final ProfilePage profile;
#override
State<StatefulWidget> createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
void initState() {
super.initState();
asyncMethod();
}
void asyncMethod() async {
await getMission1();
....
}
...
List<String> MissionData1 = [];
...
Future<void> getMission1() async{
DocumentSnapshot snap = await widget.auth.MissionRetriever1();
Map<String,dynamic> data = snap.data();
setState(() {
MissionData1.add(data['Q_Category']);
MissionData1.add(data['Q_Name']);
MissionData1.add(data['Q_Description']);
MissionData1.add(data['Q_Score']);
MissionData1.add(data['Q_Target']);
)};
...
Widget showTaskSlider() {
return new Column(
children:<Widget>[
CarouselSlider(options: CarouselOptions(height: 30.0.h, autoPlay: true, autoPlayInterval: Duration(seconds: 3), autoPlayAnimationDuration: Duration(milliseconds: 800), autoPlayCurve: Curves.fastOutSlowIn, aspectRatio: 2.0,
onPageChanged: (index, reason){setState(() {
_currentIndex= index;
});},
),
items: cardList.map((card){
return Builder(builder:(BuildContext context){
return Container(height: MediaQuery.of(context).size.height*0.30, width: MediaQuery.of(context).size.width,
child: Card(color:Colors.blueAccent, child: card,),
);
}
);
}).toList()
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(cardList, (index, url) {
return Container(
width: 3.0.w,
height: 5.0.h,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _currentIndex == index ? Colors.blueAccent : Colors.grey,
),
);
}),
),
],
);
}
}
and this is one of the classes of the slide
class Item1 extends StatelessWidget {
const Item1({Key key, this.homepage}) : super(key: key);
final _HomePageState homepage;
#override
Widget build(BuildContext context) {
return Container(
decoration: new BoxDecoration(image: DecorationImage(image: AssetImage("assets/illustrations/ill_1.jpeg"), fit: BoxFit.cover,),),
child: Column(
children: <Widget>[
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Row(children:[Image(image:AssetImage("assets/images/leaf.png"),width: 8.0.w,),Text(homepage.MissionData1 == null ? "Loading" : homepage.MissionData1[1], style:TextStyle(fontWeight: FontWeight.w500, fontFamily: 'Roboto',color: const Color(0xFFFFFFFF), fontSize: 15.0.sp),)]),Container(height: 20.0.h),Row(children: [Text("Dio Porco", style:TextStyle(fontWeight: FontWeight.w500, fontFamily: 'Roboto',color: const Color(0xFFFFFFFF), fontSize: 25.0.sp),)])],)), ]),
);
}
}
But when I start debugging it gives me this error
The following NoSuchMethodError was thrown building Item1(dirty):
The getter 'MissionData1' was called on null.
Receiver: null
Tried calling: MissionData1