내배캠 31일차_Flutter 실무숙련 (책 검색 앱 만들기)

 1. Flutter 실무숙련


Homepage UI 구현


AppBar구성

검색 입력 위젯 : AppBar의 title 속성

검색 아이콘 : AppBar의 actions 속성



검색입력 위젯 (TextField) 구현

TextField : 텍스트 입력할 수 있는 위젯

flutter SDK v3.26 이상을 설치한 경우, WidgetStateInputBorder.resolveWith()




검색 아이콘 구현





 TextEditingController 는 반드시 사용 다하면 dispose를 호출해줘야 메모리에서 제거됨.

소거해주려면 StatefulWidget 사용!



GridView : 격자 형태 뷰

Builder 생성자 이용, itemCount 속성 갯수만큼 itemBuilder 속성에 들어가는 함수 호출


showModalBottomSheet

body: GridView.builder(
padding: EdgeInsets.all(20),
itemCount: 10,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 3/4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemBuilder:(context, index){
return GestureDetector(
onTap: () {
//
showModalBottomSheet(
context: context,
builder: (context) {
return HomeBottomSheet();
},
);
},
child: Image.network('https://fastly.picsum.photos/id/38/200/300.jpg?hmac=-3xmMd1qccZR3fLPMvwj8D3GgMIIDCKTpXJspTKuZW0'));

},),



WebView

플러터에서 웹 페이지를 보여줄 때 사용하는 위젯

패키지추가 : Flutter pub add flutter_inappwebview




TextField

title: TextField(
maxLines: 1,
onSubmitted: onSearch,
controller: textEditingController,
decoration: InputDecoration(
hintText: '검색어를 입력해 주세요',
border: WidgetStateInputBorder.resolveWith((states) {
if (states.contains(WidgetState.focused)) {
return OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.black),
);
}
return OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.grey),
);
}),
),
),





2. 인사이트 클럽


책 <미니멀리스트 창업가> 사힐 라빈지아 지음, 박재영 옮김, CAPITALEDGE
Chapter 7. 내가 살고 싶은 집을 짓자

손님을 초대하기 전에는 먼저 집안 정리부터 해야 한다.

파티가 끝난집이 시작할 때보다 깨끗했던 적은 없다.

회사는 영원히 끝나지 않는 파티와 같다.


어제 들었던 비전과 미션 게릴라 세션이 생각이 났다.

Vision : 회사의 존재 이유

Mission : 회사의 목표

회사가 추구하는 가치와 의미, 어떤 방식과 태도로 수익을 낼 것인지에 대한 고민은 반드시 필요한 것이다.


언젠가는 '향의 가치'에 대해서 깊게 고민했던 적이 있었다.


추억을 떠올리게 하는 매개체,

사람들의 기분을 좋게 하는 것,

이미지나 스타일의 새로운 표현방식,

상품으로써 매출을 일으키는 것.

예술작업의 도구나 매체,

...

...



긴 시간 스스로에게 닿았던 답은

 물질이나 대상이 아니라 관계에 있다는 것이었다.


회사를 운영함에 있어서도 가치관은 상당히 중요한 요소라고 생각된다.

수익을 내는 것을 목표로 삼았다면,

'어떤 방식과 태도로 수익을 추구할 것인가'


트렌드를 선도하는 것과 진정성을 비교하자면,

개인적으로는 후자가 가치관에 잘 맞는다고 생각된다.


우리의 팀 이름을 생각하면,

'라이프스타일을 수집하다.' 사람들의 라이프스타일을 수집, 관찰하여 

더 나은 라이프스타일로 나아갈 수 있도록 하는 것?

새로운 라이프스타일을 창출하는 것?

지속가능한 라이프스타일을 추구하는 것?

...

이 부분은 팀원들과 함께 같이 고민하고 나누면서 디벨롭을 시켜야 할 것 같다.



파티를 열기 전엔, 

회사의 문화와 가치관에 대해 깊이있게 이야기를 나누는 시간을 꼭 가져야겠다.

 


댓글

댓글 쓰기

이 블로그의 인기 게시물

내배캠15일차_map() reduce() fold()

이미지
1. dart 함수형 프로그래밍 복습 1] map() map()을 사용해서 새로운 리스트를 만들어내기. 파라미터 'x'를 사용하여 멤버 이름 앞에 블랙핑크를 앞에 붙여준  newBlackPink, newBlackPink2를 만들었다.  newBlackPink, newBlackPink2는 표현은 같지만 서로 다른 리스트임을 알 수 있다. 연속된 숫자를 split(' ')으로 분리한 뒤, x.jpg형태로 map() 적용. toList()를 통해 리스트 형태로 도출한다. 컬렉션 Map에서 key값과 value값 따로 map()을 통해 리스트 형태로 만들기  컬렉션 Set (중복허용)도 map()을 통해 리스트화, 다시 toSet()으로 만들어준 것. 2] reduce() reduce()를 통해 리스트 numbers 내의 숫자의 합계 구하기. 최고 점수 학생을 구하는 과정. 심화과제 도전문제 기능 중 하나. 1) 합계  var total = numbers.reduce((a,b) => a+b); 2) 최댓값 var max = numbers.reduce((a,b) => a > b ? a : b var topStudent = student.reduce((a,b) => a['score'] > b['score'] ? a : b (최고점 학생찾기) 3) 최솟값 var min = numbers.reduce((a,b) =>a < b ? a : b 4) 곱셈 누적 var product = numbers.reduce((a,b) => a * b 5) 문자열 합치기 var text = words.reduce((a,b) => '$a $b'); 3] fold() fold()는 매개변수 2개 필요, 첫번째 매개변수는 초기값을 할당한다.  int 초기값 0, String 초기값 ' '  final count(int)처럼 처음 컬렉션 타입(String)과 다른 타입...
자세한 내용 보기

