flutter 입문

우선 전에 작성한 블로그는 dart언어의 내용만 있는것이 아니라 flutter관련 내용도 들어있음을 남긴다.

아참 OOP나 상속에 대해 미리 알고있는 상태에서 글을 작성한것이므로, 요걸 보는 사람이 있다면 OOP와 상속에 대해 먼저 공부해오고 보도록하자.

그리고 이제 슬슬 flutter관련해서 공부한것을 남겨두고자 한다.

설치관련해서는 많은 곳이 다뤘으므로 패스

시행착오와 해결방안에 대해서만 메모를 남겨둔다.

• 안드로이드를 개발하려면 구글 약관 동의가 필요하다.
• 구글 약관 동의는 cdline-tools를 설치하거나 수동으로 환경변수 PATH에 안드로이드 sdk 경로를 집어넣어야 한다.
• Xcode에서 디펜던시 관리하지 마세요 대신 플러터에 양보하세요
• 안드로이드는 에뮬레이터를 하나 만들어야 하며, 나중에는 용량부족으로 앱 실행이 불가능할수도 있다. AVD 고급설정을 내리다보면 내부 스토리지부분이 있다. 여기를 수정해주자.
• 디버깅을 하려면 에뮬레이터/시뮬레이터를 실행한 상태에서 해야한다.
• 에뮬레이터와 시뮬레이터는 항상 볼수 있도록 ‘최상단에 위치’ 옵션을 켜주자.

flutter

flutter는 최근 안드로이드, IOS 앱을 만들때 매우 핫한 것이라고 들었다. 리액트 네이티브 등과 다르게 플랫폼에 구애받지 않고 원하는대로 그릴수 있고 빠르다고는 하는데

이거 말고 다른 이유들은 더 있는지 모르겠다.

암튼 노트 시작한다.

main.dart

main.dart를 보면 import ‘package…’ 라는 문구가 있는데

저 package:flutter/material.dart는 flutter의 거의 대다수의 기능들을 가지고 있으므로, 거의 모든 dart 파일에서 필수로 불려와지는 파일이라고 보여진다.

다른 플러터 파일을 생성한다면 일단 저거 적고 시작하자.

그리고 main 함수가 있는데

이 메인함수는 프로그램을 실행하면 무조건 실행되는 함수다. main2, mian 이렇게 이름 바꾸면 안된다는 의미.

그리고 내부에 runApp이라는 함수가 호출되고 있는데 이 runApp 함수가 실제로 작성한 앱을 화면에서 볼수 있도록 해주는 함수인듯하다.

이때 MaterialApp() 요 함수는 의미는 아직 모르겠지만, 플러터로 개발할때 반드시 runApp에 전달되어에 하는 필수요소라고 한다.

기본 위젯 작성법

위젯은 플러터가 그려내는 아이콘, 컨테이너등등등등등을 위젯이라고 한다. 만약에 내가 새로운 이름의 위젯을 만들고자 한다면

class 키워드를 이용해서 위젯을 만들면 된다. 그리고 필요할때 저 위젯을 호출하면 그만.

여기서 위젯을 작성하는 방법에서 가장많이 사용하는 방법은 2가지가 있다. 필수로 작성되어야 하는 것만 간략히 작성해보자.

class Widget1 extends StatelessWidget {
  const Widget1 ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context){
    return SomeWidget;
  }
}

// ------

class Widget2 extends StatefulWidget {

  _WidgetState createState() => _widgetState<_WidgetState>();
}

// _의 의미는 해당 파일 혹은 해당 클래스 혹은 해당 함수 내부에서만 접근가능하게 하겠다는 것.
// State<Widget2>처럼 해당 클래스를 호출하는 클래스의 이름을 정확하게 명시하자.
class _WidgetState extends State<Widget2>{
  @override
  Widget build(BuildContext context) {
    return SomeWidget;
  }
}

처음부터 어려운 상태 관련 이야기를 해야 하는데, 상태라는건 함수에서 사용하는 변수라고 할까?

저 변수에 따라 화면을 다르게 그리야 하는 경우에 사용되는 것이다. 그러니까 StateFulWidget은 어떤 변수를 관리해야할 위젯인거고 StatelessWidget은 그런거 없이 주는대로 만들어내는 위젯이다.

주의 해야할건 StateFul 위젯만 뭔가 변화하는 위젯을 만들고 Stateless 위젯은 항상 같은 위젯만 만들거라는 생각인데, 어디서 상태를 관리 하냐의 차이지 둘다 변화하는 위젯을 만들수 있다.

암튼 성격에 따라 StatelessWidget 클래스 혹은 StatefulWidget을 상속받아서 선언해주면된다.

그리고나서 두 방식 모두 가지고 있는 build 함수에서 return 값으로 wiget을 리턴하면된다.

지금까지 공부했을때 자주 사용되는 위젯들은 다음과 같다.

1. Container
2. Column
3. Row
4. IconButton
5. EdgeInsets
6. Scaffold
7. SafeArea
8. Text

Container

Container 위젯에서 주로 사용했던 속성들은 다음과 같다. padding: EdgeInsets를 받는다. color: Colors 속성을 받는다. width : double 길이를 받는다. height: double 높이를 받는다. child: 위젯을 받는다.

child로 단 하나의 위젯을 받는다.

EdgeInsets은 패딩을 어떻게 할것인지 결정할때 사용되며 all, only, symmetric, fromLTRB 메서드를 호출하는 방식으로 사용한다. 각각 하나의 값으로 모든 패딩에 적용시키거나(all) 특정 부분에만 패딩을 적용시키거나(only) 좌우 혹은 수직 방향에만 패딩을 적용시키거나(symmetric) 상하좌우의 패딩을 하나하나 입력할때 사용한다.(fromLTRB)

Column

Container와 비슷하지만, 세로로 위젯들을 나열할때 사용한다. 주로 사용하던 속성들은 다음과같다.

mainAxisAlignment: 주된 방향(세로) 위젯의 정렬 방법을 결정한다. 기본적으로 start로 지정되어있다. CrossAxisAlignment: 위와 다른 방향(가로) 위젯의 정렬 방법을 결정한다. 기본적으로 center로 지정. children = const [] 위젯들을 받는다.

주의할건 CrossAxisAlignment는 1렬 종대를 어느쪽에 둘것인지 결정한다는 것이다. 기본적으로 중앙에 두지만 왼쪽, 오른쪽 혹은 차지할수 있을만큼 쭉 늘려버릴수도 있다.

Row

Column과 같다! 하지만 주축이 세로가 아니라 가로방향이다.