📘 Frontend/Flutter2023. 5. 29. 15:33Flutter - Row and Column (MainAxisAlignment)

Row & Column (MainAxisAlignment) 저번에 Column Widght에 mainAxisAlignment의 Center 속성을 사용했었습니다. ManAxisAlignment는 주축 정렬을 하는데 사용하는 위젯이었습니다. 이번엔 MainAxisAlignment의 모든 속성을 전부 사용해 보겠습니다. 저번에 만들었던 HomeScreen의 SafeArea코드에 적용해보겠습니다. MainAxisAlignment의 속성을 Start로 두면 하위의 위젯들의 변동이 없습니다. 왜냐하면, 이미 주축이 시작부분으로 되어 있으니까요. end로 하면 위젯들이 아래부터 채워질겁니다. 당연히 center로 설정을 하면 위젯들이 가운데로 올거고, spaceBetween으로 설정한다면 1개의 Container마..

📘 Frontend/Flutter2023. 5. 29. 15:13Flutter - Row and Column (Safe Area)

Row & Column Flutter에서 스크린 단 분리를 할때 StatelessWidget을 상속받아서 만들어왔었다. 이걸 일일이 작성하기 귀찮아서 Flutter는 stless 키워드를 차면 자동 완성을 해준다. class HomeScreen extends StatelessWidget { const HomeScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const Placeholder(); } } 위의 템플릿을 이용해 아래와 같이 작성해왔었는데 스크린 단의 클래스를 디렉터리에 따로 모아서 하는게 더 편하므로, HomeScreen 클래스를 따로 만들어 준다. void main() { run..

📘 Frontend/Flutter2023. 5. 7. 18:10Flutter - Hello World

Hello World 앱 만들기 runApp() : 플러터의 진입 포인트 MaterialApp() : 어플리케이션의 시작 Scaffold() : 화면 정의, backgorundColor : 화면의 배경색 정의 Center() : 컨텐츠의 중앙 위치 Text() : 텍스트, TextStyle : 말그대로 텍스트 스타일 import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( /* Scaffold - 페이지 작성, 어플리케이션 화면 - Body */ home: Scaffold( backgroundColor: Colors.black, body: Center( child: Text( 'Hello World',..

📘 Frontend/Flutter2023. 5. 7. 01:45Flutter Project 환경설정 (iOS, Windows)

💡 Mac Settings Download Flutter SDK Link Get Started - Install - MacOS - Download Zip - Uncompress 원하는 폴더로 이동 (난 Documents - SDK에 저장) cd ./Documents/SDK/flutter/bin vi ~/.zshrc (bash Shell인 경우 ~/.bash_profile) export PATH="$PATH:/Users/space/Documents/SDK/flutter/bin" echo $PATH & which flutter Download Xcode iOS Build Tool AppStore - Download Xcode sudo xcode-select --switch /Applications/Xcode..

📘 Frontend/Dart2023. 5. 6. 22:12Dart - Asynchronous Programming

Java & Kotlin과 동일한 내용은 안쓰고 새로운 내용만 작성 Asynchronous Programming Dart는 기본적으로 비동기로 동작한다. Future와 Stream을 사용해 Async Programming을 할 수 있다. Future 함수가 종료되는 순간이 Future가 종료되는 순간이다. 한 함수의 반환값은 하나여야 한다. Stream 직접 닫아주는 순간이 Stream이 종료되는 순간이다. 여러 반환값을 Stream을 닫아줄 때까지 도중에 계속 반환받을 수 있다. 기본적으로 제공하는 기능이 아니어서 패키지를 불러와야 한다. import 'dart:async'; import로 받아온 async에서 StreamController를 사용할 수 있게 된다. Future delay..

📘 Frontend/Dart2023. 5. 6. 21:20Dart - Functional Programming

Java & Kotlin과 동일한 내용은 안쓰고 새로운 내용만 작성 Type Conversion List -> Map = asMap()을 사용한다. 반환값은 int : Value의 형태로 출력된다. List -> Set는 toSet(), Set.from() 둘 다 가능하다. Map -> List, Set -> List도 toList()로 가능 void main() { List group = ['사람', '사람2', '사람3']; print(group); // Type Conversion to Map -> 반환값 : { 0: 사람, 1: 사람2, 2: 사람2 } print(group.asMap()); // Type Conversion to Set -> 반환값 : ..

📘 Frontend/Dart2023. 5. 6. 19:23Dart - Inheritance & Interface & Generic

Java & Kotlin과 동일한 내용은 안쓰고 새로운 내용만 작성 Inheritance 클래스 간 상속은 자바와 동일하게 extends를 사용한다. 상속 후 생성자에 :를 붙인 이유는 상위 클래스의 생성자에 Named Parameter를 썼기 떄문이다. class Group { String name; int groupCounts; Group({ required this.name, required this.groupCounts }); } class BoyGroup extends Group { BoyGroup( String name, int groupCounts ): super(name: name, groupCounts = groupCounts); } Interface Dart에서의 인터페이스 선언은 클래..

image