Chat-gpt와 함께하는 앱 개발(8)

이전 글에서 Chat-gpt를 통해 Flutter 학습 목차를 만들었습니다. 오늘은 그 중 Flutter 기본에 대해 공부해보겠습니다.

1. 학습 목차 - Flutter 기본

위젯 이해하기
Stateless 위젯과 Stateful 위젯
기본 Flutter 앱 만들기
위젯 트리 이해
MaterialApp과 Scaffold 사용
Flutter 레이아웃 (Container, Row, Column, Stack)

2. Chat-gpt 답변 및 필자 주석(빨간 글씨)

Flutter는 Google에서 개발한 오픈 소스 UI 소프트웨어 개발 키트(SDK)로, 한 번의 코드베이스로 Android와 iOS 앱을 동시에 개발할 수 있습니다. Flutter 앱은 Dart 언어로 작성되며, 위젯을 기반으로 한 구조를 가지고 있습니다. 이제 각 목차에 대해 자세히 설명하겠습니다.

1. 위젯 이해하기

Flutter의 모든 것은 위젯입니다. 버튼, 텍스트, 레이아웃 등 모든 것이 위젯으로 구성됩니다. 위젯은 Stateless 위젯과 Stateful 위젯으로 나뉩니다.

2. Stateless 위젯과 Stateful 위젯

Stateless 위젯: 상태가 없는 위젯으로, 데이터가 변경되지 않습니다. 한 번 렌더링되면 다시 빌드되지 않습니다.
Stateful 위젯: 상태가 있는 위젯으로, 데이터가 변경될 수 있습니다. 상태가 변경될 때마다 다시 빌드됩니다.

Stateless 위젯 예제

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!'),
        ),
      ),
    );
  }
}

MaterialApp: Flutter 앱의 근간이 되는 위젯입니다. Material 디자인을 따르는 앱을 만들기 위해 사용됩니다. 여러 설정과 테마를 관리할 수 있습니다.
- home: 앱이 시작될 때 표시할 주요 위젯을 지정합니다. 여기서는 Scaffold 위젯을 지정하고 있습니다.
Scaffold: Material 디자인의 기본 레이아웃 구조를 제공합니다. 여러 속성을 사용하여 앱의 기본 UI를 구성할 수 있습니다.
- appBar: 화면 상단에 표시되는 앱 바입니다. 여기서는 AppBar 위젯을 사용하여 제목을 설정합니다.
  - title: 앱 바에 표시할 텍스트를 지정합니다. 여기서는 "Stateless Widget Example"이라는 텍스트를 지정하고 있습니다.
- body: 앱의 주요 내용이 표시되는 부분입니다. 여기서는 Center 위젯을 사용하여 내용물을 중앙에 배치하고 있습니다.
  - Center: 자식 위젯을 중앙에 배치하는 레이아웃 위젯입니다.
    - child: Center 위젯의 자식 위젯을 지정합니다. 여기서는 Text 위젯을 지정하여 "Hello, Flutter!"라는 텍스트를 표시합니다.

Stateful 위젯 예제

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stateful Widget Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Button pressed this many times:'),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

MyApp 클래스는 StatefulWidget을 상속받습니다. StatefulWidget은 상태가 변할 수 있는 위젯을 생성합니다. createState 메서드는 이 위젯의 상태를 관리하는 State 객체를 생성합니다. 여기서는 _MyAppState 클래스가 State 객체로 사용됩니다.
_MyAppState 클래스는 MyApp의 상태를 정의합니다. 여기서는 _counter라는 정수형 변수를 상태로 가지고 있으며, _incrementCounter 메서드는 _counter 변수를 증가시킵니다. setState 메서드는 상태가 변경되었음을 Flutter에 알리며, 이를 통해 UI를 다시 빌드하게 됩니다.
build 메서드는 위젯 트리를 생성합니다. MaterialApp은 Flutter의 기본 앱 구조를 제공하며, home 속성으로 앱의 주요 화면을 정의합니다. 여기서는 Scaffold 위젯이 주요 화면으로 사용됩니다.
Scaffold는 Material Design 레이아웃 구조를 제공합니다. appBar, body, floatingActionButton 등 다양한 속성을 사용하여 UI를 구성할 수 있습니다.
- appBar: 상단에 표시되는 앱 바입니다. 여기서는 AppBar 위젯을 사용하여 제목을 설정합니다.
- body: 앱의 주요 내용이 표시되는 부분입니다. 여기서는 Center 위젯을 사용하여 내용물을 중앙에 배치하고, Column 위젯을 사용하여 수직으로 위젯을 배치합니다.
  - Text('Button pressed this many times:'): 버튼이 몇 번 눌렸는지 설명하는 텍스트입니다.
  - Text('$_counter', style: Theme.of(context).textTheme.headlineMedium): _counter 변수를 표시하는 텍스트입니다. headlineMedium 스타일을 사용하여 텍스트를 렌더링합니다.
