programming코딩

리얼 Flutter #3 App 만들기 – Code 구조와 Routes

Posted kowana

지난 Chapter에서 빈 화면과 Splash Screen까지 만들었고 이번 Chapter에서는 실제 App 만들기를 시작하는데 있어 폴더 구조와 App의 각 화면을 만들고 화면간 이동을 위한 Routes 까지 만들어보겠습니다.

App 디자인

예제로 만들어볼 앱은 제가 개인적으로 사용할 Idea Note입니다.

이 앱의 기능은 제가 아이디어가 생각날 때마다 휴대폰으로 언제든지 User Story와 사진, 영상 또는 음성을 녹화할 수 있도록 하는 것입니다.

첫 번째 Release에 포함할 기능에 대해서 Class Diagram과 UI를 스캐치해봤습니다.

Class Diagram

User Interface

  • 화면은 Home과 Idea Editor 2가지입니다.
  • Home의 경우 Idea List를 카드형식과 썸네일 형식으로 2가지로 선택적 표현할 수 있도록 합니다.
  • 새로 만들기는 Floating Button을 누르면 Idea Editor 화면으로 이동합니다.
  • Idea Editor 화면에서 Back을 하면 다시 Home으로 옵니다.
  • Idea Editor에서는 Text 정보외에 사진과 영상 또는 음성 녹음을 할 수 있도록 합니다.
  • Idea Editor에서 입력은 자동으로 저장됩니다.
Routes 정의를 위한 예제 UI

폴더 구조 만들기

폴더 구조는 필수는 아니지만 Flutter를 처음 하신 분들이 쉽게 따라 할 수 있도록 제가 개발하는 방식을 설명드립니다.

lib 폴더의 main.dart가 main파일입니다.

lib 폴더 아래에 ui, model 그리고 bloc 세 개 폴더를 만들었습니다.

이유는 SW를 구성하는 코드들을 역할에 따라 구분하기 위함입니다.

  • ui : Presenation 부분을 담당하는 코드들로 Flutter의 경우 Widget들이 되겠습니다.
  • model : Data 부분을 담당하는 코드로 Data Class나 Repository가 되겠습니다.
  • bloc : Buisness Logic을 담당하는 코드로 Flutter의 경우 Bloc와 State, Event 들입니다.

개발의 생산성을 위해서 각 역할에 대해서 Layer를 구분하고 추상화함으로써 SW의 변경을 용이하게 하는 방법이 반드시 필요합니다.

관련된 많은 Architecture Style (MVC, MVP, Redux, MVVM 등..)이 있습니다.

Flutter에서 주로 사용하는 다양한 방법중에 저는 Bloc를 주로 사용합니다.

Bloc는 다음 Chapter에서 다룰 예정입니다.

UI 화면 만들기 그리고 화면간 Navigating by Routes

지난번 Chapter 2에서 App Icon과 Splash screen 그리고 검은 색의 빈 화면까지 만들었습니다.

이제 실제 앱 화면 만들기를 시작하겠습니다.

저는 Android Design Style의 App을 만들 것이고 이를 위해서는 MaterialApp과 Scaffold로 하위 Widget Tree을 감싸도록 해줍니다.

2개의 화면을 만들고 main.dart를 구성해보겠습니다.

2개의 파일 home.dart와 idea_editor.dart 파일을 ui 폴도 아래에 만들었습니다.

참고로 dart에서는 파일명을 소문자로 작성하는 편인데 이유는 저도 모르겠습니다.

ui/idea_editor.dart

IdeaEditor class를 만들고 Add your idea라는 title을 AppBar에 표시하였습니다.

그리고 몸체에 해당하는 body 부분은 아직 화면이 비어있는 상태입니다.

import 'package:flutter/material.dart';

class IdeaEditor extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Add your idea')),
      body: Container()
    );
  }
}

ui/home.dart

Home class를 만들고 Ideas라는 title을 AppBar에 표시하였습니다.

여기에는 하나의 기능이 더 추가되어야 합니다.

Floating Button을 누르면 Idea Editor 화면으로 전환하는 것입니다.

아래 코드가 Floating Button을 Press했을때 /editor 화면으로 이동하라는 의미입니다.

여기서 /editor는 main.dart의 routes안에 정의하게됩니다.

onPressed: () {Navigator.pushNamed(context, '/editor');}

Navigator는 다양한 화면간 이동을 위한 Interface들이 있습니다.

이 내용에 대해서는 다른 Chapter를 통해서 자세히 설명하도록 하겠습니다.

다음은 Full Code입니다.

이 화면도 역시 아직 body는 아직 비어있습니다.

import 'package:flutter/material.dart';

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Ideas')),
      body: Container(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.red,
        onPressed: () {Navigator.pushNamed(context, '/editor');},
      ),
    );
  }
}

main.dart

main에서는 MaterialApp을 가장 상위로 적용하여 이하의 모든 widget tree를 감싸도록 해줍니다.

그리고 Material App내에서 화면간 Navigating을 위해 각 화면을 routes로 등록해줍니다.

  • initialRoute : 시작할 때 화면을 지정해줍니다.
  • routes : 화면을 각각 route 이름을 정의하여 등록합니다.

저는 Home과 IdeaEditor를 각각 ‘/’, ‘/editor’ 라는 이름으로 등록해주었습니다.

import 'package:flutter/material.dart';

import 'ui/home.dart';
import 'ui/idea_editor.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => Home(),
        '/editor': (context) => IdeaEditor()
      },
    );
  }
}

마치며

다음은 위 코드를 실행한 결과입니다.

  1. Splash Screen후 최초 화면으로 Home이 보이고
  2. Floating Button을 누르면 Idea Editor로 이동하며
  3. Back을 하는 경우 다시 Home으로 돌아오게됩니다.

앞으로 App의 기능과 화면 추가는 오늘 설명드린 routes에 추가함으로써 확장하면 됩니다.

일단 오늘은 여기까지만 정리하고 다음 Chapter에서는 실제로 Business Logic과 함께 구현하는 것으로 빠르게 돌아오겠습니다.

Leave a Reply