본문 바로가기

📱Mobile/🔥Flutter11

[Flutter] 플러터 http GET, POST 사용하기, 요청(Request), 응답(Response) project/pubspec.yaml http: 0.12.2 추가한다. dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.3 http: 0.12.2//add dev_dependencies: flutter_test: sdk: flutter Session 제어를 위해 클래스를 만들고 그 안에서 헤더 쿠키 등 셋팅, 리스폰스의 응답을 각 상태코드에 따라서 얼럿을 띄우는 등의 작업분기를 추가한다. Session 클래스를 생성한다. impor.. 2023. 7. 4.

[Flutter] 간단한 앱 만들기 (provider pattern, translator(google 번역), ChuckNorris(19joke json api), jsontoclass) ChuckNorris 라는 19세 농담을 던져주는 json api가 있습니다. 그 rest api를 사용해서 화면에 뿌려지는 간단한 어플을 만들어보도록 하겠습니다. 우선 JSON To Dart Class (JsonToDartClass)를 설치하여줍니다. 이런게 플러그인으로 있는지 몰랐는데.. 매우 좋습니다!!! 짱짱 json 형식을 dart class 로 바꾸어집니다. 원하는대로 바꾸어지지 않을 수 있지만 몇개만 추가하면되서 무조건 이 방식이 좋습니다. 먼저 provider, http, translator 이렇게 3가지를 추가해줍니다. provider 패턴을 이용할것이고 http로 json response를 받을것이고 translator로 영어로된것을 한글로 번역할것입니다. 파일트리입니다. 저는 연습장 .. 2021. 1. 8.

flutter 프로그레스바 progress bar circle progress bar example flutter 기본 ProgressBar는 구글링하면 쉽게 찾을 수 있다. 위 두개의 경우 매우 간단한데 사용할땐 Stack에 넣어서 맨 상단에 쌓아주면 된다. 그리고 라이브러리를 가져와서 사용하는 것들이 있다. flutter_spinkit 을 사용해보도록 하자. 매우 쉽고 빠르게 적용 가능하다. 단순 프로그레스 애니메이션인데 LIKES가 이렇게 높을 줄은 몰랐다. 먼저 pubspec.yaml에 추가해주자. dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertin.. 2021. 1. 8.

flutter secure storage, 자동로그인, android KeyStore example flutter secure storage를 사용한 자동로그인을 해보도록 하겠다. 계정은 하나만 사용하지않고 여러계정을 사용하도록 하겠다. 디버깅을 많이 해보지 않았다. 대충 이런 식이다 라고만, 이렇게 사용하는 식이라는것만 대충 보고 넘어가면 될꺼같다. flutter secure storage flutter에서 각 플랫폼(android, ios)의 내부저장소(keychain or keystore)를 사용할 수 있게 해주는 라이브러리다! iOS에서는 사용해보지 않았지만 Keychain이라는 것을 사용하고 있는것 같다. android keystore는 사용해본적이 있다. 안드로이드는 루팅하기 쉬운 운영체제여서 Shared Preference 같은 쉽게 사용할 수 있는 내부 저장소들은 간단한 루팅과정만 거쳐도.. 2021. 1. 7.

[Flutter] provider + [Change Notifier] 를 사용한 Provider Pattern example 이때까지 다양한 BLOC 패턴으로 코드를 작성해보았다. 하지만 BLOC의 로직 분할을 위한 다수의 클래스 생성으로 인해 복잡성 문제가 있기 때문에 2019년 Google에서 적극 추천한 Provider Pattern을 사용해보도록 하겠다. 구글에서 만든것은 아니고 커뮤니티에서 올라온것이라는데 구글에서 적극 추천을 한 것이라고 한다. 또한 BLOC가 다수의 클래스로 복잡하기 때문에 아에 쓰지 않는것은 아니다. 어느정도 규모가 있는 프로젝트는 BLOC패턴을 사용하여 정확한 로직분리를 하는것이 분명히 더 좋을것으로 보인다. 소규모에 Provider, 중규모에 Provider, Bloc, 대규모에 Bloc 가 맞지 않을까 싶다. 트리이다. main.dart import 'package:flutter/founda.. 2021. 1. 6.

[Flutter] 기초가 되는 StreamBuilder BLOC 패턴, StreamSubscription, yield example 저번에는 Cubit를 사용하여 BLOC 패턴을 제작해보았다. 훤하게 눈에 잘 보이는 Cubit로 필요 동작만 깔끔하게 옵저빙 했지만 역시나 BLOC는 복잡하다. 이번에 작성하는 StreamBuilder를 사용한 BLOC 패턴 또한 복잡하다. 결국 하나의 기능을 만들려면 클래스를 최소 3, 4개를 만들어야하니 문제이다. 파일트리이다. 로직을 나누고, 이벤트와 상태를 관리한다. main.dart import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc_with_stream/ticke.. 2021. 1. 6.

[Flutter] Cubit를 사용한 BLOC 패턴, Bloc.observer example CUBIT를 사용한 BLOC 패턴 Bloc.observer를 BlocObserver를 상속한 class로 초기화해서 onChange를 override해서 상태가 변할때마다 print 할것이고 navigation push 도 해볼 것 입니다. pubspec.yaml dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.0 bloc: ^6.1.0 //추가 flutter_bloc: ^6.1.0 //추가 counter_observer.dart .. 2021. 1. 4.

[Flutter] fluro package (navigation 이동, route, transition) sample code fluro 를 사용하여 route를 관리할 수 있다. arguments 정하는것도 가능하고 transitionType을 통해 원하는 애니메이션을 보이게, 안보이게 할 수도 있다. pub.dev/packages/fluro fluro | Flutter Package Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions. pub.dev code sample 이다. import 'package:flutter/material.dart'; import 'package:fluro/fluro.dart'; Handler _TestNativeH.. 2020. 12. 22.

[Flutter] flutter intro(splash) -> login page timer sample code flutter_example/widgets 패키지를 하나 만듭니다. main.dart import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter_example/widgets/introPage.dart'; import 'package:flutter_example/widgets/loginPage.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, ti.. 2020. 10. 26.

[Flutter] Flutter 플랫폼 채널을 이용해서 Android 코드 호출하기 (MethodChannel) 생성시 Paltform channel language 체크 모두 해제하기 * 플랫폼 채널을 사용하는데 있어서 중요한것은 Platform channel language를 어떤것을 사용할것인지이다. Include Swift support for iOS code 를 선택한 적이 있는데 Swift 코드를 작성할 사람이 없어서 낭패를 본 적이 있다. 플랫폼 채널을 사용하려면 java, kotlin, Objective-c, swift 모두 숙지해 두어야 한다. project/lib/main.dart import 'dart:async'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class PlatformChannel.. 2020. 10. 25.

[Flutter] Flutter 생명주기 Sample Code main.dart import 'package:flutter/material.dart'; void main() => runApp(TestApp()); class TestApp extends StatelessWidget { TestApp() { print('TestApp TestApp() start'); print('TestApp TestApp() done'); } @override Widget build(BuildContext context) { print('TestApp build() start'); print('TestApp build() done'); return MaterialApp( title: 'StatefulWidget LifecycleApp', home: _FirstStatefulWidge.. 2020. 10. 25.

이전 1 다음

티스토리툴바