[Dart] 12. Dart의 -Flutter 소개-

Flutter 학습: 소개 및 기초

Flutter는 Google에서 개발한 오픈 소스 UI 소프트웨어 개발 키트로, 한 번의 코드 작성으로 iOS, Android, 웹, 데스크톱용 애플리케이션을 만들 수 있습니다. 이번 글에서는 Flutter의 특징과 사용 사례, 설치 및 설정, 기본 위젯, 레이아웃 위젯 사용법에 대해 알아보겠습니다.

---

1. Flutter 소개: Flutter의 특징과 사용 사례

Flutter의 특징:

1. 크로스 플랫폼 개발:
   • Flutter는 한 번의 코드 작성으로 iOS, Android, 웹, 데스크톱용 애플리케이션을 모두 개발할 수 있습니다.
2. 빠른 개발 속도:
   • Hot Reload 기능을 통해 코드 수정 후 즉시 결과를 확인할 수 있어 개발 속도가 빠릅니다.
3. 풍부한 위젯:
   • Flutter는 다양한 기본 위젯을 제공하여 복잡한 UI도 쉽게 구성할 수 있습니다.
4. 고성능:
   • Flutter는 네이티브 ARM 코드로 컴파일되어 성능이 뛰어납니다.
5. 커뮤니티와 생태계:
   • 강력한 커뮤니티와 풍부한 플러그인 생태계를 갖추고 있어 다양한 기능을 쉽게 확장할 수 있습니다.
6.  

Flutter의 사용 사례:

1. 모바일 애플리케이션:
   • Google Ads, Reflectly, Alibaba 등 다양한 기업에서 Flutter를 사용하여 모바일 애플리케이션을 개발하고 있습니다.
2. 웹 애플리케이션:
   • Flutter는 웹 애플리케이션 개발도 지원하여, 크로스 플랫폼 웹 애플리케이션을 개발할 수 있습니다.
3. 데스크톱 애플리케이션:
   • Windows, macOS, Linux용 데스크톱 애플리케이션 개발도 가능합니다.

---

2. Flutter 설치 및 설정: Flutter SDK 설치, IDE 설정

Flutter SDK 설치:

1. Flutter 공식 사이트 방문:
   • Flutter 설치 페이지에서 운영체제에 맞는 설치 방법을 확인합니다.
2. SDK 다운로드 및 설치:
   • Flutter SDK를 다운로드하고 압축을 풉니다.
   • 압축을 푼 디렉터리를 PATH 환경 변수에 추가합니다.
3. 설치 확인:
   • 터미널에서 다음 명령어를 실행하여 Flutter가 제대로 설치되었는지 확인합니다.
   flutter doctor

IDE 설정 : Flutter는 다양한 IDE와 호환됩니다. 여기서는 Visual Studio Code와 Android Studio를 예로 들어 설정 방법을 설명하겠습니다.

 

Visual Studio Code 설정:

1. Visual Studio Code 설치:
   • Visual Studio Code 다운로드 페이지에서 설치 파일을 다운로드하고 설치합니다.
2. Flutter 플러그인 설치:
   • Visual Studio Code를 열고, 확장(Extensions) 아이콘을 클릭합니다.
   • 검색 창에 "Flutter"를 입력하고, Flutter 플러그인을 설치합니다.

Android Studio 설정:

1. Android Studio 설치:
   • Android Studio 다운로드 페이지에서 설치 파일을 다운로드하고 설치합니다.
2. Flutter 플러그인 설치:
   • Android Studio를 열고, File -> Settings -> Plugins로 이동합니다.
   • 검색 창에 "Flutter"를 입력하고, Flutter와 Dart 플러그인을 설치합니다.

---

3. Flutter 기본 위젯: StatelessWidget, StatefulWidget

Flutter는 다양한 위젯을 제공하며, 모든 것은 위젯으로 구성됩니다. 기본적으로 두 가지 주요 위젯이 있습니다. StatelessWidget과 StatefulWidget.

 

StatelessWidget : StatelessWidget은 상태가 변하지 않는 위젯을 정의할 때 사용합니다.

 

예제:

[dart]

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateless Widget Example'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

 

위의 예제에서 MyApp 클래스는 StatelessWidget을 상속받아 상태가 변하지 않는 위젯을 정의합니다.

 

 

StatefulWidget : StatefulWidget은 상태가 변할 수 있는 위젯을 정의할 때 사용합니다.

 

예제:

[dart]

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateful Widget Example'),
        ),
        body: Center(
          child: CounterWidget(),
        ),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Counter: $_counter'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

 

위의 예제에서 CounterWidget 클래스는 StatefulWidget을 상속받아 상태가 변할 수 있는 위젯을 정의합니다. setState 메서드를 호출하여 상태가 변경될 때 UI를 업데이트합니다.

---

4. Flutter 레이아웃: 레이아웃 위젯 사용법

Flutter는 다양한 레이아웃 위젯을 제공하여 복잡한 UI를 쉽게 구성할 수 있습니다.

 

기본 레이아웃 위젯:

1. Container:
   • Container 위젯은 여백, 패딩, 정렬, 크기 등을 설정할 수 있는 다목적 위젯입니다.
   [dart]

    

   Container(
     padding: EdgeInsets.all(16.0),
     margin: EdgeInsets.all(8.0),
     color: Colors.blue,
     child: Text('Container Widget'),
   );

    
2. Row와 Column:
   • Row와 Column 위젯은 자식 위젯들을 수평 또는 수직으로 정렬합니다.
   [dart]

    

   Column(
     mainAxisAlignment: MainAxisAlignment.center,
     children: [
       Text('First'),
       Text('Second'),
       Text('Third'),
     ],
   );

    
3. Stack:
   • Stack 위젯은 자식 위젯들을 서로 겹쳐서 배치합니다.
   [dart]

    

   Stack(
     children: [
       Container(
         width: 100,
         height: 100,
         color: Colors.red,
       ),
       Container(
         width: 50,
         height: 50,
         color: Colors.blue,
       ),
     ],
   );

    
4. ListView:
   • ListView 위젯은 스크롤 가능한 목록을 생성합니다.
   [dart]

    

   ListView(
     children: [
       ListTile(
         title: Text('Item 1'),
       ),
       ListTile(
         title: Text('Item 2'),
       ),
       ListTile(
         title: Text('Item 3'),
       ),
     ],
   );

---

이 글에서는 Flutter의 소개와 설치, 기본 위젯, 레이아웃 위젯 사용법에 대해 알아보았습니다. Flutter를 사용하면 다양한 플랫폼에서 일관된 UI를 쉽게 개발할 수 있습니다. Happy Coding!