The instance member 'posts' can't be accessed in an initializer - flutter

Question

I would like to load other REST CALL which callS other data from DB.
I would like to use bottom navigation bar.
When I coded without bottom navigation bar, the app worked.
But When I inserted bottom navigation bar, "posts" function(related to REST CALL) has an error.
itemCount: posts == null ? 0 : posts.length,
itemBuilder: (context, index) {
Post post = posts[index];
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'Services.dart';
import 'Post.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter ListView'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late List<Post> posts;
late bool loading;
#override
void initState() {
super.initState();
loading = true;
Services.getPosts().then((list) {
super.setState(() {
posts = list;
loading = false;
});
});
}
#override
int _selectedIndex = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(loading ? 'Loading...' : 'Posts'),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.white.withOpacity(.60),
selectedFontSize: 14,
unselectedFontSize: 14,
currentIndex: _selectedIndex,
//현재 선택된 Index
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
items: [
BottomNavigationBarItem(
title: Text('Favorites'),
icon: Icon(Icons.favorite),
),
BottomNavigationBarItem(
title: Text('Music'),
icon: Icon(Icons.music_note),
),
BottomNavigationBarItem(
title: Text('Places'),
icon: Icon(Icons.location_on),
),
BottomNavigationBarItem(
title: Text('News'),
icon: Icon(Icons.library_books),
),
],
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
);
}
List _widgetOptions = [
Column(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// crossAxisAlignment:CrossAxisAlignment.center,
children: [
Container(
color: Colors.amber,
child: Row(
children: const [
Expanded(
child: Center(
child: Text('Date',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('Koreanwon/us\$',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('Koreanwon',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('US \$',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
],
),
),
Expanded(
child: Center(
child: Container(
child: ListView.builder(
itemCount: posts == null ? 0 : posts.length,
itemBuilder: (context, index) {
Post post = posts[index];
return Container(
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.blueAccent)),
),
child: ListTile(
title: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Center(child: Text(post.date))),
Expanded(child: Center(child: Text(post.rate))),
Expanded(
child: Center(child: Text(post.koreanwon))),
Expanded(child: Center(child: Text(post.dollar))),
],
),
),
// ),
);
}),
),
),
),
],
),
];
}

Answer 1

You're trying to access an instance variable (posts), in another instance variable(_widgetOptions). This is disallowed as you're trying to access something that isn't. Move the initialization into the initState.
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'Services.dart';
import 'Post.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter ListView'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late List<Post> posts;
late bool loading;
late List _widgetOptions;
#override
void initState() {
super.initState();
loading = true;
Services.getPosts().then((list) {
super.setState(() {
posts = list;
loading = false;
});
});
//You have to initialize _widgetOptions into the `initState` method.
_widgetOptions = [
Column(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// crossAxisAlignment:CrossAxisAlignment.center,
children: [
Container(
color: Colors.amber,
child: Row(
children: const [
Expanded(
child: Center(
child: Text('Date',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('Koreanwon/us\$',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('Koreanwon',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
Expanded(
child: Center(
child: Text('US \$',
style: TextStyle(
height: 2.5,
fontSize: 18,
fontWeight: FontWeight.bold,
leadingDistribution: TextLeadingDistribution.even,
)))),
],
),
),
Expanded(
child: Center(
child: Container(
child: ListView.builder(
itemCount: posts == null ? 0 : posts.length,
itemBuilder: (context, index) {
Post post = posts[index];
return Container(
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.blueAccent)),
),
child: ListTile(
title: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(child: Center(child: Text(post.date))),
Expanded(child: Center(child: Text(post.rate))),
Expanded(
child: Center(child: Text(post.koreanwon))),
Expanded(child: Center(child: Text(post.dollar))),
],
),
),
// ),
);
}),
),
),
),
],
),
];
}
#override
int _selectedIndex = 0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(loading ? 'Loading...' : 'Posts'),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.grey,
selectedItemColor: Colors.white,
unselectedItemColor: Colors.white.withOpacity(.60),
selectedFontSize: 14,
unselectedFontSize: 14,
currentIndex: _selectedIndex,
//현재 선택된 Index
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
},
items: [
BottomNavigationBarItem(
title: Text('Favorites'),
icon: Icon(Icons.favorite),
),
BottomNavigationBarItem(
title: Text('Music'),
icon: Icon(Icons.music_note),
),
BottomNavigationBarItem(
title: Text('Places'),
icon: Icon(Icons.location_on),
),
BottomNavigationBarItem(
title: Text('News'),
icon: Icon(Icons.library_books),
),
],
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
);
}
}