본문 바로가기
728x90

CODE/Flutter26

[Flutter] ListView & GridView 사용하기 ListView 사용해 보기 사용해야 하는 데이터가 순차적으로 보여줘야 하는 데이터라면 일일이 하나씩 빼서 쓰기에는 너무 비효율적이다. 그렇게 이번에는 ListView를 사용하는 방법에 대해서 알아보도록 하자. ListView.builder 사용하기 ListView를 그대로 사용해도 되지만 개발하면서 많이 쓰일 것은 ListView.builder이라 생각이 듭니다. 그러해서 ListView.builder를 사용하는 방법에 대해서 간단하게 알아보겠습니다. 파일 구성하기 👉 1. main.dart 먼저 메인페이지에서 ListView를 구성해 놓은 페이지로 이동하는 코드로 시작합니다. class _ViewsetStateState extends State { @override Widget build(BuildC.. 2023. 12. 14.
[Flutter] Dialog 안에서 SetState 수행하기 Dialog 안에서 새로고침(SetState) 수행하기 대부분 어떠한 이벤트를 통해서 현재 화면에서 달라진 데이터값을 보여주려면 StatefulWidget를 사용해서 SetState를 이용해 Refresh를 했을 것이다. 그런데 개발하다 보면 Dialog 안에서 변화된 데이터 값을 보여주고 싶을 때가 있는데 SetState를 사용하면 Dialog 밖에 화면을 Refresh 해주기 때문에 변화된 값을 확인할 수 없다. 그래서 이번 포스팅은 Dialog 창안에서 데이터 값이 변화되었을때 바로 변화가 되어지는 방법에 대해 알아봅시다! 간단한 예제 만들기 파일은 main.dart, alter_dialog.dart, basic_button.dart 이렇게 세가지만 만들겠습니다. 내용은 버튼 이벤트시 다이얼로그 창.. 2023. 9. 20.
[Flutter] http를 사용하여 API 호출해보기 http 를 사용하여 API 호출해보기 초보 개발자들이라면 서버 API를 호출하는 것을 가장 많이 해보았을 것 같아서 정리해보려고 합니다. 1. http 패키지 설치하기 먼저 http 패키지를 아래의 명령어로 설치해줍니다. 설치 명령어 flutter pub add http​ http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.dev 2. Rest API 테스트 사이트 사용 REST API를 테스트 할수 있는 사이트(https://reqres.in)를 사용해서 테스트를 진행해 보겠습니다. 사이트 들어가서 Request와 Response를 확인해 볼 수 있습니다. 사용할 api는 /api/users?.. 2023. 8. 29.
Flutter VS code 개발환경 구축 Flutter - VS code 개발환경 구축 Android Studio를 설치하였다면 그대로 개발을 진행해도 좋지만 필자는 VS code로 개발하는게 편해서 사용하는 김에 개발환경 구축하는 방법에 대해서 포스팅 해보려고 합니다.🤗 💡 이때 Visual Studio Code는 설치했다는 가정하에 작성하였습니다. 1. flutter 확장 프로그램 설치 아래의 사진과 같이 확장 아이콘을 클릭해서 flutter를 검색후 설치를 해줍니다. 💬 만약 'Flutter' 확장을 설치하는 동안 오류가 발생했습니다. 로그를 확인하세요 라는 오류 문구가 뜬다면? 👉 vs code를 종료했다가 실행시키면 대부분 해결될 것입니다. 2. flutter doctor -v 명령어 수행 flutter doctor -v 명령어 flu.. 2023. 8. 24.
728x90
728x90