본문 바로가기
프로그래밍/Flutter & Dart

Flutter & Dart 관련 사이트

by 어느덧중반 2021. 8. 22.
반응형

1. 블로거 게시글

https://medium.com/flutter-korea/flutter-%EC%BD%94%EB%93%9C%EB%9E%A9-%EA%B0%80%EC%9D%B4%EB%93%9C%EB%9D%BC%EC%9D%B8-b0f4854ddbd5

 

Flutter 코드랩 가이드라인

이 글은 2019년 6월 29일 (토) 진행 예정인 Flutter 코드랩을 위한 가이드라인입니다. 지난 글과 마찬가지로 해당 코드랩에 참여하지 않아도 이 글을 통해 Flutter에 입문하실 수 있습니다.

medium.com

https://medium.com/flutter-korea/flutter-vscode%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-edbe44a178c5

 

Flutter, VSCode로 시작하기

VSCode로 Flutter 개발 환경 구축 하는 방법을 알려 드립니다 :D

medium.com

VSCode

Rainbow Brackets : Dart 언어 특성상 브라켓이 많아 가독성을 늘리고 싶으면 설치하기

https://medium.com/flutter-korea/get-started-with-flutter-9703c3f6bd4f

 

Get Started with Flutter

내가 Flutter에 매력을 느낀 데에는 여러가지 이유가 있지만 대표적인 이유는 간결하고 직관적이라는 것이었다. HTML이나 CSS도 충분히 간결하지만 Flutter가 보여준 간결함이 더 직관적이라고 생각했기 때문이다.

medium.com

 

https://codelabs.developers.google.com/

 

Google Codelabs

Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. They cover a wide range of topics such a

codelabs.developers.google.com

Google에서 공식적으로 지원하는 코드랩 참고(링크에서 Flutter로 검색)

 

* 블로그에서 필자가 이야기하는 추천 코스

여기서 제가 추천드리는 코스는 아래와 같은 코스입니다. Flutter 코드랩 참석자들을 대상으로 보낸 메일에도 똑같은 코스로 공유되어있습니다.

For Starter

모든 분들이 진행하시는 것을 권장합니다

For Beginner

Firebase로 DB를 연동하고, Material Components(MDC)를 통해 앱을 만드는 과정을 다룹니다. UI에 대해 더 이해하고 싶으신 분들은 Material Design을, DB연동을 원하는 분들을 DB 섹션을 참고하세요.

Material Design:

DB:

위 코스들을 모두 거친다면 Flutter의 기본적인 개념에 대해서는 모두 살펴볼 수 있을 것입니다. 코드랩을 모두 마친 후에는 여러 개념을 더 익힐 수 있지만, Dart에 대해서 더 깊이 이해할 수도 있고 Flutter 자체를 더 깊이 팔 수도 있습니다.

 

2. flutter 커뮤니티

https://flutter.dev/

 

Flutter - Beautiful native apps in record time

Flutter is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open sour

flutter.dev

- packages 모음 : https://pub.dev/flutter/packages

 

Page 1 | Top Flutter packages

Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs.

pub.dev

 

3. Dart 커뮤니티

https://dart.dev/

 

Dart programming language

Dart is a client-optimized language for fast apps on any platform

dart.dev

 

4. 앱 따라하기

- 스팀잇 피드 구현하기 : https://anpigon.github.io/dclick/@anpigon/flutter--1540311025725/

 

[Flutter] 플러터(Flutter) 모바일 앱 개발 - 스팀잇 피드 구현하기

안녕하세요. @anpigon 입니다.이번에는 스팀잇 피드를 가져와서 출력하는 화면을 개발해보았습니다. 이전글 "First Flutter App"에서 추가로 학습할 부분이 거의 없어 코드 설명은 짧게 하였습니다. 그리고 핵심 로직에 집중하기 위해서 UI 컴포넌트는 최소한으로 사용합니다.

anpigon.github.io

- 초급(명함앱, 주사위게임앱, 퀴즈앱, 실로폰앱), 중급(BMI계산기, 행성정보앱) : https://sysocoder.com/flutter-%ED%96%89%EC%84%B1-%EC%A0%95%EB%B3%B4%EC%95%B1-1-%EC%B4%88%EA%B8%B0%EC%84%B8%ED%8C%85appbar/

 

SysoCoder

SysoCoder 개발 블로그

sysocoder.com

- 테마 변경하기 : https://sysocoder.com/flutter-bmi-%ea%b3%84%ec%82%b0%ea%b8%b0-1-flutter-%ed%85%8c%eb%a7%88-%ec%82%ac%ec%9a%a9%eb%b2%95/

 

SysoCoder

SysoCoder 개발 블로그

sysocoder.com

- 탭별로 화면 분리하기 : https://codelabs.developers.google.com/codelabs/flutter-cupertino/index.html?index=..%2F..index#5

불러오는 중입니다...

- image 위에 텍스트나 아이콘 생성하기 : https://cogitas.net/overlay-text-icon-image-flutter/

 

How to overlay text and icon on an image in Flutter - Musings of a Mobile App Software Developer

When working with images, you often need to overlay text or icons on them. Perhaps to show the name of the image, or an icon to favourite it. In Android, the trusted android:background xml attribute does the trick. In iOS, you can add an UIImageView to the

cogitas.net

 

5. 앱 관련 참고 사이트

- material design 참고 사이트 : https://material.io 

 

Homepage

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

- widget 종류/소스미리보기 등 제공해주는 사이트 : https://flutterstudio.app/

 

AppBuilder 2 20180529-19:35

 

flutterstudio.app

- 앱 아이콘크기에 맞게 조절해주는 사이트 : https://appicon.co/

 

App Icon Generator

Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser

appicon.co

 

6. 자극 용도

https://brunch.co.kr/@tilltue/56

 

Flutter 앱 개발후기

개발후기, Flutter, Dart, 세관이 | 제주에서 한달간 집중근무 프로젝트를 수행하러 내려가기 약 일주일전 한달간 무언가 공부해볼까 고민해보던 차에, 종종 같이 공부했던 친구에게 Flutter 강의를 하나 소개받았다. 서로 끝까지 공부할수 잇도록 학습에 대한 자극을 주면서 진행해보자고 이야기 하고 공부하기 시작했다. 아래 강좌이다. 구글의 지원으로 가격이 단돈 10달러! 한달반에 걸쳐 강좌를

brunch.co.kr

https://itsallwidgets.com/

 

Flutter Apps | It's All Widgets!

An open list of example apps made with Flutter include many open source samples.

itsallwidgets.com

 

반응형

댓글