728x90
반응형

Flutter 19

[Flutter] Future 를 사용한 Http 통신, ScrollController 를 사용한 최상단/최하단 강제 스크롤

Future 란? 지금은 없지만 미래에 작업이 수행되어 결과를 나타낼 것이라는 상태를 나타냄. future 는 비동기 작업의 결과를 나타내며 미완료(데이터 value를 생성하기 전) 또는 완료(데이터 value 생성)의 두 가지 상태를 가질 수 있다. 미완료 : 비동기 함수를 호출하면 데이터 value 가 생성되기 전인 완료되지 않은 미래가 반환된다. future 는 비동기 함수의 작업이 완료되거나 오류가 발생하기를 기다리고 있다. 완료 : 비동기 작업이 성공하면 future 를 데이터 value 로 반환한다. 작성한 파일 목록 입니다. 1. pubspec.yaml 2. HttpService.dart 3. FutureScrollPage.dart 1. pubspec.yaml http 통신을 사용하려면 일단..

📘 Flutter 2021.08.10

[Flutter] 다양한 위젯(Widget) 사용하기 - Dialog, DatePicker, TimePicker, SnackBar, GestureDetector, InkWell

안녕하세용! Flutter 에서 Dialog, DatePicker, TimePicker, SnackBar 를 사용하여 화면에 띄워주는 방법과 터치 이벤트를 구현할 때 사용하는 GestureDetector / InkWell 위젯을 사용하는 방법 입니다. Dialog, DatePicker, TimePicker, SnackBar 는 TextButton 위젯을 통해 클릭 시 해당 창을 띄워줬습니당! 1. ShowPopPage.dart ShowPopPage.dart 파일을 만들어 구현해 주었습니당. 전체 소스입니당 😬 import 'package:flutter/material.dart'; import 'package:flutter_application_1/MainPage.dart'; import 'package:..

📘 Flutter 2021.07.17

[Flutter] TextField 사용하기

