카테고리 없음
16일차 과제
신승호.
2023. 2. 19. 11:08
- 다음의 URL에 데이터를 요청하여 문제를 해결합니다.
- 디바이스가 인터넷에 연결돼있는지 확인하는 패키지를 사용합니다.
- 패키지명 : connectivity_plus
- FAB을 누르면 인터넷이 연결되어있는지 확인합니다.
- 인터넷 연결을 확인중일 때 “인터넷 확인중입니다”와 로딩 위젯을 보여줍니다.
- 이 때, 로딩 위젯은 어떠한 것이든 상관없습니다.
- 화면을 아래로 당기면 데이터를 새로 요청할 수 있도록 패키지를 사용합니다.
- 패키지명 : pull_to_refresh
- 데이터를 가져올 때 사용자에게 데이터가 로딩중이라는 것을 알려줄 수 있도록 패키지를 활용합니다.
- 패키지명 : Shimmer
- 위 기능을 우선적으로 구현하며, 최대한 자연스러운 UX를 구현할 수 있도록 합니다. 그 외 과제를 위한 기능 및 디자인은 자유입니다.
dio를 모르겠다;;
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
connectivity_plus: ^3.0.3
pull_to_refresh: ^2.0.0
shimmer: ^2.0.0
flutter_spinkit: ^5.1.0
dio: ^5.0.0우선 위에 패키지들을 사용했다.
16일차에 배운 내용 이용할거같아서
네트워크를 체크안하고있을 때 ? 강아지화면 : 하고있을 때 로딩화면을 하고싶었고
그 안에 로딩중일 때 ? ShimmerBox화면 : 안하고 있을때 강아지화면을 하고싶었는데 이렇게 하는게 아닌갑다ㅋㅋ
import 'package:assigment16/ShimmerBox.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage(),
);
}
}
class MainPage extends StatefulWidget {
const MainPage({super.key});
@override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
late Future res;
var dio = Dio();
bool isLoading = false; //bool타입있어야해서 해봄
bool isNetworkCheck = false;
final RefreshController_refreshController =
RefreshController(initialRefresh: false);
Future getData() async {
var url = 'https://sfacassignment-default-rtdb.firebaseio.com/.json';
var res = await dio.get(url);
isLoading = false;
return res.data['body'];
}
@override
void initState() {
super.initState();
res = getData();
}
void checknetwork() async {
final connectivityResult = await (Connectivity().checkConnectivity());
await Future.delayed(Duration(seconds: 2));
if (connectivityResult == ConnectivityResult.mobile ||
connectivityResult == ConnectivityResult.wifi) { //모바일또는 와이파이연결됐을때
res = getData();
}
setState(() {});
}
void _onRefresh() async {
setState(() {});
await Future.delayed(Duration(milliseconds: 500));
setState(() {checknetwork()});
RefreshController_refreshController.refreshCompleted();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('16일차 과제 2번'),
),
body: isNetworkCheck
? FutureBuilder(
future: getData(),
builder: (context, snapshot) {
if(snapshot.hasdata){
return SmartRefresher(
enablePullDown: true,
controller: RefreshController_refreshController,
onRefresh: _onRefresh,
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 5,
crossAxisSpacing: 5),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return isLoading
? Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
child: Column(
children: [
Expanded(
child: Container(
width: double.infinity,
margin: EdgeInsets.all(8.0),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(16.0),
),
clipBehavior:
Clip.antiAliasWithSaveLayer,
child: Image.network(
snapshot.data[index]['url']
.toString(),
),
),
),
Text(
snapshot.data[index]['msg'].toString(),
),
Container(
alignment: Alignment.centerLeft,
margin: EdgeInsets.all(16.0),
child: Icon(
color: Colors.grey, Icons.comment),
),
],
),
)
: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
child: Column(
children: [
Expanded(child: ShimmerBox()),
SizedBox(height: 8),
ShimmerBox(),
],
),
);
}));
}})
: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('인터넷 연결 확인중입니다.'),
SpinKitThreeBounce(
color: Colors.black45,
size: 32.0,
)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
checknetwork();
},
child: Icon(Icons.wifi_find),
),
);
}
}
아래는 ShimmerBox 코드인데 pub.dev 예시보고 한거다.
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
class ShimmerBox extends StatefulWidget {
const ShimmerBox({super.key});
@override
State<ShimmerBox> createState() => _ShimmerBoxState();
}
class _ShimmerBoxState extends State<ShimmerBox> {
@override
Widget build(BuildContext context) {
return SizedBox(
width: 200.0,
height: 50.0,
child: Shimmer.fromColors(
baseColor: Colors.grey,
highlightColor: Colors.yellow,
child: Container(
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(30),
))),
);
}
결과는 : 부분을 하나씩 없애면 저렇게 한 화면씩...
플러팅 버튼누르면 페이지이동하는게 아니라서 버튼부분도 어렵다..
첨부터 다시해봐야겠다