프로젝트 폴더와 기본 코드 이해하기

프로젝트 폴더와 기본 코드 이해하기

 

모든 앱 개발에서 폴더 구조와 기본 코드 구조가 존재하듯이 이를 정리.

 

플러터 프로젝트 폴더의 구성

 

• pubspec.ymal : 프로젝트의 버전 라이브러리 등을 관리
• 안드로이드 폴더 및 iOS폴더는 각각의 플랫폼에 배포하기 위한 코드를 가짐
• test폴더는 Dart코드 테스팅 위한 코드
• lib폴더 여기서 앱 만들 때 작업을 주로 한다 

 

코드의 기본 구조

• 클래스 명과 함수 명
• 메서드 명은: goHome() 형태로 작성
• 클래스 명은: MyApp 형태로 작성
• 클로징 레이블
  • 플러터는 위젯으로 작업해서 닫는 부분이 정말 중요한데, 클로징 레이블을 주석을 제공해줌.

 

샘플 코드 작성

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp( // 실질적으로 모든 앱을 감싸고 있다.
      title: 'First App', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme: ThemeData(
        primarySwatch: Colors.blue// 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
      ),
      home: MyHomePage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이

    );
  }
}

class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold( // 교육학 용 : 무언가를 혼자 해낼 수 있게 발판을 만들어 주다. -> 빈 도화지 같은 역할
      appBar: AppBar(
        title: Text('My First App'), // 앱바의 이름
      ),
      body: Center(
        child: Column( // 자신 내에 것들을 모두 세로로 배치하는 기능을 가짐
          children: <Widget>[
            Text('Hello'),
            Text('Hello'),
            Text('Hello'),
          ],
        ),
      ),

    );

  }
}

 

 

나의 첫번째 앱 화면