안녕하세요! 텍스트를 입력하는 위젯 TextField 에 관해 포스팅해볼게요~ 안드로이드 에서는 EditText, javaScript 에서는 input 태그 등이 있는데요~ Flutter 에서는 TextField 위젯을 사용해서 사용자가 텍스트를 입력하는 창을 만든다고 하네요 @_@ 1. TextFieldPage.dart TextField(...) 위젯의 onSubmitted 호출 시 sendMsg() 메소드를 통해 Toast 를 띄워주도록 하였고, onChanged 호출 시 checkText() 메소드를 통해 하단 _changedTextWidget 영역에 입력한 텍스트가 바로 보여지도록 구현하였습니다. TextField( controller: _textController, onSubmitted: sen..

📘 Flutter 2021.07.07

[Flutter] 탭바(TabBar) 사용하기

안녕하세요! Flutter 를 하고 있는 요즘~ 포스팅 열심히 해야되는데 쉽지가 않네용 ㅠ_ㅜ Flutter 로 탭메뉴 인 탭바 TabBar 를 만들어 보았습니다! 안드로이드 java 소스로 TabLayout 을 만든 포스팅이 있었는데요! 그건 아래를 확인해 주세요 ~ https://eunoia3jy.tistory.com/54?category=1011678 [안드로이드/Android] TabLayout 과 ViewPager 를 이용한 탭 Tab 메뉴 화면 TabLayout 과 ViewPager 를 이용한 탭 메뉴 화면 을 구현하는 소스코드에 대해 포스팅 해 보겠습니다~ TabLayout : Tab 메뉴들을 담은 큰 틀의 레이아웃 ViewPager : 화면을 양옆으로 넘겨서 Page 를 바꾸는 슬 euno..

📘 Flutter 2021.07.06

[Flutter] CarouselSlider

안녕하세요! 이번엔 캐로셀(CarouselSlider) 위젯 인데요! CarouselSlider 위젯 이번엔 캐로셀(CarouselSlider) 위젯 인데요! 저번에 포스팅했던 PageView 와 비슷하지만 캐로셀(CarouselSlider) 는 자동 스크롤 슬라이딩을 할 수 있는 위젯(Widget) 입니다. 1. pubspec.yaml CarouselSlider 을 사용하기 위해 pubspec.yaml 파일에 dependencies 를 추가해줘야 하는데요! https://pub.dev/packages/carousel_slider carousel_slider | Flutter Package A carousel slider widget, support infinite scroll and custom chi..

📘 Flutter 2021.06.27

[Flutter] 카드(Card) 위젯 사용하기

카드(Card) 위젯 아이템 등에 사용하는 카드 형태의 위젯(Widget). 보통 리스트뷰(ListView)나 그리드뷰(GridView) 와 같은 위젯에 감싸서 사용합니다. 1. CardPage.dart Card( child: ... ), 이 형태를 사용합니다. shape: RoundedRectangleBorder( //모서리를 둥글게 하기 위해 사용 borderRadius: BorderRadius.circular(16.0), ), elevation: 4.0, //그림자의 깊이를 설정 import 'package:flutter/material.dart'; class CardPage extends StatefulWidget { const CardPage({Key? key}) : super(key: key)..

📘 Flutter 2021.06.27

[Flutter] 페이지뷰(PageView) 사용하기

페이지뷰(PageView) 여러 페이지를 한 화면에서 구현할 수 있도록 하여 한 화면에서 페이지를 슬라이드로 볼 수 있게 하는 위젯(Widget) 1. PageviewPage.dart PageController를 만들고 PageView에 연결하여야 합니다. PageController는 PageView가 보여줄 첫 페이지를 설정하거나 페이지 넘김을 트리거 할 수 있습니다. PageView.builder( controller: PageController( initialPage: 0, //시작 페이지 ), itemCount: , //페이지 수 itemBuilder: (BuildContext context, int index) { ... }, //page 의 반목문 항목 형성 ), 이 형태를 사용합니다. imp..

📘 Flutter 2021.06.26

[Flutter] 그리드뷰(GridView) 사용하기 (2)

안녕하세요~ 기본 그리드뷰(GridView) 사용하기 에 이어서 그리드뷰(GridView) 의 하나의 item 이미지, 리스트에 순번, 이름 텍스트 를 표출하도록 하였습니다. 기본 그리드뷰(GridView) 사용하기 먼저 확인해주세요~ https://eunoia3jy.tistory.com/105 [Flutter] 그리드뷰(GridView) 사용하기 Flutter에서 그리드뷰(GridView) 를 만드는 방법이예용 😁 안드로이드 java 소스로 그리드뷰(GridView) 를 만들기 포스팅은 아래를 확인해 주세요 ~ https://eunoia3jy.tistory.com/14?category=1011678 [안드로이.. eunoia3jy.tistory.com Image 위젯 을 사용하는 방법은 아래 게시물을 ..

📘 Flutter 2021.06.24

[Flutter] 리스트뷰(ListView) 사용하기 (2)

안녕하세요~ 기본 리스트뷰(ListView) 사용하기 에 이어서 리스트뷰(ListView) 의 하나의 item 리스트에 순번, 이미지, 이름 텍스트 를 표출하도록 하였습니다. 기본 리스트뷰(ListView) 사용하기 먼저 확인해주세요~ https://eunoia3jy.tistory.com/101 [Flutter] 리스트뷰(ListView) 사용하기 안녕하세욧! Flutter에서 리스트뷰(ListView) 를 만드는 방법이예용 😁 예전에 안드로이드 java 소스로 리스트뷰(ListView) 를 만들기를 포스팅한적 있는데요~ https://eunoia3jy.tistory.com/13?category=1011678.. eunoia3jy.tistory.com Image 위젯 을 사용하는 방법은 아래 게시물을 확..

📘 Flutter 2021.06.23

[Flutter] 모델 클래스 내에서 코드 생성 라이브러리를 사용한 JSON 직렬화

안녕하셍유우~~ 웹서버와 통신하는 경우 보통 JSON 을 통해 데이터를 받아와 사용하는데요, Flutter 에서 JSON 를 다루기 위한 두가지 방법이 있습니다. 1. 수동 직렬화 2. 코드 생성을 사용한 자동 직렬화 저는 코드 생성을 사용한 자동 직렬화를 통해 JSON 을 다뤄볼거예요! 모델 클래스 내에서 JSON 직렬화 하는 것인데요, 코드 생성 라이브러리를 사용한 JSON 직렬화 방법 입니다. https://flutter-ko.dev/docs/development/data-and-backend/json JSON과 직렬화 어느 시점부터 웹 서버와 통신하지 않거나 구조화된 데이터를 적절하게 보관하지 않는 모바일 앱을생각하기 어려워졌습니다. 네트워크와 연결된 앱을 제작할 때, 결국에는 제법 괜찮은 JSO..

📘 Flutter 2021.06.22

[Flutter] 리스트뷰(ListView) 사용하기

안녕하세욧! Flutter에서 리스트뷰(ListView) 를 만드는 방법이예용 😁 예전에 안드로이드 java 소스로 리스트뷰(ListView) 를 만들기를 포스팅한적 있는데요~ https://eunoia3jy.tistory.com/13?category=1011678 [안드로이드/Android] 리스트뷰(ListView) 만들기 리스트뷰 (ListView) 란? - 사용자가 정의한 데이터 목록을 세로 방향으로 나열하여 화면에 표시하는 뷰 그룹(ViewGroup) 의 한 종류 - 리스트뷰(ListView) 와 같은 뷰 그룹(ViewGroup) 은 스크롤 기능을 지원 eunoia3jy.tistory.com 이번에는 Flutter 로 리스트뷰(ListView) 를 만들어 보려고 합니다~ 1. ListviewPa..

📘 Flutter 2021.06.20

[Flutter] appBar & bottomNavigationBar & Fluttertoast

Flutter 의 머터리얼 앱에서 appBar 와 bottomNavigationBar 사용한 소스입니다. 다음과 같이 머터리얼 UI 구조로 이루어져 있어요! https://eunoia3jy.tistory.com/99 [Flutter] 프로젝트 구조 / 머터리얼(Material) 앱 기본 형태 안녕하세용! Flutter 프로젝트 구조와 Flutter 앱의 기본 형태인 ㅍ 에 대한 간단한 설명입니다. Flutter 프로젝트 구조 프로젝트를 구성하는 폴더 .idea : 개발도구에 필요한 설정 build : 빌드시 생성 eunoia3jy.tistory.com @override Widget build(BuildContext context) { return new MaterialApp( // 구글 기본 디자인인 M..

📘 Flutter 2021.06.15

[Flutter] 프로젝트 구조 / 머터리얼(Material) 앱 기본 형태

안녕하세용! Flutter 프로젝트 구조와 Flutter 앱의 기본 형태인 ㅍ 에 대한 간단한 설명입니다. Flutter 프로젝트 구조 프로젝트를 구성하는 폴더 .idea : 개발도구에 필요한 설정 build : 빌드시 생성되는 파일 lib : 다트 코드를 작성하는 부분 test : 테스트 코드를 작성하는 부분 iOS : iOS 네이티브 코드를 작성하는 부분 android : 안드로이드 네이티브 코드를 작성하는 부분 프로젝트를 구성하는 파일 .gitignore : Git 설정 파일. 버전 관리시 무시할 파일 규칙 작성 .metedata : 프로젝트가 관리하는 파일. 임의로 수정하지 않는다. .packages : 각종 패키지 정보. 임의로 수정하지 않는다. flutter_app.iml : 개발 도구에 필요..

📘 Flutter 2021.06.14

[macOS 맥북/Flutter] Flutter Xcode (CocoaPods not installed) 해결 방법

Flutter SDK 설치 시 나타나는 Xcode (CocoaPods not installed) 해결 방법 입니당! https://eunoia3jy.tistory.com/89 [macOS 맥북/Flutter] Flutter SDK 설치 안녕하세요! 다음 프로젝트에서 Flutter 를 사용을 해야해서 저의 맥북에 Flutter 를 설치해 보았습니다. Flutter 란? Flutter(플러터) 는 Google에서 개발하여 Mobile World Congress 2018에서 최초 베타 릴리스.. eunoia3jy.tistory.com Flutter SDK 설치 후 flutter doctor 명령어를 실행하였을 때 Xcode 에 [!] 가 표시되어 있는 것을 확인하셨다면 Xcode 나 CocoaPods 가 설치..

📘 Flutter 2021.06.14
728x90
반응형