Flutter 프로젝트 구성과 기본적인 코딩 + assets + Fixes

 

🚀 pubspec.yaml

 

  프로젝트의 메타 데이터를 관리하는 곳. npm으로 치면 package.json과 같은 곳이다. 파일의 일부를 가져와 보았는데, package.json과 비슷하게 deps, devdeps, version 등이 있는 것을 확인할 수 있습니다.

 

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

 

대부분 주석처리 되어 있는데, 활성화하고 싶은 부분은 주석을 제거하고 활성화되게 처리함으로써 사용할 수 있습니다.

대표적으로, 이미지활용을 처리하는 부분은 다음과 같이 되어 있습니다.

 

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

 

활성화를 위해 다음과 같이 주석을 풀어주고 변경해줍시다. 이미지 사용을 위해 images 폴더를 생성하고, 아래에 두 png 이미지 파일을 넣어주었습니다. 해당 주소를 입력합시다. (사실 images/ 폴더만 입력해도 됩니다.)

 

주의할 점이 있습니다! images/ 를 입력하면 images 폴더 내에 존재하는 이미지 파일을 사용할 수 있는것을 맞습니다만, 만약 images 폴더 내부에 icon 이라는 폴더가 또 존재한다고 가정해봅시다.

 

이런 경우에는 images/ 외에도 images/icon/ 이라고 적어주셔야 합니다. 왜냐하면 지정한 폴더 바로 내에 있는 값만 알아듣기 때문입니다.

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/GitHub-Mark.png
    - images/react.png
  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.
  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

 

여기서 주의할 점은 다른 부분의 주석을 지워서는 안된다는 것입니다. 성공하면 exit code 0가 뜨며 성공합니다.

 

이제 AssetImage라는 위젯으로 해당 이미지를 사용할 수 있게 되었습니다.

CircleAvatar(
                  backgroundImage: AssetImage("images/GitHub-Mark.png"),
                  radius: 55,
                ),

 

 

🚀 android, ios 폴더

 

  크로스 플랫폼으로 빌드하기 위한 정보가 담겨 있음

 

🚀 test 폴더

 

  테스트를 해보기 위함

 

🚀 lib 폴더

 

  가장 자주 사용하는 폴더로, main.dart가 들어 있는 폴더임. 플러터 코딩의 90%가 여기에서 이루어진다.

 

 

어플리케이션 코딩

 

main.dart를 작성해서 간단한 기능을 하는 앱을 만들어보겠습니다.

 

• 위젯 트리 상 최상단에 위치한 위젯임
• 위젯은 클래스임. 대문자로 시작함. (React에서 컴포넌트가 대문자로 시작해야 하는 것과 동일합니다)
• 위젯 생성시 stateless인지 staeful인지 판단할 것

 

import 'package:flutter/material.dart';

// 앱을 구동하기 위한 main 함수. C의 향기가 짙다

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Edu PopKorn",
      theme: ThemeData(primarySwatch: Colors.blue),
      // 처음 접속하면 보이는 Home입니다.
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffold는 도화지임. 여기 안에서 본격적인 작성이 시작됨
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[Text("Video"), Text("TOPIK"), Text("Lecture")],
        ),
      ),
    );
  }
}

 

 

코드 impot 시 주의점

 

당연히 lib 폴더 내부에 여러 폴더나 파일을 만들어가며 프로젝트 가독성을 높이는 방향으로 작성했을 텐데, 문제는 해당 코드를 사용할 때 import하는 두 가지 방식이 있다는 겁니다. 첨부한 사진에서도 볼 수 있듯, 상대경로, 절대 경로가 존재합니다. 가급적이면 package:...를 포함한 경로로 import해주도록 합시다.

 

이후에 폴더 위치를 조정하는 등 조정 사항에 대처하기 편해집니다.

 

 

 

 

 

Fixes

 

ctrl + .이라는 단축키로도 사용되는 VSCode의 강점이다. (안드로이드에서도 찾아보니 있었다... 다들 쓰더라) 코딩할 때 Wrap을 자동으로 해주어 생산성을 높일 수 있다. HTML에서 wrapper 하나 만드려고 했던 고생을 생각해보면 상당히 좋은 기술이다.

또, 위젯을 분리할 수도 있어(Extract Widget) 매우 편리하다.