본문 바로가기

CS/Flutter | Dart

 (55)
FutureBuilder connectionState가 바뀔 때마다 builder()가 계속 새로 불린다 builder() 안에서 setState를 하지 않아도 자동으로 FutureBuilder가 해주는 거다 위 예시에서는 snapshot과 관련된 어떤 것이 바뀌어도 builder()는 다시 불린다 버튼 누르면 setState() 되게 해보았다 캐싱(caching) build 다시 실행했지만 FutureBuilder가 기존의 데이터 값 기억하는 것이다 위 예시에서는 기존 데이터 값 유지한 상태에서 3초 뒤에 데이터 값 바뀐다 if(!snapshot.hasData){ return Center( child: CircularProgressIndicator(), ); } 데이터가 아예 없을 때 로딩바 돌다가 데이터 생성되면 보여주기 -..
출석체크 앱 https://mapsplatform.google.com/ Google Maps Platform - Location and Mapping Solutions Create real world and real time experiences for your customers with dynamic maps, routes & places APIs from Google Maps Platform’s location solutions. mapsplatform.google.com 구글지도 플랫폼 가서 결제등록 해준다(유료 사용하지 않으면 청구 되지 않는다) API Key 가져와서 안드로이드, iOS 각각 설정해준다 사용 플러터 패키지: geolocator: ^9.0.2, google_maps: ^6.3.0 LatLng ..
비디오 플레이어 앱 #3(Slider, 새로운 동영상 불러와 재생) Slider 위젯 사용해 동영상의 현재 재생 위치와 연동 시키기 1. slider 위젯을 사용자가 스크롤하면 동영상이 해당 위치로 이동해야 한다 2. 동영상이 실행되는 위치에 따라 자동으로 slider가 움직여야 한다 Slider "${crntPosition.inMinutes}: ${(crntPosition.inSeconds % 60).toString().padLeft(2, "0")}", // 60으로 나눈 나머지 코딩을 하지 않으면 61초 됐을 때 분은 1분이 올라가는데 초는 여전히 61일 것 // -> 분 이 된 부분은 분으로 넘기고 초만 남겨줘야하기 때문 0:01 이 부분! Expanded( child: Slider( value: crntPosition.inSeconds.toDouble(), max..
비디오 플레이어 앱 #2(동영상 사이즈 조절, 뒤로가기, 재생, 앞으로가기 버튼 구현) 동영상 실제 사이즈로 보이게 하기 AspectRatio child 매개변수에 입력되는 위젯의 비율 정할 수 있는 위젯이다 aspectRatio 매개변수에 원하는 비율 입력 가능하다 -> 16:9라면 16/9 입력한다 위 예시에서는 value.aspectRatio 게터로 받아와 원동영상 비율 값을 넣어주었다 재생, 뒤로가기, 앞으로가기 버튼 버튼 스타일은 renderIconBtn 위젯으로 정의해줬고 renderIconBtn의 onPressed 매개변수에 각각 재생, 뒤로가기, 앞으로가기 기능을 가진 함수를 넣어줬다 각 함수는 아래와 같이 정의한다 재생, 뒤로가기, 앞으로가기 함수 정의 재생(onPlayPressed) 함수 setState(() { //이미 실행 중이면 중지, 아니면 실행 if (videoC..
비디오 플레이어 앱 #1(레이아웃, 사진첩접근권한, 동영상 재생) 로고와 앱이름 넣어주기 쿄쿄,, 기엽지 않나용 ~ SizedBox( height: 30.0, ), 로고 이미지와 앱이름 사이 공백은 보통 SizedBox로 해준다고 한다 로고와 앱이름은 따로 stless 위젯으로 정의해주었다 style: textStyle.copyWith(fontWeight: FontWeight.w700), textStyle.copyWith()를 이용해 같은 스타일이지만 ()안에 지정한 옵션만 살짝 다르게 할 수 있다 BoxDecoration 기능 신기하다! gredient에 여러 그래디언트 옵션들이 있어서 이 프로젝트에서는 LinearGradient를 지정했다 시작과 끝 정렬을 지정할 수 있고, 색상값을 넣어준다 renderEmpty() 위젯으로 감싸준다 로고를 누르면 onLogoTap..
pop 메소드 - maybePop, canPop, WillPopScope maybePop 라우트 스택에 해당 페이지밖에 없을 경우 pop되지 않는다 라우트 스택에 되돌아 갈 페이지가 있을 경우 pop처럼 동작한다 화면에 아무 것도 존재하지 않을 때 pop()해서 앱을 끝내버리는 것을 방지하기 위해 사용한다 canPop print()하면 상태를 출력해준다 false는 되돌아 갈 페이지가 없다는 것을 의미한다 WillPopScope 안드로이드 시스템 뒤로 가기 버튼으로 앱 나가는 것 방지하기 위한 함수 (ios는 뒤로 가기 버튼으로 종료되는 기능이 없다) return false 하면 뒤로 가기 불가, true하면 가능하다 아래 예시와 같이 특정 작업을 추가해서 그 조건에 해당하는 경우에만 pop() 가능하도록(뒤로 가기로 앱 나갈 수 있도록) 할 수 있다 final canPop ..
push 메소드 - pushReplacement, pushReplacementNamed, pushAndRemoveUntil, pushNamedAndRemoveUntil pushReplacement() 그 다음 페이지(RouteThree Screen)로 이동은 하지만 그 페이지(RouteTwo Screen)에서 pop()을 했을 때 pushReplacement()했던 페이지(RouteTwo Screen)를 지우고 그 전 페이지로 간다(RouteOne Screen) RouteTwo push replacement (RouteTwo 지우고)-> RouteThree pop() -> RouteOne pushReplacementNamed pushReplacementNamed()도 pushReplacement()와 마찬가지로 동작한다 RouteTwo push replacement (RouteTwo 지우고)-> RouteThree pop() -> RouteOne 하지만 pushRepl..
Named Route - PushNamed Flutter PushNamed 데이터 주고 받기 PushNamed()를 사용하면 MaterialPageRoute()를 사용하지 않기 때문에 MaterialPageRoute()의 setting 값을 사용할 수 없다 이 경우 값 전달은 PushNamed()가 가지고 있는 arguments 기능으로 바로 넘겨줄 수 있다 Named Route 사용하면 argument를 사용하는 방법이 데이터 주고 받는 가장 쉬운 방법이다 initialRoute: 초기 페이지 지정 routes{}에 위 처럼 Route를 지정해준다 pushNamed()에 RouteThree Screen 라우트와 argument(999)를 주었다 final argument = ModalRoute.of(context)!.settings.argume..
Tiny Star

티스토리툴바