3. 프로젝트 구조와 앱 구조

차례:

• 3.1 프로젝트 시작하기
• 3.2 앱 구조 분석
  • 3.2.1 앱 구조
  • 3.2.2 Stateless Widget 클래스
  • 3.2.3 MaterialApp 클래스
  • 3.2.4 StatefulWidget 클래스
  • 3.2.5 Scaffold 클래스와 AppBar 클래스

3.1 프로젝트 시작하기

• flutter create 앱이름 : 처음 flutter 앱 만드는 방법.

.idea : 개발 도구에 필요한 설정

.android : 안드로이드 네이티브 코드를 작성하는 부분

.build : 빌드시 생성되는 파일

.ios : iOS 네이티브 코드를 작성하는 부분

.lib :  다트 코드를 작성하는 부분

.test :  테스트 코드를 작성하는 부분

 

.gitignore : Git 설정 파일, 버전 관리시 무시할 파일 규칙 작성

.metadata : 프로젝트가 관리하는 파일

.package : 각종 패키지 정보

.flutter-app.iml : 개발 도구에 필요한 설정 파일

.pubspec.lock : 패키지 매니저가 이용하는 파일

.pubspec.yaml : 패키지 매니저가 이용하는 파일

.README.md : 프로젝트 설명을 작성하는 파일

 

3.2 앱 구조 분석

3.2.1 앱 구조

import 'package:flutter/material.dart';
void main() {
 runApp(const MyApp());
}
class MyApp extends StatelessWidget { ... }
class MyHomePage extends StatefulWidget {...}
class _MyHomePageState extends State<MyHomePage> { ... }

• 처음 앱을 만들면 위와 같은 구조로 되어 있다. MyHomePage와 _MyHomePateState가 샘플 앱의 화면을 나타내는 코드. 추가 코드는 거의 _MyHomePageState에 작성.
• import 'package:flutter/material.dart';  :   위 패키지는 Material 디자인 위젯을 포함하고 있어서 관련 위젯 사용가능.

3.2.2 Stateless Widget 클래스

class MyApp extends StatelessWidget {
 const MyApp({super.key});
 @override
 Widget build(BuildContext context) {
   return MaterialApp( … 생략 …);
 }
}

• StatelessWidget 클래스는 상태를 가지지 않는 위젯을 구성하는 기본 클래스입니다. 여기서 상태를 가지지 않는다는 의미는 한 번 뷰가 그려진후 다시 그려지지 않는다는 의미이다. 
• StatelessWidget은 클래스는 build() 메소드를 가지고 있습니다. build 메서드는 위젯을 생성할 때 호출되는데, 실제 화면을 그릴 위젯을 작성해 반환합니다.

3.2.3 MaterialApp 클래스

   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: const MyHomePage(title: 'Flutter Demo Home Page'),
   );

MaterialApp은 3가지 인수를 설정합니다. title, theme, home

• home : 여기에 작성하는 위젯은 실제 이 앱이 표시하는 위젯이 됩니다.

3.2.4 StatefulWidget 클래스

상태가 있는 위젯을 정의할 때는 StatefulWidget 클래스를 사용합니다.

class MyHomePage extends StatefulWidget {
 const MyHomePage({super.key, required this.title});
 final String title;
 
 @override
 State<MyHomePage> createState() => _MyHomePageState();  // (1)
}
 
class _MyHomePageState extends State<MyHomePage> {
 int _counter = 0; // (2)
 
 … 생략 …
 @override
 Widget build(BuildContext context) { // (3)
   return Scaffold( … 생략 …),
   );
 }
}

1. MyHomePage 클래스에서 상속받은 createState() 메서드를 재정의하여 _MyHomePageState클래스의 인스턴스를 반환. 이 메서드는 StatefulWidget이 생성될 때 한번만 실행되는 메서드.
2. 상태 클래스 : State 클래스를 상속받은 클래스. 나중에 이 변수 값을 변경하면 화면에 다시 그림.
3. _MyHomePageState 클래스의 상태에 따라 화면에 그려질 코드를 여기에 작성. 

3.2.5 Scaffold 클래스와 AppBar 클래스

 

  return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: … 생략 … ,
     floatingActionButton: … 생략 … ,
  );

• appBar : 상단의 제목과 메뉴를 표시하는 영역을 나타냅니다.

 int _counter = 0;
 
 void _incrementCounter() {
   setState(() {
     _counter = _counter + 1;
   });
 }

• setState() 메소드를 이용하여 counter 변수를 변경시키고 build() 메소드를 다시 호출되고 화면이 다시 그려짐.

 

전체 코드

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(
        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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}