[KOR,ENG]Flutter todo - 1

Flutter 로 todo 앱을 만들어보겠습니다. 

Dart 문법 숙지, Flutter 설치 및 기타 환경설정은 마친분들을 위한 글입니다.

 

flutter 도 안드로이드 처럼 MainActivity같은 진입점부터 프로그램을 실행합니다.

flutter에서는 main 함수가 그 역할을 해줍니다.

 

https://flutter.dev/docs/development/ui/widgets-intro

Introduction to widgets

 

Flutter는 runApp 함수의 매개변수로 Widget을 받아서 Widget tree의 Root 로 삼습니다. Center가 Widget이라고?

하는 의문때문에 상속구조를 따라가보았습니다.

 

실제로 Widget의 서브클래스입니다.

Fltuter framework는 Root 요소가 스크린을 모두 덮도록 강제합니다. 그말인즉슨, 맨 위의 코드는 스크린의

정중에 나타날 수 밖에 없다는 것 입니다.  

어플을 만들 때, StatelessWidget 과 StatefulWidget 둘 중 하나를 선택하게 되는데요, 만드려는 Widget이 

state를 가지느냐 안 가지느냐에 따라 선택하시면 됩니다. 예를들어, 어플리케이션이 시작할 때 로딩화면으로 불리는 스플래시 화면의 Widget 같은 경우는 state를 가질 필요가 없겠습니다. 

Widget의 주요 목적은 build 라는 함수를 구현하는데 있습니다. build 함수는 widget을 low-level의 Widget의 표현으로 바꾸어서, 그렇게 low-level 로 표현된 Widget을 RenderObject으로 표현하고, 이것이 widget의 모양을 만들어냅니다.

FractionallySizedBox 는 percent 단위로 크기를 지정해서 만들 수 있는 Container 입니다. 이것도 

상속구조를 뒤져보면 Widget 의 subclass임을 알 수 있습니다. 어쨌든, 사이즈는 그렇게 정할 수 있습니다

코드에 따라서, 가로 70%, 세로 50%를 차지하는 Container 가 그려집니다. 그리고 이 Container는

child로 Container를 가집니다. 그 Container는 배경색이 Colors.white 이므로 흰색입니다. 그리고19행에서

이 Container는 또, Column 이라는 Widget을 child로 가집니다. 그런데 그 child는 이번엔 children을 가집니다.

당연히 child 여러개를 쓸 수 있겠거니 생각할 수 있습니다.  

첫 번 째 child는(20행) Bye flutter라는 내용을 담은 텍스트박스이고

두 번 째 child도(24행) 같은 내용을 담고 있는 텍스트 박스입니다.  이것을 이제 실행해보면

 

이렇게 결과를 얻을 수 있습니다. 코드가 계속 깊게 들어가서 복잡해보이긴 하지만 저는 개인적으로 

Android 할 때보다 좋다고 느껴졌는데,

1. 별도의 xml을 사용하지 않아서 파일을 왔다갔다 하지 않아도 되는 점

2. (1)번과 개연성이 있는데, 로직코드와 styling 을 위한 코드의 case랑 스타일이 비슷해서

   헷갈리지 않는다는 점

3. Android에 비해 모듈화가 간편할 것 같다고 느껴졌습니다. Adapter 같은 것을 만들때 훨씬 용이할 것 같습니다.

4. View(Widget)이 어떤 계층으로 되어있는지 한 눈에 보기 쉽다는 점? 

아직은 단점은 전혀 보이지 않는데.. ViewPager 에 대응하는 Widget을 다뤄봐야 유불리를 확실히 따질 수 있을 것 같습니다.

 

이제 네비게이션  기능을 도입해서, 할 일을 추가하는 AddTodoPage 로 라우팅 해보겠습니다.

main.dart가 있는 폴더에 AddTodoPage.dart 를 생성해주세요

 

main.dart 코드부터 보겠습니다.

import 'package:flutter/material.dart';
import 'AddTodoPage.dart';

void main() {
  runApp(
      MaterialApp(
        home : MyApp(),
        routes : <String, WidgetBuilder> {
          '/addTodo' : (BuildContext context) => AddTodoPage(), 
        },
      ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: FractionallySizedBox(
        widthFactor: 1,
        heightFactor:1,
      ),
      floatingActionButton: AddTodoFloatingButton(),
    );
  }
}

class AddTodoFloatingButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
       return FloatingActionButton(
         onPressed: () => Navigator.of(context).pushNamed('/addTodo'),
         child: const Icon(Icons.add),
       );
    }
}

 

상단의 main함수부터 보면, runApp에 일단 MaterialApp을 반환한다는 것을 알 수 있습니다. 

MaterialApp은 여러 property로 구성되어있는데요, 여기서는 맨 처음 시작화면인 home과

app의 라우팅을 나타내는 routes를 명시해주겠습니다. routing 하는 로직이 react에서 하는 방식과

매우 흡사하게 느껴져서 친근하게 다가왔습니다. Dart 문법에 익숙하지 않은 분들을 위해 설명드리면

<String, Widget> { ... } 이것은 set 을 생성하는 코드입니다. 

MyApp 클래스에서 return 부분을 보면 Scaffold 가 최상위 wrapper 입니다. floating button을 쓰고자 할 때는

이 Scaffold를 사용해야합니다. 그리고나서, floatingActionButton property에 프로그래머가 정의한 floating button을 

집어넣어줍니다. 코드가 길지 않기 때문에 굳이 따로 클래스를 나눠서 작성하지 않아도 되지만 

따로 나누는 방법을 보여드리기 위해서, AddTodoFloatingButton 클래스를 만들었습니다.  당연히 이것도

Widget이기 때문에, build 메소드를 override해야 함을 알 수 있습니다! 마지막으로 AddTodoFloatingButton을

보면, Navigator 를 사용해서 addTodo 라는 라우터로 이동하겠다는 코드임을 직관적으로 알 수 있습니다.

 

이제 아까만든 AddtodoPage.dart 에 코드를 추가하겠습니다.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class AddTodoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body : Center(
            child: Text(
        "I'm AddTodoPage",
        style: TextStyle(fontSize: 20, color: Colors.black))
    ));
  }

}

특별할 것 없습니다. 아직은 단순히 메세지만 띄워서 라우팅이 정상적으로 되었는지 확인하는거죠.

결과

여기서 FloatingButton을 클릭하면

이렇게 페이지가 이동됬습니다. 너무 쉽고 간편합니다. 

안드로이드 실무자는 아니지만 안드로이드 프로그래밍을 꽤 많이했는데, 위의 기능을 하는 안드로이드앱을 

아무 자료도 참조하지 않고 작성할 자신이 없는데, Flutter 로 위의 코드를 만드는 것은 두 세번만 해보면

쉽게  만들 수 있을 것 같습니다.

 

이제, todo 에 입력할 칸들을 만들어봐야겠습니다.