아토믹데브_3_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

3강: 첫 번째 Flutter 프로젝트 생성 및 구조 이해

---

내용 요약

1. Flutter 프로젝트 구조 설명:
   • Flutter 프로젝트는 여러 디렉토리와 파일로 구성되어 있습니다. 각 파일과 디렉토리는 프로젝트의 중요한 역할을 하며, 이를 이해하는 것이 중요합니다.
   • 주요 디렉토리 및 파일 설명:
     • lib/: 모든 Dart 코드가 포함된 디렉토리로, main.dart 파일이 여기에 위치합니다.
     • test/: 테스트 코드가 포함된 디렉토리입니다.
     • android/, ios/, web/: 각각 Android, iOS, 웹 애플리케이션을 위한 플랫폼별 설정 파일들이 포함된 디렉토리입니다.
     • pubspec.yaml: 프로젝트의 의존성을 관리하는 파일로, 패키지, 플러그인, 이미지, 폰트 등의 정보를 정의합니다.
2. 첫 번째 'Hello World' 앱 만들기:
   • Flutter의 기본 프로젝트를 생성한 후, main.dart 파일을 수정하여 간단한 'Hello World' 앱을 만들어 봅니다.
   • 이 과정에서 Flutter 위젯 트리 구조와 기본적인 위젯 사용법을 익힙니다.
3. 웹과 모바일에서 Flutter 프로젝트 실행:
   • Flutter 프로젝트를 웹 브라우저와 모바일 에뮬레이터에서 실행하여, Flutter의 크로스 플랫폼 기능을 확인합니다.

---

실습

1. Flutter 프로젝트 생성

• Flutter 프로젝트 생성 명령어:
  • 터미널(또는 명령 프롬프트)을 열고, 원하는 디렉토리로 이동한 후, 다음 명령어를 실행하여 새 Flutter 프로젝트를 생성합니다:

    flutter create hello_world

     
  • hello_world 디렉토리가 생성되고, 기본 Flutter 프로젝트 구조가 설정됩니다.

 

 

 

2. 프로젝트 구조 탐색 및 주요 파일 이해하기

• 프로젝트 구조 설명:
  • hello_world 디렉토리 내부를 탐색하며 주요 디렉토리와 파일을 이해합니다:
    • lib/main.dart: 앱의 시작점인 메인 파일로, 모든 Flutter 앱은 이 파일에서 실행을 시작합니다.
    • pubspec.yaml: 의존성 관리 파일로, 여기에 패키지와 플러그인, 이미지, 폰트 등을 추가할 수 있습니다.
    • android/, ios/, web/: 플랫폼별 설정 파일들이 포함되어 있으며, 각 플랫폼에 맞게 앱을 빌드하고 실행할 수 있습니다.
• main.dart 파일 코드 이해:
  • lib/main.dart 파일을 열어 다음 기본 코드를 확인합니다: 
  •  
  •  

  • 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(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    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),
          ),
        );
      }
    }

     

3. 'Hello World' 앱 만들기

• main.dart 파일 수정:
  • 기본 프로젝트를 'Hello World' 앱으로 바꾸기 위해, lib/main.dart 파일을 다음과 같이 수정합니다:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          home: Scaffold(
            body: Center(
              child: Text('Hello, World!'),
            ),
          ),
        );
      }
    }

     

     
  • 이 코드에서는 기본적인 Flutter 앱 구조를 이해하기 쉽게 만들었으며, Scaffold와 Center, Text 위젯을 사용하여 간단한 'Hello, World!' 메시지를 중앙에 표시하는 앱을 만듭니다.

4. 프로젝트 실행

• 웹에서 실행:
  • 터미널에서 다음 명령어를 사용하여 Flutter 프로젝트를 웹 브라우저에서 실행합니다:

    flutter run -d chrome

    

  • Chrome 브라우저가 열리면서 'Hello, World!' 메시지가 표시된 웹 앱이 실행됩니다.

• 

• 모바일 에뮬레이터에서 실행:
  • Android Studio 또는 VS Code에서 Android 에뮬레이터를 실행한 후, 다음 명령어를 사용하여 모바일 에뮬레이터에서 Flutter 앱을 실행합니다:
  •  

  • flutter run

    

  • 에뮬레이터에 'Hello, World!' 메시지가 표시된 앱이 실행됩니다.
  •  

---

스크린샷

1. Flutter 프로젝트 구조 설명도:
   • hello_world 디렉토리 내부 구조와 각 디렉토리/파일의 역할을 설명하는 스크린샷
2. 'Hello World' 앱 실행 화면:
   • 웹 브라우저에서 실행된 'Hello, World!' 앱 화면
   • Android 에뮬레이터에서 실행된 'Hello, World!' 앱 화면

---

이 강의를 통해 여러분은 Flutter 프로젝트의 구조를 이해하고, 첫 번째 Flutter 앱을 만들어 실행해 보았습니다. 이를 통해 Flutter의 기본 개념과 개발 환경을 익힐 수 있으며, 웹과 모바일에서 동일한 코드를 실행할 수 있는 Flutter의 크로스 플랫폼 능력을 경험하게 됩니다.