카테고리 없음

[flutter]플러터 프로젝트 구성요소

데브수달 2023. 9. 2. 08:22
728x90
반응형

hello_flutter 프로젝트의 구성요소에 대해서 이미지와 함께 확인해보겠습니다.

책에서는 안드로이드 스튜디오는 lntellij IDEA 기반으로 만들어진 안드로이드 공식IDE이기때문에, 무료이며 기능이 강력하다고 설명하고 있습니다. 그렇기에 flutter를 꼭 배워야 겠단 생각이 드네요. 

*안드로이드 스튜디오에 설치되는 플러터 sdk와 필수 플러그인 *

flutter를 개발하려면 설치할 것이 많다고한다. 그 이유는 단일 소스코드로 안드로이드와 ios를 동시에 지원하기 때문이다.저자는 3가지를 설명해주고 있다 . 

1. 플러터 sdk : 개발 키트로 반드시 필수, ide 지원 없이 텍스트 에디터로 플러터 개발할 때 사용
2.플러터 플러그인: 안드로이드스튜디오에서 플러터 언어 인식하기 위한 플러그인

3.다트 플러그인 :플러터 개발 언어인 다트를 안드로이드 스튜디오에서 사용하기 위한 플러그인

 

자, 이제부터 진짜 구성요소에 대해서 알아보겠습니다. 

hello_flutter의 구성요소

 

플러터 프로젝트의 기본 폴더는 다음과 같습니다. (물리적 폴더라고 합니다.)

lib 폴더 : 플러터 소스코드 (.dart파일)위치

android 폴더 : 플러터를 컴파일하여 생성된 안드로이드 앱 소스코드 , 자동 생성되어 있기 때문에 임의로 수정하지 않는다.
ios폴더 : 플러터를 컴파일하여 생성된 ios앱 소스코드 . 역시 자동 생성된다. (맥os에서만 사용 가능)

test폴더: 테스트 코드 위치 

 

최상위 폴더의 주요 파일은 다음과 같습니다.

.gitinore파일: 소스 버전 관리 도구인 깃 파일. 로컬에만 필요한 파일이 원격 저장소인 깃에 올라가지 않도록 한다.
.metadata파일: 플러터 프로젝트를 위한 내부 파일. 개발자가 편집하지 않는다.

.packages파일: pubspec.yaml파일과 관련된 내부 파일로 자동 저장

hello_flutter.iml파일: .iml파일은 안드로이드 스튜디오에서 생성한 프로젝트 내부 파일

pubspec.yaml파일: 이 파일은 중요. YAML문서는 사람에게 읽기 쉽게 만들어진 마크업 언어 파일이며, 플러터 프로젝트에 필요한 라이브러리와 리소스(이미지, 폰트, 동영상) 등을 지정한다..

 

 

요기서 가장 중요한 파일은 lib폴더에 있는 main.dart파일입니다. 

이 파일 하나로 앱을 구동하고 화면을 표시할 수 있습니다. 
다음은 자동 생성된 주석을 제거한 main.dart파일 소스코드입니다. 

 

우선, 앱을 만들기 전 앱 실행 흐름에 대한 그림을 머릿속에 입력해봅시다.

main() -> runApp()

            ->MyApp:: 

               StatelessWidget

            ->(home)

               MyHomePage::

              StatelessWidget
            ->(createState())

              _MyHomePageState::

              State <MyHomePage>
이것이 앱 실행 흐름이라고 합니다. 

그럼 이어서 주석을 제거한 소스코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '처음 배우는 플러터'),
      );
  }
}

1번째 문인 import 'package:flutter/material.dart'; 은 임포트(import)문입니다.
2번째 문인 void main() {

runApp(const MyApp());

} 플러터 앱의 시작점인 main() 함수 입니다. 

C언어의 메인 함수와 같습니다.  메인 함수에서는 단순히 runApp() 함수만 호출하고 있으며, 한 줄로 표현할 때는 =>기호를 중괄호({})를 대체할 수 있습니다.

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

runApp()함수는 인수로 넘긴 위젯을 화면에 표시합니다. 

상태가 있는 위젯도 상태가 없는 위젯도 넣을 수 있습니다.

 

3번째 문인 class MyApp extends StatelessWidget{~~~} 은 MyApp 위젯은 상태가없는 위젯입ㅂ니다. 단순히 화면에 표시되는 UI컴포넌트라고 생각하면 되며, 직관적으로 앱의 제목 Flutter Demo로 타이틀바의 색상은 파란색이 상태가 없는 위젯상태입니다. 그리고 home속성은 위젯의 몸체이며 몸체는 MyHomePage클래스로 지정했습니다.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
          _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
  return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
              ),
      home: const MyHomePage(title: '처음 배우는 플러터'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }
  
   @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        backgroundColor: Theme.of(context).colorScheme.inversePrimary,

        title: Text(widget.title),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

다음은 MyhomePage 위젯입니다.

 

1. MyHomePage 위젯은 MyApp 위젯과는 다르게 상태가 있는 위젯입니다. 상태가 없는 위젯과 다른 점은 creataState() 메서드를 통해 상태를 담당하는 클래스를 지정할 수 있습니다. 즉, 조건에 따라 내용을 갱신할 수 있다. 실제 상태 값은 
_MyHomePageState 클래스에 저장된다.

 

마지막으로 MyHomePage 위젯의 상태를 담당하는 _MyHomePageState 클래스입니다.

1.클래스 이름

2._MyHomePageState클래스는_counter라는 정수형(int)맴버 변수가 있다.초깃값은 0으로 할당된다.

3._incrementCounter()메서드는_counter값을 1증가 시킨다.

4.floatingActionButton 소석은 우측 하단에 표시되는 [+]버튼을 의미하며,플로팅의 의미처럼 위치를 변경할 수 있다.

 

728x90
반응형