반응형

Flutter 57

[Flutter] stless로 코드 정리하기

plugin stless 을 사용해보자 Widget void main() { runApp( MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( backgroundColor: Color(0xFFF99231), body: Column( mainAxisAlignment: MainAxisAlignment.center, // 기본이 세로상단임 children: [ Image.asset( 'asset/img/logo.png', ), CircularProgressIndicator( color: Colors.white, ), ], ), ); ), ); } class HomeScreen extends StatelessWidget { @override Widg..

[Flutter] asset추가하기(이미지 사용하기)

Flutter에서 asset폴더를 추가하는 방법은 아래와 같다 1. asset이 들어있는 폴더(나의 경우 asset폴더)를 복사한다. 2. 프로젝트를 클릭해서 붙여넣기 한다. 3. pubspec.yaml 야멜파일로 간다. 4. flutter을 찾는다. 5. uses-material-design하단에 탭으로 칸을띄우고 assets:를 추가한다. 6. 엔터를 치면 알아서 들여쓰기가 되는데, - 이후에 파일경로를 추가한다. 7. pub get으로 완전추가한다. 생각보다 과정이 좀 있더라.. 1. asset폴더를 복사(ctrl + c)한 후 2. 프로젝트에 해당되는 곳에 붙여넣기(ctrl + v) 하면 asset폴더가 잘 들어가 있음.. 3. pubspec.yaml 야멜파일로 간다. 4. 야멜 파일에서 스크롤을..

[Flutter] Widget Tree란 무엇일까

idget들의 부모, 자식 관계를 나타내는 것을 Widget Tree라고 한다. 그럼 Widget은 뭘까????????? 위처럼 MaterialApp-> Scaffold-> Cneter->Text 를 위젯이라고 부른다.(TextStyle은 아님) 실제로 화면에 나타나는 애들을 위젯이라고 부른다. Widget들이 Tree형식으로 나타낸다고 하여 WidgetTree로 일컫는다. 지금은 4개의 WidgetTree가 나열됐지만 학습하면서 아래와 같이 더 많이 뻗어나갈 예정이다.

[Dart] Stream (Future와 차이점)

Future 실행 ----------------------await----------------------> 완료(반환값) Future가 1함수-> 1반환값이라면 Stream은 실행-----반환값1(yield)------반환값2(yield)------반환값3(yield)----반환값4(yield)--------완료 1함수 n반환값이다. yield를 통하여 반환값을 완료하기 직전까지 n번 받아낼 수 있다. Stream 사용하기 위해서 따로 패키지를 가져와야한다. (Dart에서 기본제공은 아님) import 'dart:async'; void main() async { final controller = StreamController(); final stream = controller.stream; } Stre..

Flutter/Dart 문법 2023.03.24

[Dart] Async에 대하여 (Future- delayed / await)

CPU의 일 처리 단위를 Thread라고 한다. 일단 간단하게 Async 개념에 대해 예시를 들어 설명해보면 집안일을 주말에 해야 한다고 가정했을 때 빨래 - 1시간, 설거지 - 30분, 청소기 - 30분이 걸린다고 설정하면 sync인 동기적으로 집안일을 하게되면 빨래 1시간, 설거지, 30분, 청소기 30분을 순차적으로 진행하게 되어 2시간의 시간이 걸리게 된다. 만약 async인 비동기적으로 집안일을 하게된다면 세탁기를 돌려놓고 빨래를 하는 동안 설거지와 청소를 순차적으로 진행하여 1시간의 시간이 걸리게 된다. 보통 서버에 요청하고 기다리는 시간동안 Thread를 차지하지 않고 다른 일처리를 먼저 하는 것이 Async의 개념이다 Future Future은 미래에 받아올 값을 의미한다. void mai..

Flutter/Dart 문법 2023.03.24

[Dart] List<Map<>>을 Class로 전환하기(연습)

서버에서 데이터를 가져올 때 보통 Json으로 가져오게 되는데 Map형태와 매우 유사하다 그래서 가져온 데이터를 우리는 Class로 변환할 줄 알아야한다!!!!!! 기본 중에 기본이라우 List idol = [ {'name': '민지', 'group': '뉴진스'}, {'name': '혜린', 'group': '뉴진스'}, {'name': 'RM', 'group': 'BTS'}, {'name': '뷔', 'group': 'BTS'}, {'name': '하니', 'group': '뉴진스'}, ]; 위와 같은 데이터를 가져왔다고 치자.. 이 Map데이터를 Class로 변환해보자 근데 왜 변환하는가????????????????????????????????????? Map은 key value로 이루어진 각각의 ..

Flutter/Dart 문법 2023.03.23

[Dart] cascading

cascading이란 폭포 이런 뜻을 가지고 있지만 개발에서의 cascading은 연속적이라는 뜻을 지닌다. 고로 지금 볼 cascading은 List 두개를 하나의 List로 열거해서 합치는 것이다.( 새로운 List가 생긴다) 형식은 [...List1, ...List2] 이렇게 해주면 된다... 코드를 보면 void main() { List even = [ 2, 4, 6, 8, ]; List odd = [ 1, 3, 5, 7, ]; print([...even, ...odd]); } 위와같이 두 가지의 List가 하나의 List로 새로 생성했음을 알 수 있다.

Flutter/Dart 문법 2023.03.23

[Dart] List - reduce / List - fold

reduce의 특징은 파라미터가 2개가 들어간다. 예시 코드로 형태를 확인해보자(prev와 next 파라미터를 유의해서 보자) void main() { List numbers = [ 3, 5, 2, 1, 4, 7, 10 ]; final result = numbers.reduce((prev, next){ print('-------------'); print('previous : $prev'); print('next : $next'); print('total : ${prev + next}'); return prev + next; }); print(result); } 원리를 보면 previous 값과 next 값이 주어진 함수대로 더해져서 total 값으로 리턴해주게 되는데 다음 prev 값을 보면 이전의 t..

Flutter/Dart 문법 2023.03.23

[Dart] List/map에 where사용해보기(where로 필터링)

void main() { List idol = [ {'name': '민지', 'group': '뉴진스'}, {'name': '혜린', 'group': '뉴진스'}, {'name': 'RM', 'group': 'BTS'}, {'name': '뷔', 'group': 'BTS'}, {'name': '하니', 'group': '뉴진스'}, ]; print(idol); final newjeans = idol.where((x) => x['group'] == '뉴진스').toList(); final bts = idol.where((x) => x['group'] == 'BTS').toList(); print(newjeans); print(bts); } where로 조건을 걸고 List로 도출해 낼 수 있다.

Flutter/Dart 문법 2023.03.23

[Dart] map(List mapping, Map mapping, Set Mapping)

map은 하나의 형태에서 또 다른 형태의 것을 만들어 낼 수 있다. List Mapping void main() { List newjeans = ['민지', '하니', '다니엘', '혜린', '혜인']; final newNewjeans = newjeans.map((x){ return '뉴진스 $x'; }); print(newjeans); print(newNewjeans); } arrow함수로 표현해보면 final newNewjeans2 = newjeans.map((x) => '블랙핑크 $x'); print(newNewjeans2); map을 한번 통과하게 되면 List는 계속 새로운 List로 생성 된다. List로 받은 형태는 .map이 적용이 가능하다. Map mapping void main() { ..

Flutter/Dart 문법 2023.03.23
반응형