Flutter와 Firebase로 Android iOS 둘 다 만들기 1 기본 레이아웃 살펴보기

3 분 소요

새로운 프로젝트를 만들고 MaterialApp에 대해 조금씩 알아봅니다.

개발 환경 확인

참고: Flutter로 크로스플랫폼 앱 만들어보기 를 참고하세요~

플러터 닥터를 통해 개발할 수 있는 환경인지 항상 확인합니다.

예시

$ flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.15.1 19B88, locale ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.40.1)
[!] Connected device
    ! No devices available

alt hello

이 화면까지 왔으면 우선 준비 완료입니다.

레이아웃 시작하기

“플러터란 이런것이다” 라고 보여준 플러터 데모 홈페이지는 잘 봤지만 처음 배우는 이에겐 낯설게만 느껴집니다.

거추장스러운 데모코드를 싹 지워버리고 아래 코드만 남겨봅니다.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('start!!!')
    );
  }
}

alt start

최소한의 요소만 가진 알몸앱은 이렇게 되어버렸습니다.

플러터를 1도 모르지만 느낌적으로 알 수 있는 것들이 생겼습니다.

  • 코드의 시작(entry point)은 main()이다.(세상 모든 프로그램은 시작점이 제일 중요합니다.)
  • flutter/material.dart 에 의문의 단어들(StatelessWidget, Widget등)을 정의한 내용이 포함되어있다.

애로우 함수

혹시나 하고

// void main() => runApp(MyApp());
void main() { 
  runApp(MyApp());
}

이렇게 바꿔보았는데 자스(ecmascript)같은 느낌입니다.

저처럼 여러가지 플랫폼을 왔다갔다하면.. 자연스럽게 다른 플랫폼과 비교하고 특징을 알아보고 싶습니다..

위젯

플러터는 위젯 덩어리입니다.

위젯 안에 위젯 안에 위젯 안에 … 로 이루어집니다.

html로 생각하면

<div>
  <div>
    <div>
      <div>abcd</div>
    </div>
  </div>
</div>

바로 이런 느낌이죠~

정적인 위젯

현재는 StatelessWidget 로 연장된(extends) 위젯이란 것 인데 말 그대로 변화가 없는 위젯입니다.

앱의 시작 상단부는 고정시킨 정적인 위젯으로 만들고 변경이 잦은 센터 부분을 동적인(statefulWidget)으로 사용해보면 되겠죠?

최상위 위젯

위젯 역시 시작점, 즉 엔트리포인트가 필요한데..

머터리얼디자인으로 만들어진 MaterialApp이라는 클래스로 생성(build)합니다.

꼭 MaterialApp만이 시작점이 아닙니다. 쿠퍼티노 디자인으로 시작하려면 flutter/cupertino.dart를 사용해서 해당 클래스로 생성하면 되는 것이죠~

참고: https://api.flutter.dev/flutter/material/MaterialApp-class.html

위 링크로 MaterialApp이라는 클래스에 어떠한 멤버들이 있는 지 확인할 수 있습니다.

MaterialApp의 home이 원하는 것은 위젯이며 결국 Text(‘start!!!’)는 위젯입니다.

중앙정렬해보기

Center를 이용하면 간단히 해결됩니다.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: Text('start!!!')
      ),
    );
  }
}

alt center

결국 Center 역시 위젯이며 child는 위젯을 원하는 형태인 것입니다.

참고: https://api.flutter.dev/flutter/widgets/Center-class.html

앱처럼 만들기

앱 같은? 느낌을 줄 수 있는 표준 레이아웃이 있습니다.

alt scaffold

출처: https://api.flutter.dev/flutter/material/AppBar-class.html

바로 이런 형태가 기본적인 것이죠~

이런 기본 형태를 만드는 것은 쉽습니다.

바로 scaffold라는 클래스가 쉽게 만들어 줍니다.

참고: https://api.flutter.dev/flutter/material/Scaffold-class.html

스캐폴드 구성을 간단히 확인해보고 하나씩 넣어봅니다.

home: Scaffold(
  appBar: AppBar(
    title: Text('hiru~')
  ),
  body: Center(
    child: Text('hello?')
  )
)

alt scaffold

이제 좀 봐줄만한 정도입니다.

appbar 모양 내보기

제목만 있어서 썰렁하기 때문에 AppBar에 leading과 actions를 채워봅니다.

appBar: AppBar(
  leading: Icon(Icons.menu),
  title: Text('hiru~'),
  actions: <Widget>[
    Icon(Icons.mic),
    Icon(Icons.missed_video_call),
  ],
),

alt appbar1

Icon이라는 위젯 클래스를 넣어주고 안에 들어갈 아이콘은 Icons. 까지만 써주면 키워드 검색이 가능합니다.

leading은 괜찮은데 actions가 추합니다.

actions는 말그대로 액션이기 때문에 버튼이 필요한 것 같은 느낌이 들죠?

그래서 IconButton이란 것을 써봅니다.

참고: https://api.flutter.dev/flutter/material/IconButton-class.html

매번 클래스를 찾기위해 공식 도큐를 찾기는 에너지가 너무 많이 필요합니다.

개발툴(vscode)을 이용해서 해당 클래스에 마우스만 올려두면(hover) 간단한 자식들을 알 수 있습니다.

alt appbar1

IconButton이라는 것이 있을 것 같다는 느낌으로 써보고 그위에 마우스를 올려보고 개발하는 것이죠~

actions: <Widget>[
  IconButton(
    icon: Icon(Icons.mode_comment)              
  ),
  IconButton(
    icon: Icon(Icons.money_off)              
  ),
],

alt appbar1

작성하고 나니 아이콘이 어두운색입니다.

눌러도 의미가 없는 비활성상태 이기 때문이죠..

첫 이벤트 만들어보기

이제부터 프로그래머의 영역에 들어갑니다.

저는 어떤 플랫폼을 시작하든 콘솔에 무엇을 찍을 수 있게 해놓고 시작합니다.

그래야 dart라는 언어도 테스트해보고 어떤 변수, 구조, 행위등을 살펴볼 수 있기 때문이죠..

actions: <Widget>[
  IconButton(
    icon: Icon(Icons.mode_comment),
    onPressed: () {
      print('눌렀어!');
    },              
  ),
  IconButton(
    icon: Icon(Icons.money_off),
    onPressed: () => print('애로우!'),              
  ),
],

alt appbar1

아이콘 색상이 밝아졌고 키프레스 이벤트에 반응하여 콘솔에 찍는 것을 확인할 수 있습니다.

이제 print는 개발하면서 가장 많이 만나는 친구가 되겠죠~

다트의 print 는 자스의 console.log 만큼 자유도가 강합니다. 출력을 위해 문자열 변환을 하지 않아도 왠만한 정도는 표현을 해줍니다..

소스코드

https://github.com/fkkmemi/ff

영상

댓글남기기