Flutter (6) 썸네일형 리스트형 Flutter(플러터) 클럽하우스 Clubhouse 클론 앱 만들기 개요 요즘에 유행하는 클럽하우스 앱을 참고해서 Flutter로 UI 클론 앱을 만들어 봤습니다. View가 많아서 몇 개만 골라 봤습니다. 하단의 영상을 통해서 프로젝트 생성부터 완성까지 빠르게 만드는 것을 확인할 수 있습니다. Preview 스타일링을 위한 색상을 style 파일로 따로 관리하고 있습니다. 처음 접속 시 나타나는 Welcome Page 부분입니다. View에서 나눌 수 있는 부분들은 각각 Widget으로 분리해서 관리하고 있습니다. 국가 코드 선택 화면 구현을 위해서 country_code_picker를 사용했습니다. country_code_picker | Flutter Package A flutter package for showing a country code selector. In.. Flutter(플러터) Python Flask 서버 만들어서 CartoonGAN 적용하기 개요 학습된 머신러닝 모델들을 찾을 수 있는 tfhub에서 cartoongan 모델을 발견하게 되었습니다. 이미지를 만화같은 스타일로 변환해주는 모델인데 재미있을 것 같아서 모델 파일을 다운로드 받고 플러터 프로젝트에 적용 해봤습니다. TensorFlow Hub tfhub.dev 그런데 실제 적용 했을 때 몇 가지 문제가 있었습니다. Flutter에는 공식적인 tflite 라이브러리가 없어서 서드파티 라이브러리를 사용하는데 실제 동작하지 않는 모델이 많이 있었습니다. 사용할 수 있는 모델인 경우에도 입력가능한 이미지 사이즈 크기 제한이 있어 이미지를 리사이징해서 사용하는데, 만화 스타일로 변화된 이미지도 똑같이 화질이 안좋아서 제대로 사용할 수 없는 상태였습니다. Google Colaboratory co.. Flutter(플러터) 카카오뱅크 클론 앱 만들기 개요 Flutter를 공부하면서 이번에는 뭘 해볼까 하다가 자주 사용하던 카카오뱅크 앱이 생각이 났습니다. 깔끔하게 잘 만들어진 앱이라고 평소에 생각했었는데, 이번 기회에 참고하면서 UI Clone 앱을 만들어 보기로 했습니다. 소스 코드와 프로젝트 시작부터 끝까지 코딩하는 영상은 하단에 링크를 참고하시면 됩니다! (카카오뱅크 앱에서 언어를 영어로 변경할 수 있는 설정을 찾지 못해서 임의로 번역기 돌려서 만들어 봤습니다.) 구현 HomePage BottomNavigation을 포함하고 있고 다른 페이지에 접근할 수 있는 기본이 되는 페이지 flutter_bloc 패키지를 이용하여 HomeCubit을 만들었습니다. Cubit은 간단한 상태 관리를 위해 사용할 수 있으며 Bloc보다 간단하게 구현할 수 있습.. 플러터(Flutter) - Gradient Button [Dart] 비동기 프로그래밍 (Isolates, Event Loops, Future) Flutter 유튜브 채널에 친절하게도 한글 자막이 달려있는 영상이 있다. 그중에서도 비동기 프로그래밍에 관한 영상이다. https://www.youtube.com/watch?v=vl_AaCgudcY Isolates 모든 Dart 코드가 실행되는 곳으로, 단일 스레드가 이벤트 루프를 실행하고 있다. 단일 스레드 안에 여러 개의 Isolate가 있는 형태로 보면 될 것 같다. (C++과 같은 다른 언어에서는 같은 메모리를 공유하는 다중 스레드를 가질 수 있다.) Dart에서는 스레드가 메모리를 가진 채로 Isolate에 있으며 이벤트만 처리하고 있다. main Isolate가 기본이 되는 Isolate이며 Dart의 런타임에 의해 만들어진다. main isolate에서 실행해야 할 계산이 너무 많아서 프레.. [Flutter] BoxDecoration으로 심플한 UI 만들기 심플한 UI 만들기 BoxDecoration을 이용하여 색 조합과 그림자 효과를 통해서 간단한 코드지만 심플한 UI를 만들 수 있다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.grey[300], body: Center( child: Container( width: 200, height: 200, child: Icon( Icons.cloud, size: 100, ).. 이전 1 다음
