기본 위젯 학습 및 사용자 입력 처리 기초

학습 목표

• 기본 위젯 학습 및 사용자 입력 처리 기초
• 간단한 UI 앱 개발 실습 (텍스트 출력, 버튼 클릭 이벤트 처리, 입력 값 활용 등)

---

학습 내용

1. Text: 텍스트 표시 및 스타일링

설명:
Text 위젯은 화면에 글자를 표시할 때 사용합니다. 글자의 폰트 크기, 두께, 색상 등을 설정할 수 있어 앱의 분위기에 맞게 스타일을 적용할 수 있습니다.

예시 코드:

Text(
  '안녕하세요, Flutter!',
  style: TextStyle(
    fontSize: 24, // 글자 크기
    fontWeight: FontWeight.bold, // 굵기 조절
    color: Colors.blue, // 글자 색상
  ),
)

---

2. Image: 이미지 표시 (assets, network)

설명:
Image 위젯은 앱 내에 이미지를 표시할 때 사용합니다. 로컬 에셋 파일 또는 네트워크 상의 이미지를 불러올 수 있습니다.

예시 코드:

// 로컬 에셋 이미지 사용 (pubspec.yaml에 assets 등록 필요)
Image.asset('assets/images/flutter_logo.png'),

// 네트워크 이미지 사용
Image.network('https://flutter.dev/images/flutter-logo-sharing.png'),

---

3. Icon: 아이콘 표시

설명:
Icon 위젯은 Flutter에서 제공하는 여러 아이콘을 화면에 표시할 때 사용합니다. 크기나 색상을 조절하여 다양한 UI 요소와 조화를 이루게 할 수 있습니다.

예시 코드:

Icon(
  Icons.favorite, // Flutter 내장 아이콘 사용
  color: Colors.red,
  size: 50, // 아이콘 크기
)

---

4. TextField: 사용자로부터 텍스트 입력 받기

설명:
TextField 위젯은 사용자가 텍스트를 입력할 수 있는 필드입니다. 입력 값의 변화 감지에는 onChanged 콜백을, 입력 값을 관리하고 싶을 때는 TextEditingController를 사용합니다.

예시 코드:

// 먼저 State 클래스 내에 컨트롤러를 선언합니다.
final TextEditingController _textController = TextEditingController();

// 페이지 내에서 TextField 사용
TextField(
  controller: _textController,
  decoration: InputDecoration(
    labelText: '제목을 입력하세요',
    border: OutlineInputBorder(),
  ),
  onChanged: (text) {
    print('입력 중인 텍스트: $text');
  },
),

---

5. ElevatedButton: 클릭 가능한 버튼

설명:
ElevatedButton 위젯은 사용자가 클릭할 수 있는 버튼을 제공합니다. 버튼을 클릭하면 onPressed 콜백 내에 정의된 로직이 실행됩니다.

예시 코드:

ElevatedButton(
  onPressed: () {
    print('버튼이 클릭되었습니다.');
  },
  child: Text('저장'),
),

---

간단한 UI 구현 실습

목표:

• 제목과 본문을 입력할 수 있는 두 개의 TextField 배치
• 저장 버튼을 눌렀을 때 입력된 값이 콘솔에 출력되도록 구현 (실제 저장 로직은 차후 구현)

예시 코드:

import 'package:flutter/material.dart';

// 앱 실행 시 TodoApp 위젯을 루트로 사용
void main() => runApp(TodoApp());

// TodoApp은 전체 앱의 뼈대를 구성하는 StatelessWidget
class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '할 일 목록 앱', // 앱의 이름
      home: TodoScreen(),     // 첫 화면으로 TodoScreen 설정
    );
  }
}

// 상태를 가질 수 있는 Todo 화면 위젯
class TodoScreen extends StatefulWidget {
  @override
  _TodoScreenState createState() => _TodoScreenState();
}

// TodoScreen의 상태 클래스
class _TodoScreenState extends State<TodoScreen> {
  // 사용자가 입력한 텍스트를 가져오기 위한 컨트롤러
  final TextEditingController todoController = TextEditingController();

  // "추가하기" 버튼 클릭 시 실행되는 함수
  void _addTodo() {
    // 입력한 텍스트를 콘솔에 출력
    print('할 일: ${todoController.text}');
    // 실제 구현에서는 이곳에 할 일을 목록에 추가하는 로직이 들어갈 수 있음
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('할 일 목록')), // 앱 상단의 제목 바
      body: Padding(
        padding: const EdgeInsets.all(16.0), // 전체 패딩
        child: Column(
          children: [
            // 텍스트 입력 필드
            TextField(
              controller: todoController, // 입력값을 추적하는 컨트롤러
              decoration: InputDecoration(
                labelText: '할 일을 입력하세요', // 입력 필드 라벨
                border: OutlineInputBorder(), // 테두리 스타일
              ),
            ),
            SizedBox(height: 16), // 위젯 간 간격
            // 할 일을 추가하는 버튼
            ElevatedButton(
              onPressed: _addTodo, // 버튼 클릭 시 _addTodo 함수 실행
              child: Text('추가하기'),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

1. 일기 작성 화면

2. 일정 추가/수정 화면

3. 할 일 목록 화면

diary_screen.dart

0.01MB

 

 

 

입력 화면

콘솔 출력