인스타 더보기 두번째 게시물

[Chris]

1. 인스타 더보기 응용 두번째 게시물 화면 스크롤하면 계속 게시물이 추가 됩니다. 코딩내용을 보면 정상적인 부분이긴 한거 같은대 (스크롤 포지션 맥스이면 getMore(); 함수 실행) 제가 잘못 한건지 아니면 정상적인건지 판단이 안됩니다.

2. 강의 코멘트에 유저가 get 요청한 횟수 기록하면 편리하다고 하셨는대 해야 하는 이유와 방법을 잘 모르겠습니다. get 횟수 기록하지 않아도 addData에 파라미터 추가해서 구현은 되었습니다만 제대로 구현한건지 모르겠네요.

<코드>

void main() {
runApp(MaterialApp(
title: 'Jjabstagram',
theme: style.theme,
home: MyApp(),
));
}

class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);

@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
var tab = 0;
var data = [];

getData() async {
var result = await http
.get(Uri.parse('https://codingapple1.github.io/app/data.json'));

if (result.statusCode == 200) {
var result2 = jsonDecode(result.body);

setState(() {
data = result2;
});
} else {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text(
'서버 연결이 원활하지 않습니다.',
),
duration: Duration(seconds: 5),
));
}
}

addData(a,b) {
setState(() {
data.addAll({a,b});
});
}

@override
void initState() {
// TODO: implement initState
super.initState();
getData();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Instagram'),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.add_box_outlined),
iconSize: 30,
),
],
),
body: [Home(data: data, addData: addData), Text('첫번째')]

,
bottomNavigationBar: BottomNavigationBar(
showUnselectedLabels: false,
showSelectedLabels: false,
currentIndex: tab,
onTap: (i) {
setState(() {
tab = i;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home_outlined),
activeIcon: Icon(Icons.home),
label: 'home'),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_bag_outlined),
activeIcon: Icon(Icons.shopping_bag),
label: 'shopping',
),
]),
);
}
}

class Home extends StatefulWidget {
const Home({Key? key, this.data, this.addData}) : super(key: key);

final data;
final addData;

@override
State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
var scroll = ScrollController();

getMore() async {
var result = await http
.get(Uri.parse('https://codingapple1.github.io/app/more1.json'));
var result2 = jsonDecode(result.body);
var result3 = await http
.get(Uri.parse('https://codingapple1.github.io/app/more2.json'));
var result4 = jsonDecode(result3.body);

widget.addData(result2, result4);
}

@override
void initState() {
// TODO: implement initState
super.initState();
scroll.addListener(() {
if (scroll.position.pixels == scroll.position.maxScrollExtent) {
getMore();
}

});
}

@override
Widget build(BuildContext context) {
if (widget.data.isNotEmpty) {
print(widget.data.length);
return ListView.builder(
itemCount: widget.data.length,

controller: scroll,
itemBuilder: (context, i) => Column(
children: [
Image.network(widget.data[i]['image']),
Container(
constraints: BoxConstraints(maxWidth: 600),
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('좋아요: ${widget.data[i]['likes']}'),
Text('글쓴이: ${widget.data[i]['user']}'),
Text('글내용: ${widget.data[i]['content']}'),
],
),
),
],
));
} else {
return CircularProgressIndicator();
}
}
}
 

[codingapple]

1은 정상입니다 스크롤바 체크하는 코드들은 여러번 동작합니다 

더보기 게시물이 10개나 있다면

지금 몇번 게시물을 보고있는지 어딘가에 기록해놔야 다음 게시물을 몇번째 가져올 지 아니까 유용할듯요 

[글쓴이]

글