웹 개발/Flutter
-
[Flutter] 플러터 2.0 null safety 를 이해해보자웹 개발/Flutter 2021. 8. 4. 22:46
Null safety를 이해 해보자 flutter가 2.0 버전으로 업데이트 되면서 dart 언어에 null safety가 적용되었다. null safety가 null을 사용하지 못하게 하는 것이라 오해할 수도 있는데 (왜냐하면 내가 그랬다 ㅎ..), null로 인한 런타임 에러를 방지해 개발자의 생산성을 높이고자 하는 목적이 있다. 자세히 말하면, null safety는 변수가 null을 허용하는지 구분하기 위한 개념인데 기본적으로 null을 허용하지 않는다. dart 언어는 null safety를 지원하지 않았기 때문에 변수 값이 초기화 되지 않았거나 null 값을 전달하면 컴파일 에러는 발생하지 않고 런타임 과정에서 오류가 발생했다. 이러한 이유로 코드를 작성할 땐 오류가 발생할 것을 예상하지 못하..
-
[Flutter] flutter 2.0 stable 버전 출시에 대해 알아보자웹 개발/Flutter 2021. 5. 3. 14:03
flutter 2.0 웹 컨셉 flutter 2.0 에서 웹 stable 버전이 출시되었다. 현재 창업 아이템을 개발 중에 있는데 플랫폼 특성상 UI 디자인적 요소가 중요하고 추후 태블릿 앱으로 발전시켜나갈 계획이였기 때문에 flutter web으로 개발 중이다. url를 포함한 여러 불안정한 웹 지원 요소들 때문에 reactJS로 옮겨야하나 고민이 있었지만 flutter 2.0 버전이 나온 뒤 flutter로 계속 진행하기로 결정되었다. 2.0 버전으로 마이그레이션 하기 위해 어떤 요소들이 추가되었는지 알아보았다. 1) Progressive web apps (PWAs) PWAs, 즉 프로그레시브 웹앱은 모바일 앱과 웹 기술의 장점을 결합하고 단점을 보완한 미래형 웹 기술이라고 한다. 네이티브 앱은 오프..
-
[Flutter] After Effects로 작업한 애니메이션을 flutter에 적용하는 방법 (Lottie)웹 개발/Flutter 2021. 2. 17. 13:53
캐릭터 디자이너와 프로젝트를 하면서 움직이는 애니메이션 캐릭터를 어플리케이션에 적용해야했다. Rive를 사용하려 했지만 Rive는 아직 베타버전이기 때문에 다른 방안을 찾다 Lottie 프로그램을 알게 되었다. Lottie는 애니메이션 모션을 gif로 저장할 필요 없이 코드로 적용할 수 있는 오픈소스 라이브러리이다. Android와 iOS, 웹에서 Adobe After Effects에서 작업한 애니메이션을 Bodymovin이라는 플러그인을 사용하여 json 파일로 생성해준다. 코드를 바로 적용하기 때문에 해상도 걱정은 안해도 된다는 장점이 있다고 한다! Lottie를 위해 Flutter에서 사용할 수 있는 패키지가 있어 사용해보았다. 1-1) After Effects에서 중간 플러그인인 Bodymovin..
-
[Flutter Web] Fluro 패키지로 네비게이션 라우팅하기 ( Deep link / Transitions)웹 개발/Flutter 2021. 2. 11. 16:48
flutter web routing을 위해 get it package를 사용했었는데 현재 어플리케이션 상태를 나타내는 url이 수정되지 않아 주소를 직접 수정해 페이지 이동을 하지 못하는 문제가 있다는 것을 알게 되었다. Fluro package를 사용해 딥링크 문제를 해결했다. 딥링크 특정 페이지에 도달 할 수 있는 링크 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 1) Fluro package 가져오기 depende..
-
[Web] 안드로이드 스튜디오에서 웹 실행시 포트 지정(설정) 하는 법웹 개발/Flutter 2021. 2. 7. 01:03
특정 포트로 웹을 실행해야하는데 기존에 설정되어있던 chrome(web)으로 실행하다보니 명령어로 따로 입력하지 않는 이상 포트 설정을 할 수가 없어서 방법을 찾아보았다. 1) 명령어를 통해 포트(port) 지정하는 법 flutter run -d chrome --web-hostname localhost --web-port 5000 2) 안드로이드 스튜디오에서 웹을 실행할 때 일일히 명령어를 입력하지 않고 port 지정하는 방법은 아래와 같다.
-
[Flutter] Service locator pattern을 사용해 build context 없이 navigate 하기웹 개발/Flutter 2021. 1. 31. 01:01
아래의 flutter web의 routing을 배우기 전에 get it package의 Service locator을 사용한 navigation 방법에 대해 익혀보려고 한다. Service locator pattern 서비스 중개자(Service locator) 는 서비스 제공자를 등록하고, 서비스를 사용하는 측에서 이 서비스에 접근할 수 있도록 중개해준다. 서비스 제공자의 실제 자료형과 이를 등록하는 과정은 숨긴다. 출처 : http://hajeonghyeon.blogspot.com/2017/06/service-locator-pattern.html www.filledstacks.com/post/navigate-without-build-context-in-flutter-using-a-navigation-..
-
[Flutter] 플러터 종속성 주입 (InheritedWidgets/ get_it / provider)웹 개발/Flutter 2021. 1. 28. 19:02
개발을 하다보면 들어갈 데이터는 다르지만 UI가 같은 객체를 서로 다른 클래스에 넣어야할 때가 있다. 클래스마다 데이터만 다른 같은 객체를 일일히 추가하다보면 코드가 길어지고 수정사항이 생길 때는 객체별로 코드를 수정해야하기 때문에 매우 번거로워 진다. 이러한 불편함을 해결하기 위해 Dependency Injection (종속성 주입) 기술이 필요하다. DI는 코드의 재사용성을 높이는 데 사용되는 기술이며 해당 객체를 클래스마다 인스턴스화 즉 생성하는 대신 클래스에 종속 객체를 주입한다. 클래스로부터 객체를 만드는 과정을 클래스의 인스턴스화라고 하며, 어떤 클래스로부터 만들어진 객체를 그 클래스의 인스턴스라고 한다. 결국 인스턴스는 객체와 같은 의미이지만, 객체는 모든 인스턴스를 대표하는 포괄적인 의미를..
-
[Flutter] 플러터 웹 사이트 반응형으로 생성하기웹 개발/Flutter 2021. 1. 23. 22:30
기존에 만들었던 웹사이트는 반응형 웹을 위한 설정이 적용되어있지 않기 때문에 웹 화면을 조절했을 때 아래와 같이 overflow가 발생하거나 웹사이트의 UI가 유지되지 않는다. 1) responsive builder 반응형 웹 사이트를 구축하기 위해 responsive builder 패키지를 사용한다. responsive_builder: ^0.1.2 웹을 실행하는데 사용되는 디바이스에 맞는 페이지를 설정하면 디바이스에 맞는 반응형 웹을 생성해준다. 디바이스 크기를 일일히 설정해줘야할 필요를 줄여주는 패키지라고 생각한다. watch, mobile, tablet, desktop void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @o..