GDG on Campus Sookmyung

구현 📷  1. Hero widgetHero( tag: widget.id, child: Container( width: 200, clipBehavior: Clip.hardEdge, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), boxShadow: [ BoxShadow( blurRadius: 15, ..

7주차에 Data Fetching 과정을 통해 외부 데이터를 가져와보았습니다. 8주차에서는 Future 형태로 받은 데이터를 처리해서 화면에 출력해보겠습니다.1. Future 데이터 불러오기Future 데이터를 불러와서 보여주는 방법으로는 2가지가 존재합니다. 첫 번째로는 async/await으로 데이터를 불러오는 방법이고 두 번째로는 StatelessWidget에서 FutureBuilder를 사용하는 방법입니다.1. async/await로 데이터 불러오기기초적인 방법으로 Api를 연결한 함수를 불러와서 리스트 형태로 데이터를 반환 후 리스트에 저장해주고 initState()를 사용해서 업데이트 해줍니다.class HomeScreen extends StatefulWidget { const HomeScr..

6.1 AppBarlib > screens > home_screen.dartimport 'package:flutter/material.dart';class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( elevation: 2, backgroundColor: Colors.white, foregroundColor: Colors.green, title: const..

Flutter의 Stateful Widget 이해하기Flutter에서 UI를 구축할 때 사용되는 위젯은 크게 두 가지로 나뉩니다.Stateless Widget: Stateful Widget: Stateful Widget은 상태를 가지고 있어, 데이터 변화에 따라 UI를 갱신할 수 있는 특징이 있습니다.Stateful Widget이란?Stateful Widget은 상태를 가질 수 있는 위젯으로, 데이터가 변할 때마다 해당 위젯이 다시 빌드(build)되어 실시간으로 UI가 업데이트됩니다.Stateful Widget은 또 두 부분으로 나뉩니다.위젯 자체 (StatefulWidget 클래스): UI의 기본적인 구조를 정의합니다. 상태를 생성하는 역할을 하며, 상태가 변할 때마다 build 메서드가 호출됩니다...

뽀모도로는 집중 시간을 일정한 단위로 나누어 작업하는 시간 관리 기법이다. 기본 방식은 25분 집중 + 5분 휴식으로 구성되는데, 25분 동안 한 가지 일에만 집중하고, 그 후 5분간 쉬는 것이다. 해당 앱은 25분의 타이머 기능과 25분이 지나면 뽀모도로 횟수가 1 증가하는 기능을 포함한다. 1. Flexible Flexible 위젯은 Flutter에서 레이아웃을 구성할 때 자식 위젯들이 차지하는 공간을 유연하게 배분하는 데 사용된다. flex값을 통해 각 영역의 크기를 조절한다. 전체를 flex로 설정한 비율로 공간을 할당하는 방식이다.      뽀도모로 앱의 UI는 크게 세 부분으로 구성된다. (1) 타이머(2) 시작 버튼(3) 뽀도모로 횟수 체크이 이외의 부분은 필요 없기 때문에 flexible ..

1. widget1 ) Scaffold widgetFlutter의 Scaffold 위젯은 앱의 기본 구조와 레이아웃을 정의하는 데 사용된다. Scaffold는 Flutter 앱에서 화면의 기본 골격을 제공하여, 앱 바(AppBar), 바닥 내비게이션(Bottom Navigation), 플로팅 액션 버튼(Floating Action Button), 드로어(Drawer) 등의 일반적인 UI 요소를 쉽게 추가할 수 있게한다. 또한, Scaffold는 앱의 다양한 위젯과 레이아웃을 통합하는 컨테이너 역할을 한다. Scaffold( appBar: AppBar( title: Text('Scaffold Example'), ), body: Center( child: Text('Hello, Scaffol..

1. Flutter 소개- 구글이 만든 프레임 워크로 iOS, 안드로이드, 윈도우, 리눅스등과 같은 멀티 플랫폼 개발을 지원한다- 다트 언어로 작성하기 때문에 미리 다트 언어를 학습하는 것이 필수이다.1.1 Flutter를 학습해야 하는 이유- 웹/맥OS/윈도우/리눅스 심지어 임베디드, IoT와 같은 다양한 플랫폼을 지원하는 크로스플랫폼이다.- html, css, java script와 같은 내용들을 학습하지 않아도 웹을 만들 수 있다.- 애니메이션, 게임과 같은 다양한 그래픽도 flutter 하나로 구현할 수 있다.1.2 Flutter의 실행 방식다른 프레임 워크는 운영체제에게 직접 text, button과 같은 요소를 만들어달라고 요청한다.하지만 Flutter는 실행할 때 엔진에 의해서 만들어지는 것..

동기 프로그래밍: CPU가 하나의 작업을 하고 있을 경우, 다른 작업을 하지못함--> 코드 순서대로 실행됨비동기 프로그래밍:CPU가 하나의 작업이 끝날 때까지 기다리는 동안 다른 작업을 할 수 있음--> 코드 순서대로 실행되지 않음4.1 비동기 프로그래밍(Asynchronous Programming)Future : 미래에 받아올 값 → 제네릭에 미래에 받아올 타입을 지정ex) Future name = Future.value('코드팩토리'); 비동기적으로 실행void main() { // Future - 미래 // 미래에 받아올 값 → 제네릭에 미래에 받아올 타입을 지정하는 것임 Future name = Future.value('코드팩토리'); Future number = Future.value(1..

Dart에서 자주 사용되는 함수형 프로그래밍 패턴과 그 장점1. 형변환- List, Map, Set을 변환하는 방법1-1. List -> Map- asMap(): 리스트의 각 요소를 key-value 쌍으로 매핑 (key는 리스트의 인덱스가 됨)void main() { List blackPink = ['로제', '지수', '리사', '제니']; print(blackPink.asMap()); // {0: 로제, 1: 지수, 2: 리사, 3: 제니}}1-2. List -> Set- toSet() / Set.from(): 중복된 값을 자동으로 제거void main() { List blackPink = ['로제', '지수', '리사', '제니', '제니']; print(blackPink.toSet());..