No image

Dev/Flutter

[Flutter] flutter tutorial - 1. Dart 시작하기 (nomadcoders)

노마드 코더 Dart 시작하기 영상을 보고 정리한 내용입니다.https://nomadcoders.co/dart-for-beginners/lectures/4124 All Courses – 노마드 코더 Nomad Coders초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!nomadcoders.co      환경 : VSCodeUbuntu에서 VSCode 설치https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Vi..

by DOMDOMI 2024. 7. 10.

No image

Dev/Flutter

[flutter] 플러터 카카오 로그인 구현하기

플러터에서 카카오 로그인을 구현하는 방법 입니다! 먼저 pubspec.yaml 파일을 열어서, dependencies에 kakao_flutter_sdk 패키지를 입력하고 저장해주세요. 카카오 로그인을 구현하려면, 카카오 개발자페이지에서 앱을 등록해줘야 합니다. https://developers.kakao.com/console/app 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 카카오 로그인을 사용할 애플리케이션 요약 정보에 들어가서, 네이티브 앱 키를 복사해오시구요, 아래 보이는 "플랫폼"에서 Android, iOS 패키지명을 입력해주세요! 메인 페이지에서 네이티브 앱 키를 입력해주고, 카카오로그인 페이지를 불러오도록 합니다. import 'package:findm..

by DOMDOMI 2022. 1. 4.

No image

Dev/Flutter

[flutter] 플러터 튜토리얼6. 플러터 앱바 테마 변경하기

앱바 테마 변경에 대한 설명은 아래 페이지에 자세히 나와있다. codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#6 Write Your First Flutter App, part 2 | Google Codelabs Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. In this codelab, you’ll extend a simple mobile app to add interactivity, navigation, and change its them..

by DOMDOMI 2021. 4. 23.

No image

Dev/Flutter

[flutter] 플러터 튜토리얼5. 플러터 리스트 뷰에 하트 추가하기

튜토리얼4에 이어서 진행하도록 한다. 아래의 페이지에서 하트 기능 추가에 대한 설명을 볼 수 있다. 4. Add icons to the list 부터 보면 된다! codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#3 Write Your First Flutter App, part 2 | Google Codelabs Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. In this codelab, you’ll extend a simple mobile a..

by DOMDOMI 2021. 4. 23.

No image

Dev/Flutter

[flutter] 플러터 튜토리얼4. 플러터 무한스크롤 리스트 뷰 만들기

튜토리얼3에서 임포트했던 english_words 라이브러리를 이용해 무한스크롤 리스트뷰를 만들어보도록 한다. 무한스크롤 리스트뷰 만드는 방법은 튜토리얼3에서 보던 flutter.dev/docs/get-started/codelab 페이지에서 알려주고있다. flutter.dev/docs/get-started/codelab Write your first Flutter app, part 1 How to write a web-based app in Flutter. flutter.dev 무한스크롤로 english_words에서 영단어를 출력해 보여주기 위해 RandomWordsState를 클래스로 만들어 랜덤 영단어를 리턴하도록 한다. 그리고서 RandomWordsState 클래스 안에 변수를 선언하는데, 변수 ..

by DOMDOMI 2021. 4. 19.

No image

Dev/Flutter

[flutter] 플러터 튜토리얼3. 플러터 english_words 라이브러리 사용

아래의 플러터 페이지에 예제 코드가 있다. flutter.dev/docs/get-started/codelab Write your first Flutter app, part 1 How to write a web-based app in Flutter. flutter.dev Step 2: Use an external package에 보면 pubspec.yaml에 dependency를 추가하라고 써있다. pubspec.yaml 파일에 dependencies 아래에다가 english_words: ^4.0.0-0를 추가한다, 그리고 mail.dart파일에 아래와 같이 english_words를 임포트한다. main.dart의 MyApp클래스에다가 final wordPair = WordPair.random();을 추..

by DOMDOMI 2021. 4. 19.

No image

Dev/Flutter

[flutter] 플러터 튜토리얼2. 프로젝트 생성

VSCode의 상단 메뉴바에서 View > Command Palette 를 클릭, Flutter: New Application Project 클릭, 프로젝트 폴더명을 입력하여 프로젝트 폴더를 생성한다. 프로젝트를 저장하는 경로 도중에 한글이 있으면 에러가 발생하므로 주의해야 한다. 프로젝트를 생성하면 아래와 같이 폴더와 파일들이 자동으로 생성된다. 주로 코딩할 곳은 android, ios, lib 세가지이고, lib > main.dart가 메인 개발소스코드 파일이다. dependency 를 추가하는 파일은 pubspec.yaml이다. main.dart에는 이미 코딩이 살짝 되어있는데, 다 지우고서 아래 페이지에 있는 튜토리얼 코드를 복붙한다. flutter.dev/docs/get-started/codel..

by DOMDOMI 2021. 4. 15.

No image

Dev/Flutter

[flutter] 플러터 튜토리얼1. 설치

아래 링크에 들어가서 본인 운영체제에 맞는 것을 설치한다 나는 윈도우로 설치했다 flutter.dev/docs/get-started/install/windows Windows install How to install on Windows. flutter.dev 여기서 SDK 압축파일을 다운받는다 받은 압축파일을 풀면 flutter 폴더가 생성된다. 플러터 설치페이지에는 flutter를 C:\ProgramFiles\에는 설치하지 말라고 되어있다. ( 권한문제때문에 ) bin에는 flutter 실행파일이 존재하므로 bin폴더를 path에 추가해준다. 시작을 눌러서 환경 변수를 검색하고 시스템 환경 변수 편집 > 환경 변수에 들어간다. 사용자 변수에서 변수 Path를 더블클릭하면 나오는 환경 변수 편집에서 새로..

by DOMDOMI 2021. 4. 14.