24.10.27 flutter 사용

android studio에서 새 프로젝트를 클릭하면 어떤 언어로 프로젝트를 구현할건지 선택하는 창이 나온다.

flutter를 선택하고 다음버튼을 누르면 프로젝트 설정 창이 뜨는데,

intelliJ에서 자주 보던 비주얼이다. 둘이 다른 환경인데 일부러 비슷하게 만든걸까

 

프로젝트 이름과 프로젝트 설명을 작성하고 하단에 플랫폼 선택이 있는데 앱 방식으로 볼 것이기 때문에 ios와 android만 체크해서 생성해준다.

 

프로젝트 생성 시 처음 보이는 화면이다.

lib폴더의 main.dart가 프로젝트 기본 코드이며, 제대로 작동하는지 확인하는 역할이다.

상단에 초록 삼각형인 실행버튼을 클릭하면 브라우저에 해당 코드에 맞는 페이지가 뜬다.

 

해당 코드 페이지이며 하단의 +버튼 클릭 시 카운트가 증가하는 페이지이다.

이제 flutter를 사용해볼건데 일단 프로젝트 폴더의 analysis_options.yaml 파일로 가서

    prefer_typing_uninitialized_variables: false
    prefer_const_constructors_in_immutables: false
    prefer_const_constructors: false
    avoid_print: false

코드를 추가해줘야 한다.

해당 코드의 rules 부분에 이렇게 추가해주면 되는데, 4개의 코드는 코드 작성 시 유연하게 다룰 수 있게 설정하는 코드이다.

dart에서는 기본적으로 타입을 명시하지 않은 변수에 dynamic이라는 타입을 허용시키지만,

prefer_typing_uninitialized_variables: false

 

 

이 코드는 타입을 명시하도록 권장하게 하는 규칙이다. 해당 값이 false면 타입을 명시하지 않아도 경고를 발생시키지 않도록 설정해준다.

 

prefer_const_constructors_in_immutables: false

•  

이 코드는 const 생성자를 사용할 수 있는 불변 클래스에서 const를 사용하도록 권장하는 규칙이다. 해당 값이 false면 굳이 const를 사용하지 않아도 경고가 발생하지 않는다.

 

prefer_const_constructors: false

이 코드는 const를 사용해 객체를 생성할 때 const 생성자를 사용하도록 권장하는 규칙이다. 해당 값이 false면 const로 객체를 생성하지 않아도 경고가 발생하지 않는다.

 

avoid_print: false

이 코드는 print 사용을 피하라고 권장하는 규칙이다. print는 코드 테스트시 디버깅으로 좋지만, 실제 어플리케이션에서는 다른 방식으로 사용하는게 좋다고 판단해서 생긴 규칙인 것 같다. 해당 값이 false면 print를 사용해도 경고가 발생하지 않는다.

 

해당 세팅들은 제대로 된 프로젝트에서는 정확한 타입의 명시와 상수 사용으로 불변함을 유지해야 하기 때문에 간단하게 작성할 때만 사용하면 될 것 같다. 타입스크립트에서 any를 남발하는 것과 비슷한 방식같다.

 

main.dart파일의 내용을

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

이 부분만 남기고 하단의 코드는 직접 수정해야 한다.

flutter도 리액트와 마찬가지로 lib폴더를 src로 생각해서 그 안에 각 개념별로 폴더를 구분지으면 된다. 페이지 코드는 pages폴더라던가, 위젯 코드는 widgets폴더에 넣는식으로

 

본인은 lib 폴더 안에 pages 폴더를 추가해서 그 안에 home.dart파일을 만들었다.

그리고 main.dart, 리액트로 따지면 app.js에서  MyApp의 정의를 해주었다.

import 'package:flutter/material.dart';
import 'pages/home.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: HomePage()
    );
  }
}

 

 

app.js의 기본 코드 실행처럼 flutter에도 void main으로 감싸 MyApp을 인수로 앱의 초기 실행 root로 설정한다.

root로 설정한 MyApp을 작성해줘야 하는데 flutter는 해당 변수를 StatelessWidget이라는 상태가 변하지 않는 불변의 위젯을 상속받아 클래스 방식으로 전달하고 필요할 때 이 클래스를 호출해주는 방식이다.

이 부분도 인텔리제이와 동일한 방식으로 작성되는것 같다.

 

const MyApp({Key? key}) : super(key: key);

MyApp을 상수로 지정해주는데 key타입을 선언해주고 super로 생성자로 지정해준다. 이렇게 작성해주면 MyApp이 재생성되는걸 방지하여 최적화에 도움이 된다.

 

@override
Widget build(BuildContext context) {
  return MaterialApp(
      home: HomePage()
  );
}

그리고 bulid 메소드를 오버라이딩해주는데, build 메소드는 flutter의 위젯 트리를 구성해주는 역할을 한다. 해당 코드를 통해 화면에 출력된다.