내배캠16일차_Flutter_스토어 앱 만들기

이미지
1. Flutter 입문 StatelessWidget을 상속받는 Myapp 클래스 ** build : 위젯이 화면에 어떻게 그려질지를 정의함  build(BuildContext context) Column : 위젯을 세로로 배치 SafeArea : Status(상태바) 영역에 padding(여백)을 넣어주는 위젯        Row 위젯 : 위젯들을 가로로 배치하는 위젯 Spacer 위젯 : Row 나 Column에서 위젯 사이의 간격을 조정, 남은 모든 공간 차지 Padding 위젯 : 자식 위젯 주변에 여백을 주는 위젯 Image 위젯  Image.network('http://링크주소') :인터넷 이미지 바로 사용 Image.asset('assets/image.png') : 프로젝트에 추가해준 이미지 사용 Image.file('디바이스_내_파일경로')) fit 속성 BoxFit.cover : 원본사진 가로 세로 비율 유지한 채로 지정한 영역에 사진을 맞춤. Expanded 위젯  Row, Column 내 남은 공간을 확장하여 공간을 채울 수 있도록 하는 위젯 2. 인사이트 아티클 2번 엑싯한 창업가의 조언 : MVP에 대한 개념을 바꾸자 https://eopla.net/magazines/35106# MVP는 기본값이다.  FMBM - Fastest Minimally Monetized Business Model 창업 성공은 현금 흐름을 얼마나 빨리 만들어 내는지에 달려있다. 자본이 아닌, 시장으로부터 신뢰를 얻어라. MVP가 "시장 반응을 보는 단계" 였다면, FMBM은 "시장이 실제로 돈을 내는지 확인하는 단계"  1) 누구보다 빠르게 움직여라. 2) 완성도보다 거래를 우선하라. 3) 제품이 아닌 구조를 팔아라. 다른 사람의 지갑을 열게 할 만한 고통(문제)은 무엇일까? 그것을 해결해줌과 동시에 수익을 낼 수 있는 구조를 고민하고 있다. 가장 가깝게는 나와 가족이 겪는 고...
자세한 내용 보기

내배캠 [3주차 WIL]

WIL : Weekly I Learned 1. 하루에 들어가는 정보량이 너무 많아서 TIL을 매일 적는게 부담이 되었던 것 같다. 이 기록이 나의 스토리텔링의 재료가 되어야 할 텐데, 그저 정보를 옮겨담기에 급급했고, 그마저도 방대한 양이었기에 날것 그대로의 메모장을 따로 보관하게 되었는데, 그 메모장의 파편들을 담아 꾸역꾸역 작성한 것을 생각하니 스스로 조금 부끄러워졌다. 우수 TIL 사례를 이전에 보았을 땐, 크게 와닿지 않았는데 함께 수강하는 분들의 사례를 보니, 그동안 낙서장 수준으로 정보의 파편들만 저장하고 있었다는 것을 문득 깨달았다. 앞으로는 내가 우러나서 작성하고 싶은대로, 내가 배운 것들을 자유롭게 기록하는 공간으로 블로그를 잘 활용해야겠다. 😊 2. Dart 기초강의는 어찌되었든 완강을 했다.  여전히 또렷하지는 않지만 이제 코드를 보는 눈이 조금은 생겼다고 느낀다. 이번주 내내 하루에 한번씩은 튜터님께 찾아가 질문을 드리기도 하고, 매니저님의 명쾌한 설명과 추천 강의를 통해서도 어려움이 많이 해소되었다. 마음같아선 연휴에 강의 진도를 맞추고 문제를 풀면서 복습을 하고 싶은데... 공휴일은 애기랑 같이 있기도 하고 가족들과 함께 하는 시간이라 쉽진 않을 것 같다.😭 3. 연휴가 끝나고 돌아오면 심화과제 제출을 해야하고, 새로 결성된 팀에서 아이디어 논의를 할 예정이다. Dart 스터디 모임도 이번주부터 시작하게 되었는데  혼자 스터디하는 것보다 훨씬 훨씬 집중도도 높고,  다른 분들이 고민하는 포인트나 확장될 수 있는 코드들을 함께 나눌 수 있어서 큰 도움이 되고 있다. 👍 4. 팀원 한분이 해외일정으로 이번주에 함께 아이디어 논의를 하지 못했는데, 다른 팀원 한분과 이야기를 나누면서 공통관심사와 도메인에 얽매이지 않고 pain point를 찾아보자 고 했다. 살짝 얽매인 느낌이 없지 않아 있었는데 얘기해주셔서 고마웠다. (염두할 것 : 비용은 최소화하되, 수익모델은 명확하게 하는 방향으로) 연휴동안 그동안 안...
자세한 내용 보기