728x90 반응형 개발노트/Flutter32 [Flutter] Intro, Launcher 화면 생성하기 개발 환경 --------------------------------- OS : Mac 개발 툴 : android studio 개발 언어 : dart --------------------------------- 안녕하세요 전진시입니다. 이번 포스팅에서는 Flutter에서 Intro 화면을 생성할거에요 저는 일단 intro.dart 파일을 하나 생성했습니다. 화면 이동 구성은 ** intro 화면 -> webView 화면으로 넘어가게 할거에요 1. Intro에 넣을 이미지 셋팅 이미지 파일 하나 구해서 assets 폴더 하나 생성하여 이미지 파일을 넣어주세요. 2. intro,dart 파일에 원하는 위치에 Timer 메서드를 넣어주세요. 저는 3초 후 이동하게 했고 initState()에 넣었습니다. @o.. 2023. 2. 25. [Flutter] Dio란? Dio란? Dio는 API 요청을 만들기 위한 HTTP 클라이언트 라이브러리 입니다. Android 에서 사용하는 okHttp 라이브러리와 비슷해보입니다. HTTP/1.1, HTTP/2, WebSocket 등 다양한 프로토콜을 지원하며 취소, 타임아웃, 인터셉터 등의 기능도 제공하네요 GET, POST, PUT, DELETE 및 PATCH와 같은 다양한 유형의 request를 지원하며 사용자 지정 헤더, 쿼리 매개변수 및 요청 데이터를 설정할 수 있습니다. Dio는 Dart 프로그래밍 언어의 dart:io 라이브러리 위에 구축되어 효율적이고 빠릅니다. 또한 파일 업로드 및 다운로드, 쿠키 관리 및 인증과 같은 기능을 지원합니다. Flutter 개발 공부하며 향후에 flutter로 프로젝트를 시작할 때 A.. 2023. 2. 23. [Flutter] retrofit , 레트로핏 api 통신 POST 편 #2 개발 환경 --------------------------------- OS : Mac 개발 툴 : android studio 개발 언어 : dart --------------------------------- 안녕하세요 지난 포스팅에 이어 Flutter API 통신을 하여 POST Request를 만들고 실행시켜보겠습니다. https://jpointofviewntoe.tistory.com/113 [Flutter] retrofit , 레트로핏 api 통신 POST 편 #1 개발 환경 --------------------------------- OS : Mac 개발 툴 : android studio 개발 언어 : dart --------------------------------- 안녕하세요 이번 포스팅은.. 2023. 2. 23. [Flutter] retrofit , 레트로핏 api 통신 POST 편 #1 개발 환경 --------------------------------- OS : Mac 개발 툴 : android studio 개발 언어 : dart --------------------------------- 안녕하세요 이번 포스팅은 flutter 에서 retrofit 라이브러리를 사용하여 api 통신을 해보겠습니다. android 에서도 restApi를 사용하기 위해 retrofit 라이브러리를 이용하였는데 flutter 를 공부하다보니 여기서도 retrofit이 쓰이네요 바로 시작하겠습니다 ! 1. 종속성 추가 retrofit 라이브러리를 pubspec.yaml 파일 dependencies에 추가해줍니다. retrofit과 json_serializable, build_runner 등 같이 추가해주겠.. 2023. 2. 23. [Flutter] Navigator와 routes 이번 포스팅에서는 Flutter에서 Navigator를 사용해보겠습니다. 먼저 Flutter 에서 Navigator의 역할은 Navigator docs.Flutter.dev 페이지에서는 Navigator에 대해 다양한 유형의 정보를 표시하기 위해 앱에는 여러 화면이 있는데 이때 화면 전환 역할을 돕는데 사용됩니다. routes Flutter에서 routes는 화면과 페이지입니다. Navigator 메서드 종류 push pop replace Navigator 메서드는 위 세가지가 있습니다. Named가 붙어있는 메서드를 사용하기 위한 사전셋팅 Named가 붙어있는 메서드를 사용하기 위해서는 MaterialApp 안에 routes 속성에 이동할 화면의 경로를 선언해줘야 합니다. 저는 webView.dart로.. 2023. 2. 20. [Flutter] inAppWebView 사용하기 이번 포스팅에서는 Flutter에서 inAppWebView 패키지를 사용하여 webView를 실행해보겠습니다. pubspec.yaml -> dependencies 에 inAppWebView를 추가해줍니다. 저는 버전을 따로 명시하지 않았습니다. # inappwebView flutter_inappwebview: 그리고 .dart로 와서 import 해줍니다. import 'package:flutter_inappwebview/flutter_inappwebview.dart'; 여기까지 진행하였으면 기본 셋팅은 끝났습니다. StatefulWidget을 상속받는 class는 이렇게 셋팅하고 class WebViewPage extends StatefulWidget { const WebViewPage({Key? ke.. 2023. 2. 20. [Flutter] Flutter의 UI 구조 지난 포스팅에 이어 Flutter UI 구조에 대해 알아보려 합니다. Flutter 프로젝트에 WebView를 추가한 소스 코드를 가져왔습니다. void main() => runApp(WebViewTestApp()); class WebViewTestApp extends StatelessWidget { const WebViewTestApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: WebViewPage(), ); } } class WebViewPage extends StatefulWidget { WebViewPage({Key.. 2023. 2. 17. [Flutter] Flutter 와 WebView 추가하기 flutter 개발에 입문하는 전진시입니다. 원래는 네이티브 방식으로 iOS와 android를 동시 개발중이었는데 제가 주로 개발하는 프로젝트들이 하이브리드 앱이기 때문에 크로스 플랫폼 방식인 flutter에 발 담궈보려 합니다. Flutter Flutter는 여러 플랫폼용 앱을 만드는 크로스 플랫폼 개발 프레임워크입니다. iOS와 android 뿐만 아니라 웹, 데스트 톱 앱 개발도 가능합니다. 처음엔 React Native로 개발을 하려고 했다가 Flutter로 전향했습니다. 이유는 환경셋팅에서 제대로 막혀서,,~ 환경셋팅하는데만 일주일 잡아먹은것 같은데 다른 분들은 어떻게 수월하게 진행한건지 너무 궁금합니다,,! flutter의 장점은 낮은 진입장벽 높은 네이티브 성농 예쁜 UI 이 있습니다. **.. 2023. 2. 17. 이전 1 2 3 다음 728x90 반응형