해당 build 메소드는 위젯이 처음 생성될 때만 한 번 호출되며 그 이후는 호출되지 않는다. 즉, 처음 렌더링되며 MyApp이 호출되고 그 안의 build 메소드로 MaterialApp을 반환해주는 구조이다.

 

MaterialApp은 flutter 앱의 최상위에서 사용되는 위젯으로 기본적인 설정과 Material 디자인을 제공해준다.

그리고 이 위젯은 테마 설정이나 네비게이션 등의 필요 기능을 제공해주는데 여기서 리액트의 router와 같은 기능을 사용할 수 있다.

 

MaterialApp의 속성들

• home: 앱이 실행될 때 처음으로 표시할 화면을 지정해준다.
• routes: 페이지 간의 라우팅을 정의할 때 사용한다.
• theme: 앱의 전반적인 테마를 설정할 때 사용한다.
• debugShowCheckedModeBanner: 오른쪽 상단에 "Debug" 배너 표시를 숨기거나 보이게 설정하는 속성이다.

main.dart는 기본적으로 이렇게 세팅해주고 화면에 보여질 페이지를 작성해야한다.

아까 만든 home.dart를 작성해준다.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'flutter 사용 중',
          style: TextStyle(fontSize: 24, color: Colors.black),
        ),
      ),
    );
  }
}

코드 구조는 MyApp처럼 기본 class방식과 동일하고 반환값에 Scaffold라는 기본적인 material 디자인을 설정해주는 위젯을 사용했다.

flutter에는 다양한 위젯이 있으며, 각각 쓰이는 상황이 다르기 때문에 적절하게 찾아서 사용해야 한다.

 

주요 위젯

Container

• Container 위젯은 사각형 박스를 생성하며, 배경색, 크기, 마진, 패딩 등을 설정할 수 있다. 리액트에서 페이지를 만들기 위해 div를 만드는 방식과 같다.
• Container는 여러 위젯을 포함할 수 있어 복합적인 레이아웃을 만들기에 적합하다.

Column

• Column 위젯은 수직으로 여러 위젯을 배치하며, 각 자식 위젯은 수직 방향으로 정렬된다.
• MainAxisAlignment와 CrossAxisAlignment 속성을 사용하여 정렬 방식을 조정할 수 있다.

Row

• Row 위젯은 수평으로 여러 위젯을 배치하며, Column과 마찬가지로 자식 위젯의 정렬을 설정할 수 있다.

Stack

• Stack 위젯은 여러 위젯을 서로 겹쳐서 배치할 수 있으며, Positioned 위젯을 사용하여 자식 위젯의 위치를 조정할 수 있다.
• 아마 이 부분에서 absolute나 relation 등을 flutter 방식으로 설정할 수 있을 것 같다.

Form

• Form 위젯은 입력 폼을 생성할 때 사용되며, 여러 입력 필드와 버튼을 포함할 수 있다.
• 자바스크립트의 form태그처럼 해당 입력 데이터들을 모아 전달할 때 사용한다.

이 외에도 많은 위젯들이 존재하고, 코드에서 사용한 Scaffold 위젯은 기본적인 material 디자인 레이아웃 구조를 설정해주는데 중요한 역할을 하는 핵심 위젯이다.

Scaffold 위젯은 여러 UI를 포함하고 있어 해당 UI들을 가져와 쉽게 레이아웃을 구성할 수 있다.

 

return Scaffold(
  body: Center(
    child: Text(
      'flutter 사용 중',
      style: TextStyle(fontSize: 24, color: Colors.black),
    ),
  ),
);

body는 scaffold 위젯 속성 중 하나로 작성할 UI를 어디에 배치시킬건지 지정할 수 있다.

Center를 사용해 화면의 중앙에 위치시키고 해당 위젯에서 자식 UI를 지정하기 위해 child를 사용한다.

화면에 텍스트를 보여주고 싶으면 Text를 사용해 출력하고 싶은 텍스트를 작성해주면 된다.

<p>flutter 사용 중</p>이 태그와 같다고 보면 된다.

 

Text의 스타일을 지정해주려면 작성한 텍스트 다음에 스타일을 지정해주면되는데, css 자체는 동일하고 색상의 경우 Colors라는 위젯 속성에서 가져와야 한다.

해당 코드는 화면 중앙에 flutter 사용 중이라는 24크기의 검은색 폰트를 출력해준다.

 

flutter의 코드 자체는 객체지향적(OOP)인 Dart 언어를 사용하여 개발되기 때문에 자바와 구조가 비슷하다. 하지만 안에 내장되어 있는 라이브러리나 기능들을 잘 알고 찾아서 사용해야 하기 때문에 학습이 많이 필요할 것 같다. css를 하나씩 까보면서 각각 언제 사용하는지 찾아봤던 것 처럼 flutter도 파고들 요소가 많아서 좋은 경험이 될 것 같다.