오늘하루도 우힣ㅎ

앞에서 만들었던 Todo List를 이어서 만들어 보려고 합니다. 앞에서는 간단히 모델, 데이터를 보여주는 리스트, 체크 박스를 눌렀을때의 반응, listTile을 눌렀을때의 반응에 대한 기본적인 동작에 대해 다루었습니다. 여기서 부터는 실제로 데이터를 추가하는 방법에 대해 포스팅을 할려 합니다. 그러기 위해서는 미리 만들어 두었던 Todo Add page의 layout을 짜야 합니다. 1. todo_add.dart에 레이아웃 짜기 레이아웃의 경우 아래처럼 짤려고 합니다. 그러기 위해서는 2개의 텍스트 컨트롤러, 하나의 Raised Button, 마지막으로 달력을 보이게 할수 있는 것을 만들어야 합니다. 전의 포스팅 처럼 코드를 올리고 각각에 주석을 다는 형식으로 진행을 하겠습니다. import 'pac..

앱을 만들때도 웹을 만들때도 가장 흔한 예제중 하나는 Todo List이다. 이 Todo List를 Bloc을 통하여 만들어 볼려 한다. 이미 많은 예제 들과 많은 형식들이 존재 하지만 Bloc을 이해하기에 좋은 예라고 생각이 되어 적어 볼려한다. 디렉토리 구조는 다음과 같다. lib |____blocs | |_____todoBloc | |____bloc.dart | |____todo_bloc.dart | |____todo_state.dart | |____todo_event.dart |____models | |____todoModel.dart | |____main.dart |____todo_add.dart |____todo_list.dart 이번 포스팅에서는 기본적으로 List 들로 데이터를 띄우는 것에..

bloc에 대한 설명은 했지만 flutter에서 사용하는 bloc widget을 설명하지 않아 두번에 거쳐 포스팅 하려한다. 기본적인 내용은 https://bloclibrary.dev/#/flutterbloccoreconcepts?id=blocbuilder 에서 참고하여 적은 것들이다. flutter에서는 flitter_bloc이란 dart pakage를 제공하여 준다. 해당 패키지는 아래의 페이지서 볼 수 있으며 사용전 pubspec.yaml파일에 추가할수 있도록 하자! https://pub.dev/packages/flutter_bloc flutter_bloc | Flutter Package Flutter Widgets that make it easy to implement the BLoC (Busin..

Future 란? 오늘은 FutureBuilder에 대해 올려볼려고 한다. flutter의 경우 비동기 통신을 사용하고 있는데 이는 동기식 통신과 다르게 서버에서 데이터를 모두 받아오기전 화면을 그려줄수 있게 되는 장점을 가질수가 있다. Future를 사용하게 되면 미래의 잠재적인 값을 결정하게 되고 정보를 불러오는 동안 어떤걸 보여줄지 선택할수 있도록 해줍니다. 만약 서버에서 데이터를 받아올때에 어플리케이션 측에서는 정보를 언제 다 받는지 알수가 없습니다. 그렇기 때문에 future의 상태를 확실히 확인하는 과정이 필요하다. 아래의 코드를 예시로 들어보겠다. Future getting = Future.delayed( Duration(seconds: 2), () => 'Data Loaded', ); ge..

학생 편의를 위한 어플리케이션을 동아리원들과 함께 만들고 있다. 그 중 학교내 행사를 등록하고 보여줄수 있는 페이지가 있다. 하지만 하나의 이미지만으로는 해당 행사가 어떤것임을 제대로 알려주지 못하는 경우도 있고 여러가지의 사진을 한번에 넣을수 있도록 하는게 더 좋을것 같다는 의견이 있었다. 그래서 해당 기능을 찾다 보니 multi_image_picker라는 좋은 패키지가 있었다. 해당 패키지는 아래에 링크에 존재한다. https://pub.dev/packages/multi_image_picker#-readme-tab- multi_image_picker | Flutter Package Flutter plugin that allows you to display multi image picker on iOS..

앞의 포스팅에서는 BLoC에 대한 정보를 알아 보았다. 이 포스팅에서는 플러터 프로젝트 처음생성시 만들어지는 couter를 BLoC으로 만들어보려 한다. 1. 파일 구조 파일 구조는 lib folder 아래에 bloc 폴더를 만들고 그안에 필요한 bloc floder를 만든다. 프로젝트가 거대해지면 그만큼 많은 수의 bloc들이 생기게 될것이고 그것을 쉽게 관리하기 위해 bloc별로 폴더를 만들어 관리하는 것이 더 쉽다고 느꼈다. UI부분과 BLoC부분을 나누어 주는데 확실한 구분점들 두기 위해 나는 UI부분들은 Page 폴더를 만들어 모아 두는 것을 선호한다. 해당 예제는 main.dart하나에서 모두 관리가 가능하기에 따로 나누지는 않았다. 2. main.dart 분석 class _MyHomePage..

1. BLoC의 개요 UI와 Business Logic을 분리하여 만드는 방식을 의미한다. Flutter의 state를 관리하는 디자인 패턴중 하나이다. 이를 통하여 UI와 state코드를 분리 시킬수있다. - State 관리란? 사용자의 행동에 따라 바뀌게 되는 데이터들을 의미한다 기존의 SetState를 사용하게 되면 한 페이지에서 사용하던 데이터를 다른페이지에서 사용할때 코드가 꼬여 버릴 가능성이 커지게 된다. - BLoC의 장점 UI코드 쪽에서는 UI만 건들면 되고, BLoC쪽에서 대부분의 Logic을 생각할수가 있다. 협업시 다른사람이 만들어 놓은 BLoC을 새로이 만들필요 없이 재사용이 가능하다. setState()를 사용하는 것 보다 코드를 더 단순하게 만들수가 있다. - BLoC속 주요 개..

학교에서 2명의 사람과 함께 산학프로젝트를 하면서 각자 맡은 부분에대해 UI를 만든적이 있다. 이때 각자 디자인을 보고 다른 글자크기, 자간, 색상등을 사용하여 나중에 통일시키는 작업을 하는데 큰 애를 먹었었다(아직도 그런 곳들이 있어서 너무 힘들다...언제 다 통일을 시키지...). 이와 같은 번거로운 일을 하지 않기 위해서는 Theme을 사용하는것이 중요하다. Flutter 의 THEME는 앱전체에서 특정한 색상이나 글꼴을 통일시켜주기 위해서 사용이 되어진다. 또한 전체가 아닌 설정한 THEME를 통해 부분적으로 변화를 주거나, 부분적으로 적용이 가능하기도 하다. 1. 시작 코드는 아래와 같다. main.dart에서는 first_page.dart를 부른다. first_page에서는 메인에서 선언한 테..