- floatingActionButton: 화면의 오른쪽 하단에 떠 있는 버튼입니다. 여기서는 FloatingActionButton 위젯을 사용하여 버튼을 생성하고, onPressed 속성에 _incrementCounter 메서드를 연결하여 버튼이 눌릴 때마다 _counter 변수가 증가하도록 설정합니다. child 속성에는 버튼의 아이콘을 설정합니다.
  - 기본 위치는 오른쪽 하단으로 설정되어 있으나 아래 코드를 추가하여 위치를 변경할 수 있습니다. (endDocked, centerDocked, endFloat, centerFloat 등)
    
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

3. 기본 Flutter 앱 만들기

기본 Flutter 앱을 만드는 과정은 매우 간단합니다. 위의 예제에서 보듯이 main 함수에서 runApp을 호출하여 애플리케이션을 시작합니다.

4. 위젯 트리 이해

Flutter 앱은 위젯 트리 구조로 구성됩니다. 위젯 트리는 계층 구조를 가지며, 부모 위젯은 자식 위젯을 포함합니다. 예를 들어, Scaffold 위젯은 AppBar와 Body를 포함합니다.

5. MaterialApp과 Scaffold 사용

MaterialApp: Flutter 앱의 근간이 되는 위젯으로, 테마, 라우팅, 로케일 등의 설정을 포함합니다.
Scaffold: Material Design의 기본 레이아웃 구조를 제공합니다. AppBar, Drawer, BottomNavigationBar, FloatingActionButton 등을 포함할 수 있습니다.
- appBar: 화면 상단에 앱의 제목, 메뉴 등을 표시하는 AppBar 위젯을 배치할 수 있습니다.
- body: 앱의 주요 내용을 표시하는 부분입니다. 여기에 다른 위젯들을 배치할 수 있습니다.
- floatingActionButton: 화면의 오른쪽 하단에 떠 있는 버튼입니다. 주로 주요 작업을 수행하는 버튼으로 사용됩니다.
- drawer: 왼쪽에서 슬라이드하여 나타나는 내비게이션 메뉴를 배치할 수 있습니다.
- bottomNavigationBar: 화면 하단에 탭을 통해 여러 화면으로 이동할 수 있는 내비게이션 바를 배치할 수 있습니다.
- bottomSheet: 화면 하단에 고정된 시트(sheet)를 배치할 수 있습니다.
- persistentFooterButtons: 화면 하단에 고정된 버튼을 배치할 수 있습니다.
- backgroundColor: 배경색을 설정할 수 있습니다.

MaterialApp과 Scaffold 예제

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('Flutter App with Scaffold'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

6. Flutter 레이아웃 (Container, Row, Column, Stack)

Flutter에서 레이아웃을 구성하는 주요 위젯은 Container, Row, Column, Stack입니다.

Container: 하나의 자식 위젯을 포함하고, 패딩, 마진, 정렬, 크기 등을 설정할 수 있습니다.
Row: 가로 방향으로 위젯을 배열합니다.
Column: 세로 방향으로 위젯을 배열합니다.
Stack: 위젯을 서로 겹치게 배열합니다.

레이아웃 예제

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('Flutter Layout Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(16.0),
              color: Colors.blue,
              child: Text(
                'Container Widget',
                style: TextStyle(color: Colors.white),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(16.0),
                  color: Colors.red,
                  child: Text(
                    'Row Item 1',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(16.0),
                  color: Colors.green,
                  child: Text(
                    'Row Item 2',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ],
            ),
            Stack(
              alignment: Alignment.center,
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.yellow,
                ),
                Container(
                  width: 50,
                  height: 50,
                  color: Colors.black,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Column: 자식 위젯들을 세로로 배열합니다.
mainAxisAlignment: 자식 위젯들을 수직으로 중앙에 정렬합니다.
children: Column 위젯 내에 포함될 자식 위젯들의 리스트입니다.
어떻게 배치할 지(Column, Row, Stack) 선택한 후 children에 해당하는 widget들을 배치하는 형식입니다. Column 안에 container, Row, Stack 3가지가 있고 Row 안에 Row item 1, Row item2 가 위치하고 있으며, Stack 안에 100 x 100과 50 x 50 2개의 widget이 있습니다.

이제 위의 내용을 바탕으로 Flutter의 기본 개념과 구조에 대해 이해할 수 있을 것입니다. 각 개념을 직접 실습해보면서 Flutter 개발에 익숙해지세요!

저작자표시 비영리 변경금지 (새창열림)

떵떵남편

Chat-gpt와 함께하는 앱 개발(8) - flutter 기본