[flutter] 6강~8강 | 프로젝트 폴더와 기본 코드 이해하기

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

 

 ✅ pubspec.ymal : 프로젝트의 버전 라이브러리 등등을 관리

 ✅ 안드로이드 폴더 및 iOS폴더는 각각의 플랫폼에 배포하기 위한 코드를 가짐

 ✅ test폴더는 Dart코드 테스팅 위한 코드

 ✅ ⭐️ lib폴더 여기서 앱 만들 때 작업을 주로 한다 

 

2. 코드의 기본 내용 / 앱 페이지의 기본 구조 공식화 하기

 

✅ 클래스 명과 함수 명

 - main(), runApp() -> 어떤 기능을 담당하는 함수 (첫글자 소문자)

 - MyApp() -> 클래스 (첫글자 대문자)

 

✅ 클로징 레이블

 - 플러터는 위젯으로 작업해서 닫는 부분이 정말 중요한데, 클로징 레이블을 주석을 제공해줌.

 

3. 첫번째 플러터 앱 만들기

나의 첫번째 앱 화면

 

✅ 코드 리뷰 및 코드에 대한 설명

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'),
          ],
        ),
      ),

    );

  }
}