[flutter] 플러터 스택드 위젯에서 메모 앱 개발하는 방법

15 Dec 2023

flutter

모바일 앱을 개발할 때, 사용자가 메모를 쉽게 작성하고 관리할 수 있는 기능이 매우 중요합니다. 이번 블로그에서는 플러터(Stacked Widget)를 사용하여 간단한 메모 앱을 개발하는 방법을 살펴보겠습니다.

소개

플러터는 Google에서 개발한 모바일 앱 개발 프레임워크로서, 높은 성능과 화려한 UI를 제공합니다. 스택드 위젯(Staked Widget)은 플러터에서 위젯을 쌓는 방식으로 화면을 구성하는데 사용됩니다.

레이아웃

먼저, 메모 앱의 레이아웃을 구성해야 합니다. 다음은 기본적인 레이아웃 구성을 보여주는 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('메모 앱'),
        ),
        body: Center(
          child: Text('메모를 작성하세요.'),
        ),
      ),
    );
  }
}

기능

이제 메모를 작성하고 저장하는 기능을 구현해야 합니다. 사용자가 텍스트를 입력하고 저장 버튼을 누르면 해당 메모가 저장되어야 합니다.

class MemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('메모 앱'),
        ),
        body: Center(
          child: TextEditor(),
        ),
      ),
    );
  }
}

class TextEditor extends StatefulWidget {
  @override
  _TextEditorState createState() => _TextEditorState();
}

class _TextEditorState extends State<TextEditor> {
  String memo = '';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          onChanged: (text) {
            memo = text;
          },
        ),
        ElevatedButton(
          onPressed: () {
            // 메모 저장 기능 구현
          },
          child: Text('저장'),
        ),
      ],
    );
  }
}

결론

이제 여러분은 플러터 스택드 위젯을 활용하여 간단한 메모 앱을 만들 수 있습니다. 메모 앱을 더 다양하고 유용하게 확장하는 방법에 대해 더 알고 싶다면 플러터 공식 문서를 참고해보세요.

목차

소개

레이아웃

기능

결론