[Flutter] 프로젝트 폴더와 기본 코드

ryan·2021년 6월 20일
1

Dart/Flutter

목록 보기
5/21
post-thumbnail

링크

프로젝트 폴더

  • pubspec.yaml: 프로젝트의 메타 데이터를 정의하고 관리(프로젝트 버전, 프로젝트 사용환경, dart 버전, 각 종 dependency 등)

  • lib 폴더: 앱을 만들 때, 99% 이상을 이곳에서 한다.

기본 코드

// flutter material 라이브러리를 import해야만 모든 기본 위젯과 테마 요소들을 사용할 수 있다
import 'package:flutter/material.dart';

// 컴파일러에게 시작점을 알려주기위해서 void main 함수를 불러온다
// void: 텅 빈 공간 => main이란 함수가 끝났을 때, 아무런 값도 반환하지 않는다
// main(): main이란 이름의 함수
// fat arrow를 사용해서 main함수가 runApp 함수를 호출 한다
// runApp은 호출될 때마다 argument(인자 = 위젯)를 받아야 한다
// MyApp은 우리가 직접 만드는 커스텀 위젯이라서, 이름을 마음대로 지어도 된다
// MyApp 위젯은 위젯 트리에서 최상위에 위치하고, 스크린 레이아웃을 최초로 빌드하는 역할을 한다
// ';' 반드시 세미콜론을 붙여야한다
void main() => runApp(MyApp());

클래스 명과 함수 명

// 함수 명
// 첫 글자는 소문자
// 카멜케이스 사용
main(), runApp() 

// 클래스 명
// 첫 글자가 대문자로 시작
// 위젯
// 카멜케이스 사용
MyApp()

위젯 만들기

import 'package:flutter/material.dart';

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

// MyApp 위젯 만들기
// StatelessWidget: 상태 변화가 없는 위젯
class MyApp extends StatelessWidget {
  @override
  // 모든 커스텀 위젯은 또 다른 위젯을 리턴하는 build라는 함수를 가지고 있다
  Widget build(BuildContext context) {
    // import한 material 라이브러리를 사용하는 MaterialApp 위젯을 사용한다
    // MaterialApp 위젯은 runAPP 함수처럼 반드시 argument(인자)를 가져야한다
    // flutter의 모든 위젯들은 argument(인자)를 갖는다
    return MaterialApp(
      // MaterialApp 위젯에서 title을 지정해준다
      title: 'First app',
      // ThemeData()는 앱의 기본적인 디자인 테마를 지정한다
      theme: ThemeData(
      // Swatch: 견본 => 앱에서 사용할 색상 견본, 그리고 음영을 사용할 수 있다.
      primarySwatch: Colors.blue
    ), // ThemeData: 클로징 레이블: flutter에서는 위젯들의 구분이 중요하다
    // home은 App이 실행될 때, 가장 먼저 화면에 보여주는 경로
    home: MyHomePage(),
    ); // MaterialApp: 클로징 레이블
  } 
}

커스텀 위젯 만들어보기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // MaterialApp의 title은 왜 아래와 같이 Text위젯을 사용하지 않았을까?
      // MaterialApp 내의 title은 앱을 총칭하는 이름
      // 스마트폰에서 최근 사용한 앱의 리스트를 보여줄 때는
      // MaterialApp에서 설정한 title이 보여진다
      title: 'First app',
      theme: ThemeData(
      primarySwatch: Colors.blue
    ), 
    // home 위젯이 반드시 필요한 이유는 앱이 실행되면 제일 먼저 보여주는 경로이기때문에
    // home 위젯이 없으면 아무것도 나타나지 않는다
    home: MyHomePage(),
    ); 
  } 
}

// 커스텀 위젯을 만들 때는 StatelessWidget으로 만들 지, StatefulWidget으로 만들 지를 먼저 고민해야한다.
// 체크 박스, 데이터 받는 등, 모양이 변화는 요소가 하나라도 있다면 StatefulWidget을 사용해야한다.
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffold: 교수대, 처형대 => 교육학에서는 '무언가를 혼자 해낼 수 있도록 발판을 만들어 주다'라는 뜻으로 쓰인다
    // Scaffold는 flutter에서 빈 도화지 역할을 한다. Scaffold 위젯이 없으면 어떤 요소들도 앱 화면에 배치 할 수 없다
    return Scaffold(
      // appBar는 기본적으로 앱의 상단 바를 나타낸다
      appBar: AppBar(
      	// Text 위젯은 텍스트와 관련된 다양한 디자인적 arguments를 가지는 위젯이다
      	// MaterialApp의 title과 다르게 AppBar의 title은 
      	// 앱 화면 AppBar에 출력되는 타이틀이다
    	title: Text('First app'),
      ),
      // body는 scaffold 위젯 내에서 가장 주요한 내용이다
      // Center 위젯은 위젯들을 중앙에 배치한다
      body: Center(
        // Column 위젯은 자신의 위젯 내의 모든 요소들을 세로로 배치한다
      	// 요소들에서 알 수 있듯이, child가 아닌 children을 사용한다
        child: Column(
        	// 대괄호는 배열을 의미하고, 이 안에 세로로 정렬될 위젯들을 나열한다
        	// <Widget>은 정확하게는 List<Widget>이라는 제네릭스에서 사용하는 표현이다
        	// 이제는 <Widget>을 사용하지 않고, []사용해도 된다
      		children: <Widget>[
        	// 배열과 같이 한 위젯을 입력하면 ','로 다른 위젯을 나눠주어야한다
        	// ### 참고로 Theme.of(context)를 사용해서 ThemeData에 접근할 수 있다.
        	  Text('Hello', style: TextStyle(color: Theme.of(context).primaryColor),
        	  Text('Hello'),
              Text('Hello'),
           ],
      	),
      ),
    );
  }
}

  • 커스텀 위젯을 여러개로 분리하는 이유는 한 페이지에 길게 코딩을 하는 것은 가독성, 유지보수성 그리고 간결성에 좋지 않기때문이다. 그래서 가급적 코드 구성 상, 체계적인 코드 구분을 두면서 처음부터 코딩하는 습관을 들이는 것이 좋다.
profile
👨🏻‍💻☕️ 🎹🎵 🐰🎶 🛫📷

0개의 댓글