본문 바로가기

flutter4

Flutter(플러터) 카카오뱅크 클론 앱 만들기 개요 Flutter를 공부하면서 이번에는 뭘 해볼까 하다가 자주 사용하던 카카오뱅크 앱이 생각이 났습니다. 깔끔하게 잘 만들어진 앱이라고 평소에 생각했었는데, 이번 기회에 참고하면서 UI Clone 앱을 만들어 보기로 했습니다. 소스 코드와 프로젝트 시작부터 끝까지 코딩하는 영상은 하단에 링크를 참고하시면 됩니다! (카카오뱅크 앱에서 언어를 영어로 변경할 수 있는 설정을 찾지 못해서 임의로 번역기 돌려서 만들어 봤습니다.) 구현 HomePage BottomNavigation을 포함하고 있고 다른 페이지에 접근할 수 있는 기본이 되는 페이지 flutter_bloc 패키지를 이용하여 HomeCubit을 만들었습니다. Cubit은 간단한 상태 관리를 위해 사용할 수 있으며 Bloc보다 간단하게 구현할 수 있습.. 2020. 10. 12.
플러터(Flutter) - Gradient Button 2020. 7. 11.
[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에서 실행해야 할 계산이 너무 많아서 프레.. 2020. 1. 23.
[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, ).. 2020. 1. 15.